【温故知新】HTML学习笔记(下)

表单标签

表单的目的是收集用户信息,在网页中,也需要跟用户进行交互,收集用户资料。

在HTML中,一个完整的表单通常由表单控件(也成为表单元素)、提示信息和表单域三个部分构成。

1、input控件

其中主要属性如下表所示:

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:表单名称;

具体资料查询可以参考如下网站:

https://www.w3school.com.cn/

https://developer.mozilla.org/zh-CN/

发布了2002 篇原创文章 · 获赞 3892 · 访问量 1021万+

猜你喜欢

转载自blog.csdn.net/zhongguomao/article/details/104352526