首页 > 代码库 > HTML5表单

HTML5表单

新增的input输入类型

HTML5中增加了表单方面的诸多功能,包括增加input输入类型、表单元素、form属性和input属性等。

新的input输入类型

  • email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证email输入框的值,如果不是一个有效的E-mail地址,该输入框不允许提交该表单。

<input type="email" name="user_email">

  • url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时,如果所输入的内容是url地址格式的文本,则会提交数据到服务器,如果不是url地址格式的文本,则不允许提交。

<input type="url" name="user_url">

  • number类型的input元素提供用于输入数值的文本框,可以设定所接受的数字的限制,包括规定允许的最大值和最小值、合法的数字间隔或默认值等。

<input type="number" name="number1"min="1" max="20" step="4">

max:规定允许的最大值

min:规定允许的最小值

step:规定合法的数字间隔(例如step="4",合法数字是-4、0、4、8等)

value:规定默认值

  • range类型的input元素提供用于输入包含一定范围内数字值的文本框,在网页中显示为滑动条。

<input type="range" name="range1"min="1" max="30" step="4">

max:规定允许的最大值

min:规定允许的最小值

step:规定合法的数字间隔(例如step="4",合法数字是-4、0、4、8等)

value:规定默认值

  • Date Pickers日期检出器是网页中经常要用到的一种控件,HTML5提供了多个可用于选取日期和时间的输入类型,即6中日期检出器控件,分别用于选择以下日期格式:日期、月、星期、时间、日期+时间和日期+时间+时区。

输入类型

HTML代码

功能与说明

date

<input type="date">

选取日、月、年

month

<input type="month">

选取月、年

week

<input type="week">

选取周和年

time

<input type="time">

选取时间(小时和分钟)

datetime

<input type="datetime">

选取时间、日、月、年(UTC时间)

datetime-local

<input type="datetime-local">

选取时间、日、月、年(本地时间)


date、month、week、time类型支持使用一些属性来限定时间的大小范围或合法的时间间隔。

  • search类型的input元素提供用于输入搜索关键词的文本框。

<input type="search" name="search1">

  • tel类型的input元素提供专门用于输入电话号码的文本框。它并不限定只输入数字。

<input type="tel" name="tel1">

  • color类型的input元素提供专门用户设置颜色的文本框。通过单击文本框,可以快速打开拾色器面板,方便用户可视化选择一种颜色。

<input type="color" name="color1">

新增的input属性

input元素不但新增了输入类型,还新增了几个input属性,用于指定输入类型的行为和限制,这些属性分别是autocomplete、autofocus、form、formoverrides、placeholder、height和width、min和max、step、list、pattern以及required。

  • 新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容输入。autocomplete属性有3种值:on、off和空值。
  • 新增的autofocus属性可以使得在页面加载时,某表单控件自动获得焦点,它是一个布尔值。这些控件可以是文本框、复选框、单选按钮和普通按钮等所有<input>标签的类型。在同一页面中只能指定一个antofocus属性值。
  • 新增form属性可以把表单内的从属元素写在页面中的任意位置,然后只需要为这个元素指定form属性并设置属性值为该表单的id。

<form action="" method="get"id="form1">

如果一个form属性要引用两个或两个以上的表单,则需要使用空格将表单id分隔开。

<input type="text" name="address1"form="form1 form2 form3" />

  • 新增的form override表单重新属性,用于重写form元素的某些属性设定。表单重写属性并不适用于所有的input输入类型,而是只适用于submit和image输入类型。
    • formaction:用于重写表单的action属性(实现将表单提交到不同的页面中去);
    • formenctype:用于重写表单的enctype属性;
    • formmethod:用于重写表单的method属性;
    • formnovalidate:用于重写表单的novalidate属性;
    • formtarget:用于重写表单的target属性
  • 新增的height和width属性规定用于image类型的input标签的图像高度和宽度,只适用于image类型的input标签。
  • 新增的datalist元素可以实现数据列表的下拉效果,外观类似autocomplete,用户可从列表中选择,也可自行输入,而list属性用于指定输入框所绑定的datalist元素,其值是某个datalist的id。
  • 新增的min、max、step属性用于为包含数字或日期的input输入类型规定限制,适用于date、pickers、number和range标签。

max:规定输入框所允许的最大值

min:规定输入框所允许的最小值

step:规定输入框合法的数字间隔

  • 新增的multiple属性支持一次性选择多个文件,并且该属性同时支持新增的email类型。

 选择要上传的多个文件:

<input type="file" name="img"multiple="multiple" />

  • 新增pattern属性用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配,适用于text、search、url、telephone、email、password等input标签。pattern属性允许用户自定义一个正则表达式,但用户的输入必须符合正则表达式所指定的规则。
  • 新增placeholder属性用于为input类型的输入框提供一种提示(hint),这些提示可以描述输入框期待用户输入何种内容,在输入框为空时显式出现,而当输入框获得焦点时则会消失。
  • 新增required属性用于规定输入框填写的内容不能为空,否则不允许用户提交表单。该属性适用于以下input输入类型:text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file。

新增的form元素

HTMl5新增了几个form元素,分别是datalist、keygen和output。

  • 新增的datalist元素用于为输入框提供一个可选的列表,用户可以直接选择列表中的某一预设的项,从而免去输入的麻烦。
  • 新增的keygen元素是密钥对生成器(key-pair generator),能够使用户验证更为可靠。

<keygen name="security"/>

技术分享

  • 新增的output元素用于在浏览器中显示计算结果或脚本输出,包含完整的开始和结束标签。

新增的form属性

  • 新增的autocomplete属性用于规定form中所以元素都拥有自动完成功能
  • 新增的novalidate属性用于在提交表单时取消整个表单的验证,即关闭对表单内所以元素的有效性检查

HTML5表单