HTML5表单新增功能

最新推荐文章于 2022-06-15 14:57:33 发布

fang0609

最新推荐文章于 2022-06-15 14:57:33 发布

阅读量597

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/fang0609/article/details/47145205

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、input表单的type类型

tel

说明：此类型要求输入一个电话号码,用来验证电话号码之类的文本框，需要与pattern属性结合使用，type的值可以是tel也可以是telephone，还可以是telephone number，三者的用法是一样的

格式：<input type=tel>

email

说明：此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值，否则无效果.

格式：<input type=email name=email>

url

说明：上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

格式：<input type=url>

number

说明：输入一个数字字符,若未输入则会抛出一个错误

格式：<input type="number" max=10 min=-10 step=1 value=5>

属性值：max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔（如果 step="2"，则合法的数是 -2，0,2,4 等）

value number 规定默认值,即在输入框中显示的数字

range

说明：特定值的范围的数值，以滑动条显示

格式：<input type="range" max=10 min=-10 step=1 value=5>

属性值与number类似。

search

说明：此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。

格式：<input type=search>

color

说明：此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到该控件的value值中

格式：<input type=color>

日期时间

说明：date：选取为年、月、日

month：选取月和年

week：选取周和年

time：选取时间（小时和分钟）

datetime：选取时间、日、月、年（UTC时间）

datetime-local：选取时间、日、月、年（本地时间）

注：有些浏览器不支持时间日期类型！！！

格式：<input type=date>

<input type=time>

<input type=month>

<input type=week>

<input type=datetime>

<input type=datetime-local>

2、新增表单属性

placeholder

说明：表单输入框中的提示内容，鼠标点击即消失

格式：<input id=placeholder placeholder="点击我可以清除">

required/pattern

说明：添加required属性，则输入框中的值不能为空，并会有一个提示，可以用于textarea以及hidden/image/submit类型中；

pattern为正则验证，可以完成各种复杂的验证。这两种类型在Opera中必须指定name值，否则无效果。

格式：<input id=placeholder name=require required>

autofocus

说明：自动聚焦属性,可在页面加载时聚焦到一个表单控件,即可使光标默认显示在此位置

格式：<input autofocus="true">

autocomplete

说明：为表单提供自动完成功能。如果该属性值为"on"可很好地自动完成。一般来说，此属性必须启动浏览器的自动完成功能。

格式：<input autocomplete="on/off">

novalidate

说明：novalidate 属性规定在提交表单时不验证 form 或 input 域。

格式：<form action="#" method="get" novalidate="true">

multiple

说明：规定输入域中可选择多个.multiple 属性适用于 <input> 标签中的“email 和 file”。

格式：<input type="file" name="img" multiple="multiple" >

3、源代码

<span style="font-size:18px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form id="myform" action = "#" method = "post" align = "center">
  <p>姓名:<input type = "text" name = "name" required placeholder="请输入真实姓名" autofocus></p>
  <p>电话:<input type = "tel" pattern="\d{11}"></p>
  <p>邮件:<input type = "email"></p>
  <p>网址:<input type = "url"></p>
  <p>数字:<input type="number" max="10" min="-10" step="2" value="2"></p>
  <p>滑块:<input type="range" max=10 min=-10 step=2 value=5></p>
  <p>搜索:<input type=search></p>
  <p>颜色:<input type=color></p>
  <p>date:<input type=date></p>
  <p>time:<input type=time></p>
  <p>month:<input type=month></p>
  <p>week:<input type=week></p>
  <p>datetime:<input type=datetime></p>
  <p>datetime-local:<input type=datetime-local/></p>
  <p>生日:
  <input name = "textYear" type = "number" max="2015" min="1960" step="1" value="1990" style="width:50px"/>年
  <input name = "textMonth" type = "number" max="12" min="1" step="1" value="8" style="width:35px"/>月
  <input name = "textDay" type = "number" max="31" min="1" step="6" value="1" style="width:35px"/>日</p>
  <p>    
  <input name = "submit" type = "submit" class = "button" style = "whidth:300px; height:40px " value = "注册" ></p>
  </form> 
</body>
</html></span>

4、外部引用

在HTML5中可以利用form的id值，在form外部引用，打破了以往的中能form标签中的局限

例如：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><form action = "" method = "" id = "myform"></form>
<input form = "myform" ></span>

fang0609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5表单新增功能

1、input表单的type类型tel说明：此类型要求输入一个电话号码,用来验证电话号码之类的文本框，需要与pattern属性结合使用，type的值可以是tel也可以是telephone，还可以是telephone number，三者的用法是一样的格式：email说明：此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Op
复制链接

扫一扫