文章目录
- 表单
- 创建表单form
- input 标签
- input标签的value属性
- 设置input标签格式
- 单选框
- 多选框
- 上传文件
- 下拉菜单
- 文本域
- 设置文本域格式
- label 标签
- 按钮
表单
作用：收集用户信息。
使用场景：
- 登录页面
- 注册页面
- 搜索区域
创建表单form
action属性：指向服务器地址
input 标签
input 标签 type 属性值不同，则功能不同。
当input的属性type="text/password"时的属性补充
autocomplete="off" 关闭自动补全
readonly 设置为只读，不能修改
disabled 设置为禁用
autofocus 自动获取焦点
placeholder 提示内容
maxlength=“数字” 最长字符
input标签的value属性
-
input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的
-
当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本
-
当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
-
当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值
type="checkbox"时，其 value 属性的值与单选框、复选框是否勾选有关。呈勾选状态时提交给服务器的数据值为true，否则为false，默认值为 false。
-
当 type 的取值为 image 时，不能使用value属性，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器
type="image" 定义图像形式的提交按钮，可以通过调整input的width和height来改变图片的大小。必须把 src 属性 和 alt 属性 结合使用（alt 属性表示图片未正常显示时，用于替换图片的提示；如果不写这个属性，当图片未正常显示时，会默认显示提交这两个字）
设置input标签格式
input 标签占位文本
占位文本：提示信息，文本框和密码框都可以使用。
修改input输入框提示文字的样式
input::placeholder { font-size: 5px; color: rgb(190, 190, 190); }去除input获取焦点时的边框
outline: none;
修改input输入框提示文字
input{text-indent: 5px; /*提示文字距离左边框的距离*/ font-size: 12px; /*提示文字大小*/ }单选框
常用属性
男 女
提示：name 属性值自定义。
多选框
多选框也叫复选框，默认选中：checked。
我爱敲代码
上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
value 属性是
在这个例子中，如果用户选择“苹果”，value 的值就会是 “apple”。
默认显示第一项，selected 属性实现默认选中功能。
文本域
作用：多行输入文本的表单控件。
设置文本域格式
设置输入文字格式
textarea{ resize: none; /* 禁用文本域大小的缩放 */ width: 200px; /*设置文本域宽度*/ height: 50px; /*设置文本域高度*/ color: red; /*输入文字的颜色*/ font-size: 15px; /*输入文字的大小*/ outline: none; /*去除获得焦点时出现的边框*/ border: none; /*去除文本域默认边框*/ }设置提示文字格式（与修改input提示文字格式的方法基本相同）
textarea::placeholder { font-size: 25px; /*设置提示文字的大小，如果没有设置提示文字的大小，默认提示文字的大小和输入文字的大小相同*/ color:green; /*设置提示文字的颜色*/ text-indent: 20px; /*提示文字距离左边框的距离*/ }注意点：实际开发中，使用 CSS 设置 文本域的尺寸，且一般禁用右下角的拖拽功能
label 标签
作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
- 写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
- 写法二：使用 label 标签包裹文字和表单控件，不需要属性
提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。
- 写法二：使用 label 标签包裹文字和表单控件，不需要属性
-