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

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="lastbuy">When did you last buy: <input type="date" id="lastbuy" name="lastbuy"/></label></p> <input type="submit" value="Submit Vote"/> </form>

在chrome中的效果如下：

目前日期和时间输入框在大部分浏览器中支持都不好，因此，最好还是使用主流JavaScript库提供的日历选择工具。

颜色输入框

type属性为color表示颜色选择器，颜色值以7个字符的格式表示：以#开头，接下来是三个两位十六进制数，分别代表红、绿、蓝三种原色的值，如#FF1234。

<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="color">Color: <input type="color" id="color" name="color"/></label></p> <input type="submit" value="Submit Vote"/> </form>

在chrome中的效果如下：

注意大多数浏览器都还没有为这种input元素提供特别的支持。

被隐藏的输入框

hidden型的input元素可以用来隐藏一个数据项，并在提交表单时将其发送给服务器（通常是为了利用到这个功能）。

<form method="post" action=":8080/form"> <input type="hidden" name="recordID" value="1234"/> <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"/> </form>

图像按钮

image型的input元素生成的按钮显示为一个图标，点击后提交表单。支持的属性包括：
1）alt：提供元素的说明文字，对需要借助残障辅助技术的用户很有用；
2）formaction：同button元素；
3）formenctype：同button元素；
4）formmethod：同button元素；
5）formtarget：同button元素；
6）formnovalidate：同button元素；
7）height：以像素为单位设置图像的高度；
8）src：指定要显示的图像的URL；
9）width：以像素为单位设置图像的宽度；
 

<form method="post" action=":8080/form"> <input type="hidden" name="recordID" value="1234"/> <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="image" src=http://www.jb51.net/html5/"accept.png" name="submit"/> </form>

点击图像按钮将提交表单，在提交的数据中会包含点击位置的坐标信息，因此可以让图像中的不同区域代表不同的操作，然后根据用户在图像上的点击位置做出相应的反应。

上传文件按钮

（编辑：焦作站长网）

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