HTML5表单增强

HTML5新增之增强的表单

form

• 用来定义一个表单
• 子元素：input/button/select…
• 属性：
  • action表单发送到服务器的地址
  • method表单发送到服务器的方式（post/get）
  • get：数据附在网址之后交给服务器
  • post：数据不会附在网址后，会将数据打包发给服务器，等候服务器读取数据并进行处理

form子元素 input

属性：

• name：输入内容的识别名称，也是传递参数时的参数名称
• value：默认值
• maxlength：最长值
• readonly：readonly=“readonly”
• disabled：disabled；disabled=“”；disabled=“disabled”设为不可用
• required：必需填写的字段
• placeholde：设置默认的字段，当文本框获得焦点时清空（对text、url、tel、email、password、search有效）
• autofoucs：自动获得焦点
• accesskey：指定快捷键后，alt键加快捷键便会自动获得焦点
• tabindex：指定按tab时，项目的移动顺序，值为1、2、3
• autocomplete：on\off是否开启浏览器的自动记忆

---

- type：

---

• text/password/submit/reset/button/img
• hidden（提交到服务器不显示，隐藏字段）
• email(会对输入进行验证)/url(会对输入进行验证)/tel(不会对输入进行验证，但会自动切换到数字输入)
• number（配合input的max、min、step、value规定允许输入的值）/range（与number类似，但以进度条的形式显示）
• /datetime/datime local/date/month/week/time
• color/search
• file：可以选取文件的输入框（通过accept属性规定选取文件的类型，如图片或视频，multiple设置多选）

<input type="file" accept="image" multiple>

• checkbox：选择框

<input type="checkbox" name="CB" value="选择1" checked>选择1
<input type="checkbox" name="CB" value="选择2">选择2
<input type="checkbox" name="CB" value="选择3">选择3

• radio：单选框，注意同一单选项需设置相同的name（否则无效）

<input type="radio" name="CB" value="选择1" checked>选择1
<input type="radio" name="CB" value="选择2">选择2
<input type="radio" name="CB" value="选择3">选择3

select：下拉菜单

（用于表单或其他块元素和内联元素）

其中value指的是发送的服务器的名字，size指在下拉框中显示的数量，除了multiple，disabled和autofocus同样适用。

<select name="XL" id="" size="2" multiple>
           <optgroup>
               <option value="H1">下拉1</option>
               <option value="H2">下拉2</option>
               <option value="H3">下拉3</option>
               <option value="H4">下拉4</option>
               <option value="H5">下拉5</option>
           </optgroup>
</select>

datalist：下拉列表

与select不同的是这个输入第一个字母后会有提示， 元素的内容不会直接显示在网页，只会在用户输入时作为候选项，且必须与input配合使用。

  <input type="text" name="" id="" list="mydatalist">
        <datalist id="mydatalist">
            <option value="H1">下拉1</option>
            <option value="H2">下拉2</option>
            <option value="H3">下拉3</option>
            <option value="H4">下拉4</option>
            <option value="H5">下拉5</option>
        </datalist>

将表单外的表单内的内容关联

navalidate数据提交时不验证
enctype发送到服务器之前如何对表单的数据编码（method发送方式为get时不必设置，只有post时才有效）
accept-charset规定服务器处理表单数据所接受的字符集

<form action="" method="" id="yz"> </form>
       输入用户名：<input type="text" form="kc">

label

为input元素定义标注，建立与之关联的标签

法1：通过for属性让元素之间相关联

<input type="checkbox" name="CB" value="选择1" id="A" checked><label for="A">选择1</label>
<input type="checkbox" name="CB" value="选择2" id="B"><label for="B">选择1</label>
<input type="checkbox" name="CB" value="选择3" id="C"><label for="C">选择1</label>

法2：直接写在label标签中
注意，在label标签中不能包含for属性，否则还不成立

<label for=""><input type="radio" name="CB" value="选择1" checked>不能绑定的</label>
<label><input type="radio" name="CB" value="选择2">选择2</label>
<label><input type="radio" name="CB" value="选择3">选择3</label><br><br>

此外，label元素可设定比标签内容更优先的选项，利用optgroup的label属性，定义分组的名称

 <select name="XL" id="" multiple>
        <optgroup label="下拉组1">
            <option value="H1">下拉1</option>
            <option value="H2">下拉2</option>
            <option value="H3">下拉3</option>
            <option value="H4">下拉4</option>
            <option value="H5">下拉5</option>
        </optgroup>
        <optgroup label="下拉组2">
            <option value="H1">下拉1</option>
            <option value="H2">下拉2</option>
            <option value="H3">下拉3</option>
            <option value="H4">下拉4</option>
            <option value="H5">下拉5</option>
        </optgroup>
 </select><br><br>

textarea

多行输入文本框

适用于表单，块元素、内联元素等
rows：行数
cols：宽
可能有的浏览器精度不够
placeholder：默认提示

输入建议：<textarea name="" id="" placeholder="输入建议" cols="20" rows="4"></textarea>

button

与input建立的按钮相同

它是双标签，内部可配置图片和文字，进行更复杂的样式设计
表单、块、内联
submit、reset

<button type="submit"><img src="image.png" alt="" width="15px" height="15px">OK</button>

output

输出元素

控制数据输出，输出结果为只读，由代码控制
name供表单提交时使用
form定义所属的一个或者多个表单
for输出域相关的一个或多个元素

 <form action="" oninput="">
        <input type="number" id="num1">+
        <input type="number" name="" id="num2">=
        <output name="num" for="num1 num2"></output>
 </form>

progress

建立一个进度条
max：进度最大值
value：当前默认值（需两个配合使用）
form：进度条所属表单

注意

值必须为数值，80% 不可以

 <progress value="20" max="100"></progress>

meter

建立度量条，表述度量衡的评定（增加了评定）
value：
max：（默认1）
min：（默认0）
low：
high：
form：
optimum：最佳值

<meter max="100" value="60" high="80" low="30" optimum="60"></meter>

fieldset/legend

fieldset将表单内的相关元素分组，会有一个半包的框
没有必须或者唯一的属性，form\disabled等适用
legend是为fieldset定义标题

        <fieldset>
            <legend>环绕的边框</legend>
            <input type="number" id="num1">+
            <input type="number" name="" id="num2">=
            <output name="num" for="num1 num2"></output><br><br>
            <progress value="20" max="100"></progress><br><br>
            <meter max="100" value="60" high="80" low="30" optimum="60"></meter><br><br>
        </fieldset>

keygen

建立密钥生成器
发送表单时，私钥存储在本地，公钥发送到服务器，用于用户验证
name\form\autofocus\disabled
challege：提交时询问
keytype：密钥类型，“rsa”

pattern

设定输入类型的正则表达式，input的属性

pattern用于输入正则表达式：<input type="text" form="kc" pattern=" ">

details/summary【非表单】

details：文档或者文档某部分的细节
summary：第一文档标题，点击后会显示details内容
属性：open（浏览器默认是打开的）

<details>
        <summary>details标题</summary>
        details内容details内容details内容details内容
</details>