HTML 表单标签（input、button、select、textarea、label标签)

目标：能够使用 表单相关标签和属性，实现网页中表单类网页结构搭建

1、Input系列标签的基本介绍

• 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
• 标签名：input
  • input标签可以通过type属性值的不同，展示不同效果
• type属性值
  
• 代码：

 文本框:<input type="text"> 
    密码框：<input type="password"> 
    单选框：<input type="radio">
    多选框：<input type="checkbox">
    上传文件：<input type="file">
    <input type="submit">
    <input type="reset">
    <input type="button">

• 效果：
  文本框:
  密码框：
  单选框：
  多选框：
  上传文件：
  
  
  

1.2、 input系列标签-文本框

• 场景：在网页中显示输入单行文本的表单控件
• type属性值：text
• 常用属性：
  
• 代码：

文本框:<input type="text" placeholder="请输入用户名">
密码框：<input type="password" placeholder="请输入密码">

• 效果：
  文本框:
  密码框：

1.4、input系列标签-单选框

• 场景：在网页中显示多选一的单选表单控件
• type属性值：radio
• 常用属性：
  
• 注意点：
  • name属性对于单选框有分组功能
  • 有相同name属性值的单选框为一组，一组只能同时有一个被选中（对于多选框同样适用）
• 代码：

 性别：<input type="radio" name="sex"> 男
    <input type="radio" name="sex"> 女
多选框：<input type="checkbox" checked>

• 效果：
  性别： 男 女
  多选框：

1.6、input系列标签-文件选择

• 场景：在网页中显示文件选择的表单控件

• type属性值：file

• 常用属性：添加mutiple可以一次选择多个文件，不添加一次只能选择一个文件
  

• 代码：

 <input type="file" multiple>

• 效果：

1.7、input系列标签-按钮

• 场景：在网页中显示不同功能的按钮表单控件
• type属性值：
  • value属性：value属性即使标签显示的名称，（提交，重置，普通），提交，重置按钮同样有此属性

• 注意点：
  • 如果需要实现以上按钮功能，需要配合form标签使用’
  • form使用方法：用form标签吧表单标签一起包裹起来即可
• 无form代码，提交重置按钮不起作用

        用户名：<input type="text">
        密码：<input type="password">
        <input type="submit">
        <input type="reset">

• 效果：
  用户名：
  密码：
  
  
• 有form代码，提交重置按钮起效

	<form >
            用户名：<input type="text">
            <br>
            密码：<input type="password">
            <br>
            <input type="submit">
            <input type="reset">
			<input type="button" value="普通">
 	</form>

-效果：

用户名：
密码：

2、button按钮标签

• 场景：在网页中显示用户点击的按钮
• 标签名：button
• type属性值：（同Input的按钮系列）
  
• 注意点：
  • 谷歌浏览器中的buttion默认是提交按钮
  • button是双标签，更便于包裹其他内容：文字、图片等
• 代码：

<button>我是按钮</button>
<button type="submit">我是提交按钮</button>
<button type="reset">我是重置</button>
<button type="button">普通按钮，没有任何功能</button>

-效果：
我是按钮
我是提交按钮
我是重置
普通按钮，没有任何功能

3、 select下拉菜单标签

• 场景：在网页中提供多个选择性的下拉菜单表单控件
• 标签组成：
  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项
• 常见属性：
  -selectd:下拉菜单的默认选项
• 代码：

 <select>
        <option selected>上海</option>
        <option>深圳</option>
        <option>北京</option>
        <option>广州</option>
</select>

• 效果:
  上海 深圳 北京 广州

4、textarea文本域标签

• 场景：在网页中提供多输入文本的表单控件
• 标签名：textarea
• 常见属性：
  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数
• 注意点：
  • 右下角可以拖拽改变大小
  • 实际开发时对于样式效果推荐用CSS设置
• 代码：

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

-效果：

5、label标签

• 场景：用于绑定内容与表单标签的关系
• 标签名：label
• 使用方法①：
  1.使用label标签吧内容（如：文本）包裹起来
  2.在表单标签上添加id属性
  3.在label标签的for属性中设置对应的id属性值
• 使用方法②：
  1.直接使用label标签把内容（如:文本）和表单标签一起包裹起来
  2.需要把label标签的for属性删除即可
• 普通代码：男女不会选择，未绑定，必须要点圆点

性别：
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女

• 演示效果：
  性别：
  男
  女

• 采用label后的代码（点男女文字也可以选择）

性别：
   <!-- 方法一 采用绑定，input的id要和label的for参数一致且唯一 -->
    <input type="radio" name="sex" id="man">    
    <label for="man">男</label>
    <!-- 方法二 label标签直接包裹-->
    <label ><input type="radio" name="sex" id="woman">女</label>

• 效果演示：
  性别： 男 女