HTML/表单

维基教科书,自由的教学读本

HTML表单(form)用于搜集数据传给服务器端脚本server-side scripting language或客户端脚本如JavaScript来处理.

简介[编辑]

简单例子:

<form id="" action="" method="post">
 <fieldset>
  <legend>Personal details</legend>

  <label for="first">First name</label>
  <input type="text" name="first" id="first"><br />

  <label for="family">Family name</label>
  <input type="text" name="family" id="family"><br />

  <input type="submit" name="personal">

 </fieldset>
</form>

解释 -

id
表单名字
action
处理上传数据的服务器端脚本的URL
method
上传数据的两种方法之一:POST 或 GET.
fieldset
表单控件包含在fieldset中。表单可有多个fieldset. Fieldset自身可嵌套。
enctype {string}
规定在发送表单数据之前,如何对表单数据进行编码。指定的值有:application/x-www-form-urlencoded :在发送前编码所有字符(默认方式);multipart/form-data :不对字符编码。使用包含文件上传控件的表单时,必须使用该值.
legend
每个fieldset以legend元素开始。其内容在fieldset边界上作为标题.
label for=""
是表单控件. for属性的值必须匹配同一表单中某个控件的id属性。
input type="" name ="" id=""
多种输入控件。支持的类型包括 - submit, text, password, checkbox, radio, reset, file, hidden, image, button. name用于服务器辨识是哪个输入控件提供的数据。id属性用于匹配label. nameid属性对于文本框通常有相同值,但对于checkbox或radio输入控件具有不同值。
select
对于下拉列表有SELECT元素,对于多行文本输入有TEXTAREA属性。

上述例子使用 <br /> 标记以在控件之间强制新行。

成功控件[编辑]

浏览器不是将表单所有的控件全部发送到服务器,而是查找所有“成功控件”,只把成功控件的数据发送到服务端。

成功控件是:表单中的有name属性和“当前值”的控件,以及一些特殊情况:

  • 控件不能是禁用状态,即指定disabled="disabled"。
  • 如果一个表单包含了多个提交按键,那么仅当用户点击的那个提交按钮才是成功控件。
  • 对于checkbox控件来说,只有被用户勾选的才算是成功控件。
  • 对于radio button来说,只有被用户勾选的才算是成功控件。
  • 对于select控件来说,所有被选择的选项都做为成功控件,name由select控件提供。
  • 对于file上传文件控件来说,如果它包含了选择的文件,那么它将是一个成功控件。
  • 浏览器不会考虑Reset按钮以及OBJECT元素。
  • 对于checkbox, radio button来说,如果它们被确认为成功控件,但没有为控件指定value属性, 那么在表单提交时,将会以"on"做为它们的value

使用CSS格式化[编辑]

HTML[编辑]

非常简单,无需创建很多div。

<form>

	<label for="name">Name</label>
	<input id="name" name="name"><br />

	<label for="address">Address</label>
	<input id="address" name="address">

</form>

The CSS[编辑]

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

br {
	clear: left;
}

上述CSS代码解释如下:

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}
  1. float: label向form的左端浮动
  2. width: label的最大宽度
  3. display: 作为block级元素显示,即不会被回车换行符分开。
  4. margin-bottom: 底部填充空间
label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}
  1. width: 固定宽度
  2. Text-align: 文本对齐向右
  3. Padding-right: 右侧填充20px
br {
	clear: left;
}
  1. clear: this is the most important part without the clear:left nothing will align properly this basically makes everything within each element sequence align underneath each other and to the left.

更多参见 HyperText Markup Language/Tag List/form