03_html表单的使用

一、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>