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属性用于在提交表单时取消整个表单的验证,即关闭对表单内所以元素的有效性检查
时间: 2025-01-16 23:44:19

HTML5表单的相关文章

HTML5表单的创建及与PHP的交互

Html5表单 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title> </head> <body> <form>     用户名:     <input type="text">     <br/>

菜鸟零基础学习HTML5 &nbsp; ----- 1.5、HTML5表单和PHP环境搭建

一.HTML5表单 1.表单用于获取不同类型的用户输入 2.常用表单标签 例: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>表单</title> </head> <body>     <form>         用户名:         <i

服务器变量 超级全局数组$_SERVER (附加超简单表单与html5表单属性)

001.html <html> <head><title>user log</title> <meta http-equiv="content-type" content="text/html;charset:utf-8"> </head> <body> <form method="post" action="001.php"> 用

实现跨浏览器html5表单验证

div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: right; clear: right; } .clearfix:after{ content: ""; display:block; clear: both; } .figcaption{ clear: both; color: #999; padding-top: 10px; text

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ? 待续.... 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

HTML5表单新增属性

------------------siwuxie095 HTML5 表单新增元素与属性 1.form 属性 在 HTML4 中,表单内的从属元素必须书写在表单内部,而 在 HTML5 中,可以把它们书写在页面上任何地方,然后为 该元素指定一个 form 属性,属性值为该表单的 id,这样就 可以声明该元素从属于指定表单了 2.formaction 属性 在 HTML4 中,一个表单内的所有元素只能通过表单的 action 属性被统一提交到另一个页面,而在 HTML5 中,可以为所有 的提交按钮

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

加速HTML5应用的九大方法-------1.使用HTML5表单和输入框

加速HTML5应用的九大方法-------1.使用HTML5表单和输入框HTML5 引入很多全新的表单属性和输入框类型,虽然并不是所有的浏览器都支持,但它们的确都很有用:autofocus 使得页面加载完毕后自动为某个输入框设置输入焦点placeholder 允许你为输入框设置默认文本,并在获取焦点时自动清除required 属性要求必须填写值后才能提交表单pattern 可以通过正则表达式指定输入框允许输入的内容因为这些功能都是内置的,无需使用 JavaScript 方法来实现,第一是节省开发

HTML5表单提交和PHP环境搭建

HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

CSS3+HTML5表单

原文:CSS3+HTML5表单 源代码下载地址:http://www.zuidaima.com/share/1550463654644736.htm