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><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>

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

上传文件按钮

（编辑：晋中站长网）

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