HTML 表单

1、用户信息表单 input

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="普通按钮">

outline 属性设置元素周围的轮廓线。

outline: none; 清除默认边框线

效果图

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

效果图

3、下拉菜单

标签组成：

select：下拉菜单的整体

option：下拉菜单每一项

selected：下拉菜单默认选中

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

效果图

4、textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性： - cols：规定了文本域内可见宽度 - rows：规定了文本域内可见行数 - maxlength：允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。 - placeholder：向用户提示可以在控件中输入的内容。
右下角可以拖拽控制大小
- CSS添加：resize：
  - none：用户无法调整元素的尺寸；
  - both：用户可调整元素的高度和宽度；
  - horizontal：用户可调整元素的宽度；
  - vertical：用户可调整元素的高度；
实际开发时针对于样式效果推荐使用CSS设置

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

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

6、没有语义的布局标签

div 标签和 span 标签

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

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

HTML表单

HTML 表单

1、用户信息表单 input

2、button按钮标签

3、下拉菜单

4、textarea文本域标签

5、label标签

6、没有语义的布局标签