HTML+CSS要点8：表单及属性选择器

form - 表单（不怎么常用）

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

• action 表单信息提交地址，信息提交成功会跳转去该地址
• method 提交方式
• get （默认）
• post
• target 信息提交成功打开页面的方式
  • _blank
  • _self

input表单元素

<input type="" />

type类型：

• submit 提交<input type="submit" value="提交按钮上的文字设置">
• text 单行文本输入框<input type="text" value="单行文本内的默认文字" />

注意：需要form提交的内容 或者 和form提交相关的内容，都放在form表单内，如果不需要form提交，可以不写form，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文件上传`
5. hidden隐藏域（不常用）：在页面上没有任何显示效果```
   用途：
   1. 送信息的时候，携带一些需要后端接收，但不需要用户看到的内容
   2. 该请求一定是需要通过表单的form进行提交的
6. radio 单选
   • 单选需要圈定在哪些值之间，进行选择，通过name 控制一组中的元素
   • value的用途是提交给后端的，并非展示给用户
   • 用户看到的是写在radio后面的文字
   • 通过checked可以设置默认选中

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

其他表单元素

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. input

input{
	padding:0; - text、password 是有padding的
	margin:0; - 类型 radio、checkbox 是有margin的
	outline: none; - 选中输入框的时候，外面会有一层蓝色边框
	vertical-align: top;
}

2. select

select{
	padding:0; - firefox下有padding值
	vertical-align: top;
}

3. button

button{
	padding:0;
	outline: none; - firefox下有outline值
	vertical-align: top;
}

4. textarea

textarea{
	resize: none;
	padding:0; - chrome下有padding值
	margin:0;
	outline: none;
	vertical-align: top;
}

表单伪类（E代表元素）

1. E:checked

input:checked{
   //样式
}

2. E:focus

在这里插入代码片