1.3-HTML基础--表单用法

收集用户信息表单

input标签可以通过type属性值的不同来展示不同效果

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能

		<!-- 文本框  text-->
        昵称：<input type="text" placeholder="请输入昵称"><br><br>
        <!-- 密码框  password-->
        密码：<input type="password" placeholder="请输入密码"><br><br>
       <!-- 单选框  radio-->
        性别：<input type="radio" >男<input type="radio" >女<br><br>
        <!-- 多选框 checkbox-->
        爱好：<input type="checkbox">打篮球<input type="checkbox">rap<input type="checkbox">唱歌<br><br>
        <!-- 文件选择框 -->
        文件<input type="file"><br><br>
        <!-- 按钮标签  提交按钮 -->
        <input type="submit">
        <!-- 按钮标签  重置按钮 -->
        <input type="reset">
        <!-- 按钮标签  普通按钮 默认无功能 -->
        <input type="button" value="普通按钮">

效果图

---

1.button按钮标签

button标签是双标签，更便于包裹其它内容：文字、图片等
type属性值（同input的按钮系列）

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮，默认无功能，之后配合js添加功能

		<button type="submit">button提交按钮</button>
        <button type="reset">button重置按钮</button>
        <button type="button">button普通按钮</button>

---

2.下 拉 菜 单

标签组成：

• select标签：下拉菜单的整体
• option标签：下拉菜单每一项
• selected：下拉菜单默认选中

<!-- 下拉菜单 -->
      所在城市： <select>
                    <option >北京</option>
                    <!-- selected下拉菜单默认选中 -->
                    <option selected >上海</option>
                    <option >广州</option>
                    <option >深圳</option>
                 </select>

---

3.textarea文本域标签

• 场景：在网页中提供可输入多行文本的表单控件

• 标签名：textarea

• 常见属性：
  cols：规定了文本域内可见宽度
  rows：规定了文本域内可见行数

• 右下角可以拖拽控制大小

• 实际开发时针对于样式效果推荐使用CSS设置

 <textarea  cols="30" rows="10"></textarea>

---

4.label标签

• 场景：用于绑定内容与表单标签的关系
• 标签名：label
• 使用方法①：
  1.使用label标签把内容（如：文本）包裹起来
  2.在表单标签上添加id属性
  3.在label标签的for属性中设置对应的 id 属性值

<!-- 无添加lable标签 -->
    <input type="checkbox">唱跳
    
<!-- 添加第一种lable标签 -->
    <input type="checkbox"  id="one"><label for="one">唱跳</label>

• 使用方法②：
  1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2.需要把label标签的for属性删除即可

<!-- 无添加lable标签 -->
    <input type="checkbox">rap <br><br>

<!-- 添加第二种lable标签 -->
    <label>
        <input type="checkbox">rap
    </label>

---

5.没有语义的布局标签

div标签和span标签

• div标签：一行只显示一个（独占一行）
• span标签：一行可以显示多个

	<div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>

我是一个div

我是一个div

我是一个div

我是一个span 我是一个span 我是一个span

---

6.常见字符实体