| <form method="post" action="http://titan: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><fieldset> <legend>Vote for your favorite fruit</legend> <label for="apples"> <input type="radio" checked value="Apples" id="apples" name="fave"/> Apples </label> <label for="oranges"> <input type="radio" value="Oranges" id="oranges" name="fave"/> Oranges </label> <label for="cherries"> <input type="radio" value="Cherries" id="cherries" name="fave"/> Cherries </label> </fieldset></p> <input type="submit" value="Submit Vote"/> </form> |
在chrome中的效果如下：
限定格式输入框
type属性值email、tel和url分别对应电子邮箱地址、电话号码和URL，支持的属性包括：
1）list：指定为文本框提供建议值的datalist元素，其值为datalist元素的id值；
2）maxlength：输入字符的最大数目；
3）pattern：指定用于验证输入的正则表达式；
4）placeholder：指定关于所需数据类型的提示；
5）readonly：表示文本框只读；
6）required：表明用户必须输入一个值；
7）size：可见的字符数目；
8）value：指定元素的初始值。
email还支持multiple属性，表示可以接受多个电子邮箱地址。
| <form method="post" action="http://titan: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="email">Email: <input type="email" placeholder="user@domain.com" id="email" name="email"/></label></p> <p><label for="tel">Tel: <input type="tel" placeholder="(xxx)-xxx-xxxx" id="tel" name="tel"/></label></p> <p><label for="url">Your homepage: <input type="url" id="url" name="url"/></label></p> <input type="submit" value="Submit Vote"/> </form> |
