饥人谷_兔子君
饥人谷_兔子君

HTML表单用法

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

1.
元素： 元素定义 HTML 表单

1.属性：
  • 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.元素：

  • 元素不同的 type 属性：
    1. 定义供文本输入的单行输入字段：





    2. 定义密码字段：




    3. 定义提交表单数据至表单处理程序的按钮：

    4. 定义单选按钮：注意name一致


    male
    female

    5. 定义复选框：注意name一致


    reading
    watching movies
    playing piano
    painting

    6.    （H5）    用于应该包含数字值的输入字段：能够对数字做出限制

    8. （H5） 用于应该包含日期的输入字段：根据浏览器支持，日期选择器会出现输入字段中
    9. （H5） 用于应该包含颜色的输入字段：根据浏览器支持，颜色选择器会出现输入字段中
    10. （H5） 用于应该包含一定范围内的值的输入字段：根据浏览器支持，输入字段能够显示为滑块控件

    11. （H5） 允许用户选择月份和年份：根据浏览器支持，日期选择器会出现输入字段中
    12. （H5） 允许用户选择周和年：根据浏览器支持，日期选择器会出现输入字段中
    13. （H5） 允许用户选择时间（无时区）：根据浏览器支持，时间选择器会出现输入字段中
    14. （H5） 允许用户选择日期和时间（有时区）：根据浏览器支持，日期选择器会出现输入字段中
    15. （H5） 允许用户选择日期和时间（无时区）：根据浏览器支持，日期选择器会出现输入字段中
    16. （H5） 用于应该包含电子邮件地址的输入字段：根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证
    17. （H5） 用于搜索字段（搜索字段的表现类似常规文本字段）
    18. （H5） 用于应该包含电话号码的输入字段：目前只有 Safari 8 支持 tel 类型
    19. （H5） 用于应该包含 URL 地址的输入字段：根据浏览器支持，在提交时能够自动验证 url 字段

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

2.
  • autofocus（H5）：规定在页面加载后文本区域自动获得焦点
  • disabled：规定禁用该下拉列表
  • form（H5）：规定文本区域所属的一个或多个表单
  • multiple：规定可选择多个选项
  • name：名称
  • required（H5）：规定文本区域是必填的
  • size：规定下拉列表中可见选项的数目
3.
  • disabled：规定此选项应在首次加载时被禁用
  • label：定义当使用** ** 时所使用的标注
    HTML表单用法_第1张图片
    Paste_Image.png
  • selected：规定选项（在首次显示在列表中时）表现为选中状态
  • value：定义送往服务器的选项值
4.