一、表单标签
1、为什么需要表单
使用表单目的时为了。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
2、表单的组成
在HTML中，一个完整的表单通常由、
和
3个部分构成。
表单的组成.png
3、表单域
是一个
。
在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
表单常用属性.png
4、表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
4.1、<input>表单元素
在英文单词中，input是输入的意思，而在表单元素中。
在<input>标签中，包含一个属性，根据不同的
属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选控件、按钮等）。
<input type="属性值" />
- <input />标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
属性的属性值及描述如下：
type属性的属性值.png
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
input标签属性.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="" name="">
<!--
Q:页面中的表单元素很多,如何区别不同的表单元素?
A:name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单.
页面中的表单很多,name的主要作用就是用于区别不同的表单
-->
用户名:<input type="text" value="请输入用户名" name="username" />
<br />
<!--
radio(或者checkbox)如果是一组,我们必须给它们命名相同的名字.
checked属性:表示默认选中状态.用于单选按钮和复选按钮.
-->
性别:<input type="radio" name="gender" value="man" checked="checked"/> 男
<input type="radio" name="gender" value="woman" /> 女
<br />
密码:<input type="password" name="pwd" id="password" />
<br />
爱好:
<input type="checkbox" name="hobby" id="eat" value="吃饭" />吃饭
<input type="checkbox" name="hobby" id="sleep" value="睡觉" />睡觉
<input type="checkbox" name="hobby" id="game" value="打游戏" />打游戏
<br />
<input type="button" value="发生验证码" />
<br />
<input type="submit" value="免费注册" />
<br />
<input type="reset" value="重新填写" />
<br />
上传头像:<input type="file" />
</form>
</body>
</html>
input例子.png
4.2、<label>标签
标签为input元素定义标注（
）。
标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验；
语法：
<label for="man">男</label>
<input type="radio" name="gender" id="man">
<label for="woman">女</label>
<input type="radio" name="gender" id="woman">
核心：<label>标签的应当与相关元素的
。
4.3、<select>表单元素
在页面中，如果由多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义
。
语法：
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
</select>
- <select>中至少包含一对<option>。
- 在<option>中定义select="selected"时，当前项即为默认选中项。
4.4、<textarea>表单元素
语法:
<textarea name="" id="" cols="30" rows="10">
文本内容
</textarea>
- 通过<textarea>标签可以轻松地创建多行文本输入框。
- cols = "每行中的字符数"，rows = "显示的行数"，
。
5、查阅文档
经常查阅文档时一个非常好的学习习惯：
网友评论