html5定制表单_动力节点Java学院清算

HTML5中存在多种差异的输入框和按钮，通过配置input元素的type属性来实现，除此之外，HTML5中还支持选择列表、多行输入框等，这些元素都有本身的用途和属性，下面逐一先容。

单行文本输入框

type为text暗示input元素为一个单行文本框，是input元素的默认示意情势。单行文本输入框支持下面的属性配置。

设定元素巨细

maxlength属性设定用户可以或许输入的字符的最大数量；size属性设定了文本框可以或许表现的字符数量。

<form method="post" action=":8080/form"> <p><label for="name">Name: <input maxlenth="10" id="name" name="name"/></label></p> <p><label for="city">City: <input size="10" id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input size="10" maxlenth="10" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button> </form>

配置初始值和占位式提醒

value属性可觉得输入框指定一个默认值；placeholder属性可以配置一段提醒笔墨，汇报用户应该输入什么范例的数据。

<form method="post" action=":8080/form"> <p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p> <p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button> </form>

在chrome中的结果如下：

用button元素重置表单时，赏识器会规复文本框中的占位式提醒和默认值。

行使数据列表

list属性可以配置为一个datalist元素的id属性值，这样用户就可以在datalist元素指定的列表中举办选择。datalist元素是HTML5中新增的，用来提供一批值，辅佐用户输入必要的数据。
 

<form method="post" action=":8080/form"> <p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p> <p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input list="fruitlist" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button> </form> <datalist id="fruitlist"> <option value="Apples" label="Lovely Apples"/> <option value="Oranges">Refreshing Oranges</option> <option value="Cherries"/> </datalist>

datalist元素中的每一个option都代表一个用户可选择的值，在chrome中的结果如下：

天生只读或被禁用的文本框

readonly属性暗示文本框只读，disabled属性暗示不行编辑，在外面示意上有差别。

<form method="post" action=":8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="city">City: <input value="Boston" readonly id="city" name="city"/></label></p> <p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p> <button type="submit">Submit Vote</button> </form>

在chrome中结果如下：

配置了disabled属性的表单被配置为灰色，用户不能编辑个中的笔墨，且该表单的内容不会被提交随处事器；而配置了readonly属性的表单会阻止用户编辑文本框中的内容，但不影响外面，且内容会发给处事器。

暗码输入框

type属性值为password的input元素用于输入暗码。该属性的input元素支持以部属性：
1）maxlength：用户可以在暗码框中输入的字符的最大数量；
2）pattern：用于输入验证的正则表达式；
3）placeholder：关于所需数据范例的提醒；
4）readonly：配置暗码框为只读；
5）required：用户必需输入一个值，不然无法通过输入验证；
6）size：通过指定暗码框中可见的字符数量配置其宽度；
7）value：配置初始暗码值。
 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!