HTML5表单新增功能

以你之姓@ 2022-08-03 03:12 242阅读 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>

<input id=placeholder name=require1 required="required">

<input name=require2 pattern="^\[1-9\]\\d\{5\}$">

**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标签中的局限

例如：