Maison > Article > interface Web > HTML表单_html/css_WEB-ITnose
HTML表单_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:31:11903parcourir
HTML表单总结：供大家夯实基础
表单中一般需要嵌套表格。改变表格中的行就是表单，表单主要用于收集用户信息
表单的常用属性：
method：指出表单数据的提交方式
enctype：指出表单数据的编码方式
action：表单提交的URL
表单的元素
1:文本框：密码框
文本框：<input type="text"/>密码框：<input type = "password"/>
主要属性
value属性：由访问者只有输入任何文本框
maxlength属性：限制输入的字符数
readonly属性：设置文本控件只读
2:按钮
提交按钮：
重置按钮：
提交按钮：<input type ="submit"/>重置按钮：<input type = "reset"/>
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <form method ="post"> <h1 >     增加管理员 </h1> <table width ="600px"> <tr> <td width ="80px">姓名：</td> <td width = "180"> <input name ="UserName"/> </td> <td>10个字符以内的字母或下划线组合</td> </tr> <tr> <td>密码：</td> <td><input type="password"maxlength = 6 name="pwd"/></td> <td>6位数字</td> </tr> <tr> <td>重复密码：</td> <td><input type="password" maxlength = 6/></td> <td>2次密码必须相同</td> </tr> <tr> <td></td> <td> <input type="submit"/>   <input type="reset"> </td> <td></td> </tr> </table> </form> </body></html>
代码运行效果：
3：单选框并扩大选中区域：
<tr> <td>性别:</td> <td><input id = "radmal" type ="radio" name="gender" value = "mal"> <label for = radmal>男士</label></td> <td><input id = "radfe" type ="radio" name="gender" value = "mal" checked> <label for = radfe>女士</label></td> </tr>
代码效果：
4:checkbox:多选框
当input为checkbox时候，文本框为多选框
<tr> <td width = "150px"><input id = "chbbox" type ="checkbox" name="gender" value = "mal" > <label for = chbbox>学生管理员</label></td> <td><input id = "chbadm" type ="checkbox" name="gender" value = "mal" > <label for = chbadm>超级管理员</label></td> <td><input id = "chbtech" type ="checkbox" name="gender" value = "mal" > <label for = chbtech>管理员</label></td> </tr>
程序截图：
复选框：
复选框主要用于选项很多的时候，selected默认选项
<tr> <td>状态</td> <td> <select name = "status"> <option value = "1">在线</option> <option value = "0">离线</option> <option value = "-1" selected>忙碌</option> </select> </td> <td></td><tr>
程序截图：
多选列表：在多选框中增加multiple size 即可
<tr> <td>所属中心：</td> <td> <select name="center" multiple size = "5"> <option value = "zgc">中关村</option> <option value = "xjh">徐家汇</option> <option value = "dmh">大明湖</option> <option value = "ztf">总统府</option> <option value = "bsh">宝山寺</option> <option value = "hmt">画眉潭</option> <option value = "ryt">日月潭</option> </select> </td> <td></td></tr>
文件控件：
文本域：
备注：
<tr> <td>备注：</td> <td><textarea style = "width:200px;height:80px;resize:none"></textarea><td/> </tr>
程序效果图：
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：div中显示页面_html/css_WEB-ITnoseArticle suivant：div垂直水平居中实例代码_html/css_WEB-ITnose