HTML表单笔记（Reset257）

整理一下之前的笔记便于查看😁😁😁
记于 2020.10.22【P303】B站视频链接

一、表单元素：一系列元素，主要用于收集用户数据

**（一）、input元素** 
(1)输入框 <input type="text">
 type属性：输入框类型，
 type:text表示这是一个普通文本输入框；
 type:password表示密码框,隐藏输入
 type:date表示日期选择框，有兼容性问题
 type:search表示搜索框，有兼容性问题
 type:range表示滑块，有兼容性问题
 type:color颜色选择框
 type:number数字输入框，有min,max属性控制数字范围，
         step属性控制每次增加多少
 type:checkbox多选框，一般input需要有name属性，区别不同题目的选项
 type:radio单选框，要通过name属性告诉浏览器哪几个选项属于一组，
         默认选中在input中使用布尔属性`<input checked type="text">
 type:file表示选择文件上传

(2)value属性：输入框的值

(3)placeholder属性：文本框为空时的提示文本（推荐使用）

(4)input还可以做按钮，一般兼容性需要很高用input做，否则少用

(5)type:reset重置按钮

(6)type:button普通按钮（写样式尽量用普通按钮）

(7)type:submit提交按钮

二、select元素

1、下拉列表选择框，通常和option元素配合使用
例如：<select name="" id="">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
     </select>
2、下拉列表内分组可以用optgroup元素
3、下拉列表选择多项，加上布尔属性multiple
例如：<select multiple name="" id="">

三、textarea元素：文本域，多行文本框

   用来做个人简介那一部分，例如：
   <textarea name="" id="" cols="30" rows="10"></textarea>
	cols和rows表示横向纵向多少字，不会空白折叠

四、按钮元素

    button（推荐使用而不是input）
   （1）属性：type:reset重置、type:button普通、type:submit提交（默认）
   （2）里面可以加图片、段落等等

五、配合表单元素的其他元素

 一、label元素
   普通元素，通常配合单选、多选框使用，表示标签
   1、显示关联
   可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素的
   id值例如：<input  id="radmale" name="gender" type="radio">
      <label for="radmale">男</label>这样子点文字也能选择按钮了
   2、隐式关联
	例如：<label>
        <input name="gender" type="radio">
        男
     </label>
 
 二、datalist元素：数据列表
 	该元素本身不会显示到页面，通常用于和普通文本框配合，不常用，有点像搜
 	索提示，不过可用性不高

三、form元素
 	会将整个表单元素放置到form内部，当提交表单时，会将form内的内容以合适
 	的方式提交到服务器，对于静态页面没啥意义。

四、fieldset元素
	表单分组，把一组的表单写在其中，默认样式会出现边框

六、表单状态

   （1）readonly属性：布尔属性 是否可读，不会改变表单显示样式
   （2）disable属性：布尔属性，是否禁用，会改变表单显示样式

七、美化表单元素

**新的伪类**
1. focus 元素聚焦时的样式，例如：input：focus{样式}
2. checked 单选框和多选框被选中时的样式，不过一般设置的
   是下一个兄弟元素label
**常见用法**
4. 重置表单元素样式（见文件./重置样式.css）
- textaline是行块盒居中，不仅仅是文本居中
5. 设置多行文本框是否允许调整尺寸
   css属性resize:
- both：默认值，两个方向都可以调整尺寸
- none: 不可以调整尺寸
- horizontal:水平方向都可以调整尺寸
- vertical：垂直方向都可以调整尺寸
6. 文本框边缘到文本的距离，textarea也可以用
- 使用padding
- 使用text-indent首行文本缩进
7. 控制单选和多选框的样式（原理是用css做出来的）
- labor里面不能加div,一般用span

需要练习一下，敲一遍最好