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. name与id属性对于文本框通常有相同值，但对于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;
}

float: label向form的左端浮动
width: label的最大宽度
display: 作为block级元素显示，即不会被回车换行符分开。
margin-bottom: 底部填充空间

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

width: 固定宽度
Text-align: 文本对齐向右
Padding-right: 右侧填充20px

br {
	clear: left;
}

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.