老K博客1、表单标签
html 中一个完整的表单通常由 表单元素、提示信息、表单域（即多个表单的父容器）三部分组成。
（1）、imput 输入标签
- <input/> 为单标签（自闭合标签）
- type 是其基本属性，用来控制输入的类型
input 、br、hr 、img、 base 都是单标签
多个 radio 使用相同的 name ，则表示这是一组数据，这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input标签</title>
</head>
<body>
用户名：<input type="text" maxlength="15"/>
<br/>
<!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
密 码：<input type="password"/>
<br/>
<!--使用name 限定了一组内容，从而实现单选-->
性 别：
<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex"/> 女
<br/>
爱 好：
<input type="checkbox" name="hobby"/> 看电影
<input type="checkbox" name="hobby"/> 读书
<br/>
<input type="button" value="普通按钮"/>
<br/>
<input type="submit" value="提交按钮"/>
<br/>
<input type="reset" value="重置按钮"/>
<br/>
<input type="image" src="../image/imgButton.png"/>
<br/>
请选择文件：<input type="file"/>
</body>
</html>
(2)、label 标签(理解)
- label 标签为 input 标签定义标注/标签
- 用来绑定一个表单元素，当点击 label 标签的时候，被绑定的 表单元素就会获取焦点
- 通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label的使用</title>
</head>
<body>
<!--label 中直接包裹 input,可以实现绑定-->
<label>点击此处文本，用户名输入框会获取焦点 <br> 用户名：<input type="text"/></label>
<br/>
<hr/>
<!--使用 label 的 for 属性绑定input-->
<label for="#two">点击此处文本，密码输入框会获取焦点</label>
<br/>
用户名：<input type="text"/>
<br/>
密 码：<input type="text" id="#two"/>
</body>
</html>(3)、textarea 文本域标签
- <textarea></textarea>用来做大量文本的输入，支持多行
- 有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea标签</title>
</head>
<body>
请输入评论内容：
<br/>
<textarea ></textarea>
</body>
</html>
（4）、下拉菜单 <select></select>
- <select></select> 用来定义下拉菜单
- <option></option> 用来定义下拉菜单选项
- <select></select> 中至少包含一对 <option></option>
- 在 option 中定义了属性 selected=”selected” 之后，表示该项被默认选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select标签</title>
</head>
<body>
设置家乡
<select >
<option>选择省份</option>
<option>山东</option>
<option>内蒙古</option>
<option>黑龙江</option>
<option>山西</option>
</select>
<select>
<option>济南</option>
<option selected="selected">临沂</option>
<option>聊城</option>
<option>莱芜</option>
<option>青岛</option>
</select>
</body>
</html>
2、表单域 <form></form>
- 该标签用来定义表单域，以实现用户信息的收集和传递，form 中的内容通常都会被提交到服务器。
- 基本语法格式：
<form action="url地址" method="提交方式" name="表单名称"> ...各种表单控件... </form> - 常用属性有action、method、name
- action : 指定接收并处理表单信息的服务器url地址
- method : 表单数据的提交方式。分为 post / get
- name : 指定表单名称，用来区分页面中的多个表单
- 每个表单都应该有自己的表单域
- 使用form 包裹之后点击提交按钮才有提交的动作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单域</title>
</head>
<body>
<!--使用 form 包裹之后，提交按钮和图片按钮点击时就有效果了-->
<form action="https://www.baidu.com" method="post" name="userInfo">
用户名：<input type="text" maxlength="15"/>
<br/>
<!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
密 码：<input type="password"/>
<br/>
<!--使用name 限定了一组内容，从而实现单选-->
性 别：
<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex"/> 女
<br/>
爱 好：
<input type="checkbox" name="hobby"/> 看电影
<input type="checkbox" name="hobby"/> 读书
<br/>
<input type="button" value="普通按钮"/>
<br/>
<input type="submit" value="提交按钮"/>
<br/>
<input type="reset" value="重置按钮"/>
<br/>
<input type="image" src="../image/imgButton.png"/>
<br/>
请选择文件：<input type="file"/>
</form>
</body>
</html>
