您的位置：首页 > Web前端 > HTML

HTML表单

2015-12-30 14:31 696 查看

HTML表单总结：供大家夯实基础

<form></form>

表单中一般需要嵌套表格。改变表格中的行就是表单，表单主要用于收集用户信息

表单的常用属性：

method：指出表单数据的提交方式

enctype：指出表单数据的编码方式

action：表单提交的URL

表单的<input>元素

1:文本框：密码框

文本框：<input type="text"/>
密码框：<input type = "password"/>

主要属性

value属性：由访问者只有输入任何文本框

maxlength属性：限制输入的字符数

readonly属性：设置文本控件只读

2:按钮

提交按钮：<input type ="submit"/> 重置按钮：<input type = "reset"/>

提交按钮：<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：单选框并扩大选中区域：

<td><input type= "radio"/> </td>

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

程序截图：

复选框：<select>

</select>

复选框主要用于选项很多的时候，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 > <input type = "file"/>选择文件<td/>

<tr>

文本域：

备注：<textarea></textarea>

<tr>
<td>备注：</td>
<td><textarea style = "width:200px;height:80px;resize:none"></textarea><td/>

</tr>

程序效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航