HTML5 WEB表单

type属性：

html5属性有23种可能的值，
默认为type=“text”

required属性：

用于标记一个表单字段是必需的,如果为空则无法提交并提示错误。

代码：

<form action="">
    <label> Email: <input type="email" required /></label>
    <input type="submit"  />
</form>

最小值和最大值：min和nax属性

<label >Time：<input type="time" min="17:00" max="22:00" name="dinner"></label>

step属性：设定步长

 <input type="number" min="2" max="100" step="5" name="cost" id="cost">

placeholder属性：

在输入框没内容时进行填充，有内容时消失。

<label> Email: <input type="email"  placeholder="xxx@qq.com" required /></label>

pattern属性：正则表达式

readonly属性：只读，适合文本，密码，电子邮件，URL，日期/时间

  <label> Email: <input type="email"  placeholder="xxx@qq.com" required readonly /></label>

disabled属性：禁用元素

readonly与disabled区别,readonly可随表单提交,disabled不能随表单提交.

 <label> Email: <input type="email"  placeholder="xxx@qq.com" required disabled /></label>

maxlength属性: 限定输入字符长度.

<label> Email: <input type="email"  placeholder="xxx@qq.com" required maxlength="10" /></label>

size属性:

form属性:

把表单控件与任意一个form表单关联起来,随另一个表单一起提交.

autocomplete属性:是否让浏览器记住你之前输入的值,并且这次帮助你输入.

有 on, off,default 三个值.

<p>Login:</p>
    <p>
        <label for="user">Username:</label>
        <input type="text" name="user" id="user" autocomplete="on">
    </p>
    <p>
        <label for="pwd">Password:</label>
        <input type="password" name="pwd" id="pwd" autocomplete="off">
    </p>
    <input type="submit"  />

autofocus属性：使表单控件在页面载入时获得焦点，只能有一个。

multiple属性: 添加多个文件

accept属性:选择接受的文件类型

type

文本框:<input type="text">

密码框: <input type="password" >

复选框:<input type="checkbox" >

单选按钮:`

<ul><li>
    <label >red:
        <input type="radio" name="favoritecolor" value="red"></label>
</li></ul><ul><li>
    <label >green:
        <input type="radio" name="favoritecolor" value="green"></label>
</li></ul><ul><li>
    <label >blue:
        <input type="radio" name="favoritecolor" value="blue"></label>
</li></ul>

提交按钮: <input type="submit">

如果包含了name属性,名值对也会一起提交.

重置按钮:<input type="reset">

选择文件按钮:<input type="file">

隐藏<input type="hidden">

图片<input type="image">

给提交按钮加图片,不是用来上传图片

按钮<input type="button">

和更易于设计样式, 但是type button可以与input样式一样

H5新增的Type值

电子邮件:<input type="email">

URL:<input type="url">

电话:<input type="tel">

数字:<input type="number">

滑动条:<input type="range">

搜索框:<input type="search">

拾色器:<input type="color">

日期选择器:<input type="date">

UTC日期和时间:<input type="datetime">

本地日期和时间:`

月份:<input type="month">

时间:<input type="time">

周历:<input type="week">

表单验证属性:validity

新的表单:<datalist>

通过input中的list属性进行绑定.

 <input type="text"  list="animalnames">
    <datalist id="animalnames">
    <option value="quack">duck</option>
    <option value="banana slug" label="sssss" />
    <option value="sheep" label="bah" />

     </datalist>

优雅降级,添加<select>标签,如果无法显示datalist则显示select

output元素:表现得和span一样,用于输出内容.

meter元素

颜色 绿->黄->红

<meter value="70" min="0" max="100"  low="73" high="87">ddd</meter>

progress元素:

  <progress value="100" min="0" max="1000"  >ddd</progress>

keygen元素:

其他表单元素

label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form> ,<fieldset>和<legend>,<select><option><optgroup><textarea><button>