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

type属性配置为submit、reset和button则会天生相同button元素那样的按钮。
1）submit：天生提交表单的按钮，支持属性：formaction、formenctype、formmethod、formtarget和formnovalidate，这些属性和button元素的同名属性用法沟通，参考这里；
2）reset：天生重设表单的按钮；
3）button：天平生凡按钮，无任何操纵。
3中按钮的声名笔墨都通过value属性指定。
 

<form method="post" action=":8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <input type="submit" value="Submit Vote"/> <input type="reset" value="Reset"/> <input type="button" value="My Button"/> </form>

在chrome中的结果如下：

用input元素天生按钮与用button元素的差异之处在于后者可以用来表现含标志的笔墨。但因为各个赏识器对input元素的处理赏罚方法较量同等，且有些较老的赏识器（譬喻IE6）不能正确处理赏罚button元素，以是许多网站都更倾向于用input元素。

带限定的输入框

数字输入框

type属性为number的input元素只接管数值。支持的属性包罗：
1）list：指定为文本框提供提议值的datalist元素，其值为datalist元素的id值；
2）min：配置最小值；
3）max：配置最大值；
4）readonly：只读；
5）required：表白用户必需输入一个值；
6）step：上下调理数值的步长；
7）value：指定元素的初始值。

<form method="post" action=":8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="price">$ per unit in your area: <input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/></label></p> <input type="submit" value="Submit Vote"/> </form>

在chrome中的结果如下：

范畴选择器

行使type属性为range的input元素，用户只能用它从事先划定的范畴内选择一个数值，该范例的input元素支持的属性与number沟通。

<form method="post" action=":8080/form"> <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p> <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p> <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p> <p><label for="price">$ per unit in your area: 1<input type="range" step="1" min="0" max="100" value="1" id="price" name="price"/>100</label></p> <input type="submit" value="Submit Vote"/> </form>

在chrome中的结果如下：
 

复选框

（编辑：湖南网）

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