HTML5权威指南——其他表单元素和输入验证

使用其他表单元素

1.生成选项列表

• select元素生成一个选项列表供用户选择
• option元素作为select元素的子元素用来生成各个选项（跟datalist中的option一样）
• select元素的name,disabled,form,autofocus和required属性与input中的同名属性作用一样
• 设置multiple属性可以一次选择多个
• 设置size属性可以设定用来显示给用户的选项数目（区别input属性中的size表示能显示的字符的数目）
• 使用optgroup元素对选项进行分类。

<p>
    <label for="fave" style="vertical-align:top" >Favorite Fruit:
        <select  name="fave"  id="fave">
            <optgroup label="Top Choices">
                <option value="apples" label="apples">Apples</option>
                <option value="oranges" label="oranges">oranges</option>
            </optgroup>
            <optgroup label="Others">
                <option value="cherries" label="cherries">cherries</option>
                <option value="pears" label="pears">pears</option>
            </optgroup>
        </select>   
    </label>
</p>

这是上面代码的执行效果

当设置了multiple属性时样式看起来就不是那么完美了，当然选择多个的时候要按住ctrl键

2.输入多行文字

• textarea元素生成多行文本框
• 用textarea元素的rows和cols属性可以用来设置其大小
• wrap属性控制着提交表单时文字插入换行符的方式，当值为hard时将会插入换行符
• 其他属性与input元素的同名属性的用法一样

<textarea cols="20" rows="5" wrap="hard" id="reason">Tell the reason</textarea>

3.表示计算结果

• output元素表示计算结果
  4.生成公开/私有密钥对

• keygen元素的用途是生成公开/私有密钥对

• 公开密钥是包括客户端证书和SSL在内的众多Web安全技术的基础。

• 在提交表单时该元素会生成一对新的密钥。

• 公钥被发给服务器，而私钥则由浏览器保留并存入用户的密钥仓库。

• keygen的用途是用来指定生成密钥对的算法。

使用输入验证

1.确保用户输入了一个值

• required属性的用途就是确保用户提供了一个值，否则无法提交表单。

• value属性提供的初始值可以满足required的验证需求。

• 强迫用户必须输入一个值要么不用value，要么就用placeholder提示输入。

• 浏览器不能够将所有验证错误都告诉用户，只能像剥洋葱一样一层一层提示下去
  2.确保输入值位于某个范围

• 用min和max属性来确保输入的数值和日期数据处于指定的范围内。

• 只有用户输入一个值时这个限制才起作用，若用户没有输入值，该表单也能正常提交
  3.确保输入值与指定模式匹配

• pattern属性可以用来确保输入值与一个正则表达式匹配。

• 同样的只有用户输入值时pattern属性才会起作用。

禁用输入验证

• form元素的novalidate属性，以及提交表单的button元素或者input元素的formnovalidate属性能够禁用输入验证。