[HTML5]其他表单元素及输入验证

最近在牛客网上刷题，我感觉非常好，可以对学习的内容进行测试、复盘，面试也能用到。

目录

1、使用其他表单元素

1.1、生成选项列表

在select元素中构建结构

1.2、输入多行文字

1.3表示计算结果

1.4、生成公开/私有密钥对

2、使用输入验证

2.1、确保用户提供了一个值

2.2、确保输入值位于某个范围内

2.3确保输入值与指定模式匹配

3、禁用输入验证

---

 

1、使用其他表单元素

select、optgroup、textarea、output、keygen

1.1、生成选项列表

select元素可以用来生成一个选项列表供用户选择。

• select元素的name、disabled、form、autofocus、requied属性与input元素的同名属性类似。 
• size属性：设定要显示给用户的选项数目

      multiple属性：用户一次选择多个选项

      提供给用户的选项由option元素
​

<select id="fave" name="fave">​​  

<option value="apples" selected label="Apples">Apples</option>​​  

<option value="oranges" label="Oranges">Oranges</option>​​  

<option value="cherries" label="Cherries">Cherries</option>​​  

<option value="pears" label="Pears">Pears</option>​​

</select>​​        

用了四个option元素定义了提供给用户的选项，第一个option元素设置了selected属性，自动选中。

 <select id="fave" name="fave"size="5" multiple>​​  

⚠️要选多项，在点击选项时应按住ctrl键

在select元素中构建结构

optgroup元素：在select元素的内容中建立一定的结构。

用途：对option元素进行编组。

 label属性：用来为整组选项提供一个小标题。

disabled属性：用来阻止选择组内的任何选项。

<select id="fave" name="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>

1.2、输入多行文字

textarea元素：生成多行文本框，用户可以在里面输入多行文字。

rows（高）和cols（宽）属性：设置大小。

wrap属性：hard（会插入换行符，结果是所提交的文字中每一行的字符数都不超过cols属性）和soft，用来控制在用户输入的文字中插入换行符的方式。

其他属性与input元素的同名属性用法相同。

<textarea cols="20" rows="5" wrap="hard" id="story"​​ name="story">
Tell us why this is your favorite fruit</textarea>​​ 
<!--宽20列，高5行。-->

1.3表示计算结果

output元素：表示计算的结果。

<input type="number" placeholder="Quantity" id="quant" name="quant"/> x ​​​​​
<input type="number" placeholder="Price" id="price" name="price"/> =​​
<output for="quant name" name="res"/>​​  

使用 两个number型input元素。用户在输入数值后，两个input元素的值相乘结果会显示值output元素中。

1.4、生成公开/私有密钥对

keygen元素：生成公开/私有密钥对。

公开密钥是包括客户端证书和SSL在内的众多web安全技术的基础。提交表单时，该元素会生成一对新的密钥。

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

• name、disabled 、form、autofocus这四个属性的用法与input元素的同名属性相同。
• keygen属性的用途：指定用来生成密钥对的算法，支持的值：RSA

     challenge属性：用来指定一条与公钥一起发送给服务器的密钥管理口令（challenge phrase。

---

2、使用输入验证

输入验证是通过表单元素的一些控制的。

2.1、确保用户提供了一个值

required属性：最简单的输入验证是检查用户是否提供一个值。

<input type="checkbox" required id="accept" name="accept"/>

• 对于text和password型input元素，用户必须在文本框中输入文字。

       对于checkbox型input元素，用户必须勾选对应的复选框。

⚠️用value属性提供的初始值可以满足required验证属性的要求。

     用户点击按钮提交表单时，第一个设置了required属性却没有获得输入值的元素会被突出显示，以引起用户的注意；然后用户可以补上遗漏的数据再提交表单。如果还有其他数据遗漏未填，那么下一个被漏掉的元素又会被突出显示。

2.2、确保输入值位于某个范围内

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

<input type="number" min="0" max="100"​​  value="1" id="price" name="price"/>​​

• 只设置max属性表示输入值有一个上限，只设置min属性表示输入值有一个下限。要是两个属性同时使用，设定了一个输入范围。
• 只有用户输入一个值后min和max属性控制的输入验证才会起作用。

2.3确保输入值与指定模式匹配

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

<input type="text" id="name" name="name"pattern="^.* .*$"/>

确保用户输入以空格分隔的姓氏和名字。

• 只有用户输入一个值后pattern属性控制的输入检验才会起作用。

---

3、禁用输入验证

设置form元素的novalidate属性；设置原来提交表单的button或input元素的formnovalidate属性。

<input type="submit" value="Save" formnovalidate/>​​