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