表单元素及属性
- 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类型
- password 密码框
<input type="password" />
- reset 重置按钮
<input type="reset" />
- button按钮
<input type="button" />
<button>按钮</button>
- 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可以设置默认选中
更多的表单元素
- 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可以设置默认选中,默认选中第一个
- 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>