【温故知新】HTML学习笔记(下)
程序员文章站
2022-04-29 12:27:39
...
表单标签
表单的目的是收集用户信息,在网页中,也需要跟用户进行交互,收集用户资料。
在HTML中,一个完整的表单通常由表单控件(也成为表单元素)、提示信息和表单域三个部分构成。
1、input控件
其中主要属性如下表所示:
属性 | ||
---|---|---|
type |
text password radio checkbox button submit reset image file |
单行文本输入框 密码输入框 单选按钮 复选框 普通按钮 提交按钮 重置按钮 图形形式的提交按钮 文件域 |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
其中type属性是类型,是最基本的属性,其取值有多种,说明了属于哪种表单。
radio如果是一组,必须给他们命名相同的名字,就是name属性,这样就可以完成单选功能了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<caption><h3>青春无悔,恋爱赶紧</h3></caption>
<tr height="30">
<td>所在地区</td>
<td><input type="text" value="北京" /></td>
</tr>
<tr height="30">
<td>用户名</td>
<td><input type="text" value="xiuxianhai" /></td>
</tr>
<tr height="30">
<td>密码</td>
<td><input type="password" maxlength="6" /></td>
</tr>
<tr height="30">
<td>性别</td>
<td>
男<input type="radio" name="sex" />
女<input type="radio" name="sex" checked="checked" />
妖<input type="radio" name="sex" />
</td>
</tr>
<tr height="30">
<td>喜欢的类型</td>
<td>
妩媚<input type="checkbox" name="like" />
气质<input type="checkbox" name="like" />
骚俏<input type="checkbox" name="like" />
狂野<input type="checkbox" name="like" />
性感<input type="checkbox" name="like" />
</td>
</tr>
<tr height="30">
<td></td>
<td>
<input type="button" value="注册" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
<tr height="30">
<td>上传个人照片</td>
<td><input type="file" /></td>
</tr>
</table>
</body>
</html>
2、label标签
label标签为input元素定义标注(标签),用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入的焦点。
for属性规定了label与那个表单元素绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label> 用户名:<input type="text"> </label>
<hr />
<label for="pwd">
用户名:<input type="text" />
密码:<input type="password" id="pwd" />
</label>
</body>
</html>
3、textarea控件(文本域)
如果有需要输入大量的信息,需要用到textarea标签。
<tr height="30">
<td>留言</td>
<td>
<textarea name="" id="" cols="50" rows="10">不支持富文本
</textarea>
</td>
</tr>
4、下拉菜单
使用select控件定义下拉菜单。
<tr height="30">
<td>年龄</td>
<td>
<select name="" id="">
<option value="">请选择年份</option>
<option value="" selected="selected">1988</option>
<option value="">1989</option>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
</select>
<select name="" id="">
<option value="">请选择月份</option>
<option value="">1月份</option>
<option value="">2月份</option>
<option value="">3月份</option>
<option value="">4月份</option>
<option value="">5月份</option>
</select>
</td>
</tr>
5、表单域
form标签用于定义表单域,即创建一个表单,以实现用户信息的收集和传递。
form中主要有如下几个属性:
action:URL地址,传输给服务器处理的URL地址;
method:提交方式,用于设置表单的提交方式,有get和post(匿名提交);
name:表单名称;
具体资料查询可以参考如下网站: