HTML表单用法

HTML 表单用于搜集不同类型的用户输入。

1.<form> 元素：<form> 元素定义 HTML 表单

1.<form>属性：

• accept-charset：charset_list，规定服务器可处理的表单数据字符集；
• action：URL，规定当提交表单时向何处发送表单数据；
• autocomplete（H5）：on/off，规定是否启用表单的自动完成功能；
• enctype：规定在发送表单数据之前如何对其进行编码，属性可能的值有：
  1.application/x-www-form-urlencoded；
  2.multipart/form-data；
  3.text/plain；
• method：get/post，规定用于发送form-data的http方法；
• name：规定表单的名称；
• novalidate（H5）：novalidate，如果使用该属性，则提交表单时不进行验证；
• target：_blank/_self/_parent/_top/framename，规定在何处打开action URL；

2.表单元素

1.<input>元素：

• <input> 元素不同的 type 属性：
  1.<input type="text"> 定义供文本输入的单行输入字段：
  <div class="username">
  <label for="username">your name</label>
  <input id="username" type="text" name="username" value="bunny">
  </div>
  2.<input type="password"> 定义密码字段：
  <div>
  <label for="password">your password</label>
  <input id="password" type="password" name="password" placeholder="please input your password">
  </div>
  3.<input type="submit"> 定义提交表单数据至表单处理程序的按钮：
  <input type="submit" value="Submit"/>
  4.<input type="radio"> 定义单选按钮：注意name一致
  <div class="sex">
  <label>your gender</label>
  <input type="radio" name="sex" value="male" checked> male
  <input type="radio" name="sex" value="female"> female
  </div>
  5.<input type="checkbox"> 定义复选框：注意name一致
  <div class="hobby">
  <label>your hobbies</label>
  <input type="checkbox" name="hobby" value="read" checked> reading
  <input type="checkbox" name="hobby" value="movie"> watching movies
  <input type="checkbox" name="hobby" value="piano"> playing piano
  <input type="checkbox" name="hobby" value="paint"> painting
  </div>
  6.<input type="button> 定义按钮
  7.<input type="number">（H5）用于应该包含数字值的输入字段：能够对数字做出限制
  <input type="number" name="quantity" min="1" max="5">
  8.<input type="date"> （H5） 用于应该包含日期的输入字段：根据浏览器支持，日期选择器会出现输入字段中
  9.<input type="color"> （H5） 用于应该包含颜色的输入字段：根据浏览器支持，颜色选择器会出现输入字段中
  10.<input type="range"> （H5） 用于应该包含一定范围内的值的输入字段：根据浏览器支持，输入字段能够显示为滑块控件
  <input type="range" name="points" min="0" max="10">
  11.<input type="month"> （H5） 允许用户选择月份和年份：根据浏览器支持，日期选择器会出现输入字段中
  12.<input type="week"> （H5） 允许用户选择周和年：根据浏览器支持，日期选择器会出现输入字段中
  13.<input type="time"> （H5） 允许用户选择时间（无时区）：根据浏览器支持，时间选择器会出现输入字段中
  14.<input type="datetime"> （H5） 允许用户选择日期和时间（有时区）：根据浏览器支持，日期选择器会出现输入字段中
  15.<input type="datetime-local"> （H5） 允许用户选择日期和时间（无时区）：根据浏览器支持，日期选择器会出现输入字段中
  16.<input type="email"> （H5） 用于应该包含电子邮件地址的输入字段：根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证
  17.<input type="search"> （H5） 用于搜索字段（搜索字段的表现类似常规文本字段）
  18.<input type="tel"> （H5） 用于应该包含电话号码的输入字段：目前只有 Safari 8 支持 tel 类型
  19.<input type="url"> （H5） 用于应该包含 URL 地址的输入字段：根据浏览器支持，在提交时能够自动验证 url 字段

• <input> 元素的其他属性：
  1.value 属性规定输入字段的初始值
  2.readonly 属性规定输入字段为只读（不能修改）：<input type="text" name="firstname" value="John" readonly>，属性不需要值
  3.disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的：<input type="text" name="firstname" value="John" disabled>
  4.size 属性规定输入字段的尺寸（以字符计）：<input type="text" name="firstname" value="John" size="40">
  5.maxlength 属性规定输入字段允许的最大长度：该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码
  6.autocomplete（H5）属性规定表单或输入字段是否应该自动完成：on/off
  7.autofocus（H5） 属性是布尔属性，规定当页面加载时 <input> 元素应该自动获得焦点，无属性值
  8.form （H5） 属性规定 <input> 元素所属的一个或多个表单
  9.formaction（H5） 属性规定当提交表单时处理该输入控件的文件的 URL
  10.formenctype （H5） 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单），覆盖 <form> 元素的 enctype 属性
  11.formmethod （H5） 属性定义用以向 action URL 发送表单数据（form-data）的** HTTP 方法，覆盖 <form> 元素的 method 属性
  12.formnovalidate （H5）** 属性规定在提交表单时不对 <input> 元素进行验证，覆盖 <form> 元素的 novalidate 属性，可用于 type="submit"
  13.formtarget （H5） 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应，覆盖 <form> 元素的 target 属性，可与 type="submit" 和 type="image" 使用
  14.height 和 width（H5） 属性规定 <input> 元素的高度和宽度，仅用于 <input type="image">
  15.list （H5） 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
  16.min 和 max （H5） 属性规定 <input> 元素的最小值和最大值，适用于如下输入类型：number、range、date、datetime、datetime-local、month、time 、week
  17.multiple （H5） 属性是布尔属性，规定允许用户在 <input> 元素中输入一个以上的值，无属性值
  18.pattern （H5） 属性规定用于检查 <input> 元素值的正则表达式，适用于以下输入类型：text、search、url、tel、email、password
  19.placeholder（H5） 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述），适用于以下输入类型：text、search、url、tel、email 、password
  20.required （H5） 属性是布尔属性，规定在提交表单之前必须填写输入字段，无属性值
  21.step （H5） 属性规定 <input> 元素的合法数字间隔，step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围

2.<select>元素：下拉列表，属性：

    <select name="city">
        <option value="beijing">Beijing</option>
        <option value="shanghai" selected="selected">Shanghai</option>
        <option value="hangzhou">Hangzhou</option>
    </select>

• autofocus（H5）：规定在页面加载后文本区域自动获得焦点
• disabled：规定禁用该下拉列表
• form（H5）：规定文本区域所属的一个或多个表单
• multiple：规定可选择多个选项
• name：名称
• required（H5）：规定文本区域是必填的
• size：规定下拉列表中可见选项的数目

3.<option>元素：定义元素待选择的选项，属性：

• disabled：规定此选项应在首次加载时被禁用
• label：定义当使用** <optgroup>** 时所使用的标注
  Paste_Image.png
• selected：规定选项（在首次显示在列表中时）表现为选中状态
• value：定义送往服务器的选项值

4.<textarea>元素：定义多行输入字段（文本域），属性：

• autofocus（H5）：规定在页面加载后文本区域自动获得焦点
• cols：规定文本区内的可见宽度
• disabled：规定禁用该文本区
• form（H5） ：规定文本区域所属的一个或多个表单
• maxlength（H5） ：规定文本区域的最大字符数
• name：定义文本区域名称
• placeholder（H5） ：规定描述文本区域预期值的简短提示
• readonly：规定文本区为只读
• required（H5） ：规定文本区域是必填的
• rows：规定文本区内的可见行数
• wrap（H5） ：规定当在表单中提交时，文本区域中的文本如何换行

5.<button>元素：定义可点击的按钮

6.<datalist>（H5）元素：规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表

7.<keygen>（H5）元素：规定用于表单的密钥对生成器字段

8.<output>（H5）元素：定义不同类型的输出，比如脚本的输出