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
- password 密码框
<input type="password" />
- reset 重置按钮
<input type="reset" />
- button按钮
<input type="button"/>
<button>按钮</button>
- file文件上传`
- hidden隐藏域(不常用):在页面上没有任何显示效果```
用途:- 送信息的时候,携带一些需要后端接收,但不需要用户看到的内容
- 该请求一定是需要通过表单的form进行提交的
- radio 单选
- 单选需要圈定在哪些值之间,进行选择,通过name 控制一组中的元素
- value的用途是提交给后端的,并非展示给用户
- 用户看到的是写在radio后面的文字
- 通过checked可以设置默认选中
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<input type="radio" name="gender" value="保密">保密
其他表单元素
- label标签
帮助扩大点击区域,而不是只有点击表单元素有效
<label>
<input type="radio" name="gender" value="女">女
</label>
- 缺点:必须把文字和表单元素都放在label里面
- 果不想在一起~ 也可以利用标签上的属性 for 与表单元素id绑定
<label for="man">男</label>
<input id="man" type="radio" name="gender" value="男">
- 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)
- form :
display: block; - input
display: inline-block; - select
display: inline-block; - option
display: block; - textarea
display: inline-block; - button
display: inline-block; - label
display: inline;
标签默认样式
- input
input{
padding:0; - text、password 是有padding的
margin:0; - 类型 radio、checkbox 是有margin的
outline: none; - 选中输入框的时候,外面会有一层蓝色边框
vertical-align: top;
}
- select
select{
padding:0; - firefox下有padding值
vertical-align: top;
}
- button
button{
padding:0;
outline: none; - firefox下有outline值
vertical-align: top;
}
- textarea
textarea{
resize: none;
padding:0; - chrome下有padding值
margin:0;
outline: none;
vertical-align: top;
}
表单伪类(E代表元素)
- E:checked
input:checked{
//样式
}
- E:focus
在这里插入代码片