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

file型的input元素用于上传文件，可以在提交表单时将文件上传到服务器。支持的属性包括：
1）accept：指定接受的MIME类型。MIME类型的定义，参考RFC 2046（）；
2）multiple：设置该属性可以一次上传多个文件；
3）required：用户必须输入一个值。

<form method="post" action=":8080/form" enctype="multipart/form-data"> <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><input type="file" name="filedata"/></p> <input type="submit" value="Submit Vote"/> </form>

注意表单编码类型为multipart/form-data的时候才能上传文件。在chrome中的效果如下：

选项列表

selet元素用来生成一个选项列表，比radiiobutton型的input元素更紧凑，更适合选项较多的情形。该元素支持的属性包括：
1）name：列表的名称；
2）disabled：禁用该下拉列表；
3）form：文本区域所属的一个或多个表单；
4）autofocus：在页面加载后文本区域自动获得焦点；
5）required：必填；
6）size：下拉列表中可见选项的数目；
7）multiple：可选择多个选项。
 

单选下拉列表

select元素默认即为一个单选下拉列表

<form method="post" action=":8080/form" enctype="multipart/form-data"> <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"> Favorite Fruit: <select id="fave" name="fave"> <option valu="apples" selected label="Apples">Apples</option> <option valu="oranges" label="Oranges">Oranges</option> <option valu="cherries" label="Cherries">Cherries</option> <option valu="pears" label="Pears">Pears</option> </select> </label></p> <input type="submit" value="Submit Vote"/> </form>

在chrome中的效果如下：

复选框

为列表设置size属性和multiple属性后，就成为一个复选框。

<form method="post" action=":8080/form" enctype="multipart/form-data"> <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"> Favorite Fruit: <select id="fave" name="fave" size="5" multiple> <option valu="apples" selected label="Apples">Apples</option> <option valu="oranges" label="Oranges">Oranges</option> <option valu="cherries" label="Cherries">Cherries</option> <option valu="pears" label="Pears">Pears</option> </select> </label></p> <input type="submit" value="Submit Vote"/> </form>

在点击选项时按住Ctrl键，就可以选择多个选项。在chrome中效果如下：

带结构的列表

optgroup元素可以用来在select元素的内容中建立一定的结构，该元素支持的属性包括：
1）label：用来为整组选项提供一个小标题；
2）disabled：灰化选择组内的任何选项。

（编辑：焦作站长网）

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