web(HTML5新的 input类型和表单属性)_web中date是表单输入类型吗-CSDN博客

本文详细介绍了HTML5中新增的表单元素和属性，包括email、url、number等input类型，以及form、list、pattern等表单属性，通过实例展示了如何提高表单输入的有效性和用户体验。

web(2019.11.16-11.17)

一、h5新的input类型

1.input类型–email

input 类型	描述
email	邮箱；在提交表单时，能自动验证email的值（输入需要包括@符号）

实例：

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

输入域中的输入未出现@符号，提交时会出现如下图提示：
在这里插入图片描述
2.input类型–url

input类型	描述
url	网址；在提交表单时会自动验证url的值（需输入的网站的全名，即包括 http://）

实例：

网站：<input type="url" name="url"/>

输入域中的输入不完整，提交时会出现如下图提示：
在这里插入图片描述
3.input类型–number、range、search、color、date、month、week、time

input 类型	描述
number	数字；可以通过一下min(允许输入的最小值),max(允许输入的最大值)，step(规定合法的数字间隔)，value(规定的默认值)等属性对输入的数字进行限定：
range	滑动条
search	搜索框，与result="n"语句使用，可以在搜索框中加入放大镜
color	颜色
date	日期，可以选择年月日
month	月份，可以选择年份和月份
week	周，可以选择年份和某年的第几周
time	时间，可以选择时，分
	注：以上类型实例的实现方式与email 、url 相同，均为：input type=“input类型”

二、h5新的表单属性

1.form属性

描述：规定输入域属于哪个表单，使用时需要引用所属表单的id
实例：

<form action="" id="form1"></form>
邮箱：<input type="email" form="form1"/><br/>
密码：<input type="password" form="form1" /><br/>
<input type="submit" name="form1"/>

2.list属性

描述：规定了list输入域的datalist,datalist是list的选项列表
实例：

<input type="text" list="province"  form="form1"/>
<datalist id="province">
    <option  value="四川"></option>
    <option  value="陕西"></option>
    <option  value="山东"></option>
</datalist>

3.pattern属性

描述：pattern是正则表达式，可以限定输入域输入模式，可用title用来作为输入提示
语法：pattern="[此处为输入范围]{此处为输入个数}"；
实例：

<form action="" >
    国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"  title="三个字母的国家代码" /><br/>                /*要求输入三个字母的国家代码，字母范围为A-z*/
    <input type="submit" />
</form>

输入不符合pattern模式时，出现如下图所示提示：
在这里插入图片描述
4.placeholder属性

描述：输入域为空时显示placeholder的内容，当输入域获得焦点时内容消失
实例：

姓名：<input type="text" placeholder="请输入姓名"/>

当输入域为空时，如图：
在这里插入图片描述
5.required属性

描述：规定在提交时必须填写该输入域；
实例：

<form action="">
    姓名：<input type="text" placeholder="请输入姓名" required/><br/>
    <input type="submit"/>
</form>

未填写该输入域提交时，出现如下图提示：
在这里插入图片描述
6.autocomplete属性

描述：规定在输入域输入时，浏览器自动显示填写的选项，这些选项是在此次输入之前输入并提交过的信息，input标签和form标签均适用；
实例：

<form action="">
    姓名：<input type="text" name="name" autocomplete="on"/><br/>
    邮箱：<input type="email" name="email" autocomplete="on"/><br/>
    <input type="submit"/>
</form>

7.autofocus属性

描述：在页面加载时，自动获得焦点
实例：

<form action="">
    姓名：<input type="text" name="name" /><br/>
    邮箱：<input type="email" name="email" autofocus/><br/>
    <input type="submit"/>
</form>