html5定制表单_动力节点Java学院整理

<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><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=":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>

在chrome中的效果如下：
 

时间和日期输入框

HTML5中新增了一些输入日期和时间的类型，包括：
1）datetime：获取世界时日期和时间，包括时区信息；
2）datetime-local：获取本地日期和时间，不包含时区信息；
3）date：获取本地日期，不含时间和时区信息；
4）month：获取年月信息，不含日、时间和时区信息；
5）time：获取时间；
6）week：获取当前星期。
 

日期和时间的input元素支持的额外属性包括：

（编辑：好传媒网）

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