一、HTML表单的使用

1、 form标签

• 定义和用法：

1. form: 标签用于为用户输入创建 HTML 表单,表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等

---

• 参数：

1. action: 定义表单数据提交地址（不写默认本地地址)
2. method: 表单提交的方式(常见的有get和post)

• form表单中包含的元素：

1. input标签
2. label标签
3. extarea标签
4. select标签
5. option标签

• 例如:

<h1>用户登录</h1>
<form action="" method="get"></form><div>账号:<input type="text"></div>

---

2. ** input标签**

• 参数:

1. value属性: 定义表单元素的值
2. name属性: 定义表单元素的名称,此名称是提交数据时的键名

• 例如：

<form action="" method="get"></form><div>账号:<input type="text" name='user' value='user'></div>

---

• type 属性的值详解：

1. text ------>  定义单行文本输入框

<div><input type="text" name="username" value="henry001" id="u">
</div>

2. password ------>  定义密码输入框

<div><!-- 密码输入框 -->密码:<input type="password" name="pwd">
</div>

3. radio ------>  定义单选框

<div><!-- 单选框 --><input type="radio" name="sex" value="nan">男<input type="radio" name="sex" value="nu">女<input type="radio" name="sex" value="weizhi">未知
</div>

4. checkbox ------>  定义复选框

<div><!-- 复选框 -->记住密码:<input type="checkbox" name="status" value="1">
</div>

5. file ------>  定义上传文件

<div><!-- 文件上传 -->上传头像:<input type="file" name="pic">
</div>

6. date ------>  日期选择器

<div><!-- 日期选择框 -->日期:<input type="date" name="date1">
</div>

7. submit ------>  定义提交按钮

<div><!-- 提交按钮 --><input type="submit">
</div>

8. button ------>  定义一个普通按钮

<div><!-- 普通按钮 --><input type="button" value="普通按钮">
</div>

9. reset ------>  定义重置按钮

<div><!-- 重置按钮 --><input type="reset">
</div>

10. image ------>  定义图片作为提交按钮,用src属性定义图片地址

<div><!-- 上传图片 --><input type="image" src="./600.jpg">
</div>

---

3. ** label 标签**

• 定义和用法:

1. label 标签为 input 元素定义标注（标记）
2. label 标签的 **for 属性 **应当与相关元素的 id 属性相同

<div><!-- 文本输入框 --><label for="u">账号:</label><input type="text" name="username" value="henry001" id="u">
</div>		

---

4. textarea 标签

• 定义和用法:

1. textarea标签定义多行的文本输入控件
2. 可以通过 **cols 和 rows 属性 **来规定 textarea 的尺寸

<div><!-- 多行文本编辑 -->个人介绍:<textarea cols="30" rows="10"></textarea>
</div>

---

5. select 标签

• 定义和用法:

1. select 元素可创建单选或多选菜单,也可以用于选择数据提交表单

<div><!-- 下拉选择框 -->选择城市:<select name="city"><option value="sh">上海</option><option value="bj">北京</option><option value="sz">深圳</option></select>
</div>

---

6. option 标签

• 定义和用法:

1. option 元素定义下拉列表中的一个选项。option 元素位于 select 元素内部

<div><!-- 下拉选择框 -->选择城市:<select name="city"><option value="sh">上海</option><option value="bj">北京</option><option value="sz">深圳</option></select>
</div>

---

二、iframe的使用

• 定义和用法:

1. iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

• 例如：将登陆的页面链接到其他页面

<div><!-- iframe嵌套 --><iframe src="https://www.baidu.com/" height="1000" width="2000"></iframe>
</div>