2020-02-12(表单及属性选择器)

表单元素及属性

• form表单（不怎么常用）

<form action="提交地址" method="提交方式" target="_blank"></form>

action 表单信息提交地址，信息提交成功会跳转去该地址
method 提交方式：

• get （默认）
• post

target 信息提交成功打开页面的方式
_blank
_self

• 触发表单信息的提交：

表单并不会自动提交，也不会一上来就触发，需要我们手动触发提交

• input表单元素

<input type="" />

(1). 单标签
(2). 用于收集用户信息，根据不同的type值，可以让input表单元素具备不一样的功能
type类型：

• submit 提交

<input type="submit" value="提交按钮上的文字设置">

• text 单行文本输入框

<input type="text" value="单行文本内的默认文字" />

注意：需要form提交的内容 或者 和form提交相关的内容，都放在form表单内，如果不需要form提交，可以不写form，form不是必写标签

<form action="https://www.baidu.com">
<input type="text"  value="请输入中文" />
<input type="submit" value="发送">
</form>

提交的内容这么多，如何找到哪个内容是做什么用途的呢？

和接受信息方（后端）定下统一名称：name，后端根据发送的name来判断该数据是做什么

<input type="text" value="请输入中文" name="word"/>

更多的type类型

1. password 密码框

<input type="password" />

2. reset 重置按钮

<input type="reset" />

3. button按钮

<input type="button" />
<button>按钮</button>

4. file文件上传

<input type="file" />

5 hidden隐藏域（不常用）：在页面上没有任何显示效果

<input type="hidden" />

该表单的用途是：
发送信息的时候，携带一些需要后端接收，但不需要用户看到的内容
而且该请求一定是需要通过表单的form进行提交的

6、radio 单选

<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="保密">保密

• 单选需要圈定在哪些值之间，进行选择，通过name 控制一组中的元素
• value的用途是提交给后端的，并非展示给用户
• 用户看到的是写在radio后面的文字
  通过checked可以设置默认选中

7、checkbox复选
<

h3>爱看的书籍</h3>
<input type="checkbox" name="book" value="">css权威指南
<input type="checkbox" name="book" value="">html权威指南
<input type="checkbox" name="book" value="">js权威指南

• 多选 与 单选一样，需要圈定值的范围，通过name控制一组的范围
• value的用途是提交给后端的，并非展示给用户
• 用户看到的是写在checkbox后面的文字
  通过checked可以设置默认选中

更多的表单元素

1. label标签
   帮助扩大点击区域，而不是只有点击表单元素有效

<label>
<input type="radio" name="gender" value="女">女
</label>

点击文字 “女”同样可以使单选框选中
Δ 缺点：必须把文字和表单元素都放在label里面
案例：点击图片选择相应的性别

如果不想在一起~ 也可以利用标签上的属性 for 与表单元素id绑定

<label  for="man">男</label>
<input id="man" type="radio" name="gender" value="男">

2、select 下拉表单 && option 选项

<select>
<option>上海市</option>
<option>北京</option>
<option>重庆</option>
<option>天津</option>
</select>

通过selected可以设置默认选中，默认选中第一个

3. textarea 多行文本输入框

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

• cols 列 ： 显示 30 个字的宽度（根据英文）

• rows 行 ： 显示 10行的高度
  不建议使用cols 和 rows来控制宽高，建议直接用width height

• 标签类型（使用的时候注意vertical-align：top）

1、form

display: block;

2、input

display: inline-block;

3、select

display: inline-block;

4、option

display: block;

5、textarea

display: inline-block;

6、button

display: inline-block;

7、label

display: inline;

• 标签默认样式
  1、form（IE6下的，可以不用再添加）

form{margin: 0;}

2、input

input{
padding:0;
margin:0;
outline: none;
vertical-align: top;
}

• 类型 radio、checkbox 是有margin的
• text、password 是有padding的
• 选中输入框的时候，外面会有一层蓝色边框
  outline - 轮廓
• 默认是有边框的，根据实际情况选择是否要去除
  3、select

select{
padding:0;
vertical-align: top;
}

• firefox下有padding值
• 边框根据设计图需求
  4、button

button{
padding:0;
outline: none;
vertical-align: top;
}

• firefox下有outline值
• 边框根据设计图需求

5、textarea

textarea{
resize: none;
padding:0;
margin:0;
outline: none;
vertical-align: top;
}

• chrome下有padding值
• firefox下有margin值
• 边框根据设计图需求
• 默认情况下，允许用户修改多行文本的宽高
  resize：重置尺寸
• none 不允许
• vertical 垂直
• horizental 水平
• both 垂直 + 水平
  需要配合overflow：auto一起使用

表单伪类（E代表元素）

1、E:checked

input:checked{
   //样式
}

给选中的这个元素添加样式（配合选择器更好用哦~）

2、E:focus

input:focus{
  //样式
}

给获取到光标的元素添加样式（配合选择器更好用哦~）

• 美化表单
  我们会发现表单的部分标签，因为不同的浏览器，最终呈现的样式是不一样的，除此之外，还有一些样式是无法修改的，这样可能造成和我们设计图风格不符，不美观这样的问题。
  

    span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #666;
            border-radius: 50%;
        }
        input{
            display: none;
        }
        input:checked ~ span{
            background: #ff664d;
        }
    </style>
    ----------------------------------------------------------
<label>
    <input type="checkbox">
    <span></span>
</label>