# 表单
表单----单词课
MDN---前端API文档 w3c非前端了解前端知识
表单作用 :数据采集;
前端收集用户信息会用到表单
网页前端展示填写内容,用户填写数据后将本地数据提交给远程服务器
form表单和div标签类似,也是划分区域也是在肚子里划分各种各样的内容
使用form创建一个表单
form{
width:300px;
height:300px;
}
<form action="" method=""></form>
/*在form标签里填写表单组件 */
/*action属性:表单提交的服务器地址
method表单提交方式
*/
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<form action="" method=""></form>
/*,默认提交的数据都是get方式.还有一种post方式.
get获取信息(默认)
post发送信息
两者没有什么本质上的区别.
get:表单数据会附加在地址栏上
post:表单数据会包含在服务器的体内发送给服务器
target提交页面在何处打开
_self 当前页打开
_blank 空白页打开
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
我们的数据以?开始 name=vlue用&链接进行提交
表单中添加给用户填写的信息,
一条信息由什么构成,信息的名称:信息值
姓名:云牧 性别:男 年龄:18 爱好:女;这有几条信息?
用什么来收集信息?
这时候就需要去Ipnut标签中填写Input的特性,信息的名称:信息的值
<span>姓名:</span><input type="text">
input{
width:300px;
height:300px;
/*Input标签的定性分析 单标签 不能添加到内容到input标签之中*/
}
/*1.不独占一行但可以设置宽高说明它是行内块元素*/
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 表单组件的分类:
全部是用input实现,但Input有种类,通过type进行分类.
input标签最终的表现形式和传输至服务器的数据类型,取决于type属性。
# 文本输入框
<input type="text" value="">
/*不写type默认text.
value:文本默认内容.
input标签有一些默认的样式.
打开开发者可以看到有默认的padding,我们就需要去清除padding.*/
1
2
3
4
5
2
3
4
5
input{ padding:0; }
/*并且我们选中文本框的时候可以发现它周围一圈边框变成了蓝色*/
1
2
2
input{ outline:none; }
/*outline（轮廓）是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.
用法和border一模一样.唯一区别:轮廓线不会影响盒子大小(不会影响页面布局)
*/
1
2
3
4
2
3
4
语法
<input type="text"(文本框) name="username"(文本框名称,提交给后台的信息名) value="用户名"(文本框初始值) maxlength="20"(文本框可输入最多字符) placeholder="提示文字">
redonly (将表单设置为只读,数据会提交)
disabled (将表单设置为禁用,数据不会提交)
autofocus(自动聚焦)
autocomplete="off"(不出现自动补全)
1
2
3
4
5
6
2
3
4
5
6
# 密码输入框
<span>密码:</span><input type="password" name="password"(密码框名称,提交给后台的信息名) value="用户名"(密码框默认值) maxlength="20"(文本框可输入最多字符) >
1
# 按钮
<input type="button" value="按钮">
1
<button></button>
/*功能需要在js中进行实现*/
1
2
2
提交按钮
<input type="submit" value="提交">
/*把当前表单的所有内容提交出去.
如果要修改按钮里默认的文字,修改value即可.*/
1
2
3
4
2
3
4
# 输入检测
<span>姓名:</span><input type="text" name="username" required>
/*现在点提交网址会出现name,required提示用户这个元素的内容必填*/
1
2
2
required
1.规定文本框填写内容不能为空*，否则不允许用户提交表单.
2.适合于input标签：text、search、email、password、number、checkbox、radio、file等类型
pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
语法：
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
1
# 搜索框
<input type="search">
1
# 数字输入框
<input type="number" step="10" max="50" min="20" value="0" name="" id="">
/*step：步长
max：可以输入最大值
min：可以输入的最小值
value：默认值
*/
1
2
3
4
5
6
2
3
4
5
6
# 输入滑块
<input type="range" name="" id="">
1
# 单个文件导入
<input type="file" name="" id="">
1
# 多个文件导入
<input type="file" name="" id="" multiple>
1
# 邮箱输入框
<input type="email" name="email" id="">
1
# 日期输入框
<input type="date" name="" id="">/*年月日*/
1
# 时间输入框
<input type="time" name="" id="">/*小时,分钟*/
1
# 年月输入框
<input type="month" name="" id="">/*年月*/
1
# 星期输入框
<input type="week" name="" id="">/*年周*/
1
# 时间戳
<input type="datetime-local" name="" id="">/*年月日小时分钟*/
1
# 调色盘
<input type="color" name="" id="">
1
# 重置按钮
<input type="reset">
1
# 单选和多选
# 单选 radio 特性:切换功能
-- 像这种选择框,必须指定一个value值,vlue最终作为用户填写的值
<form>
男<input type="radio" name="sex" value="boy">
/*1.多个name值相同的按钮，只可以选择一个,才行成对立*/>
女<input type="radio" name="sex" value="girl" checked>
/*2.value规定了input提交的值*/
</form>
/*默认选中某个元素在后面加checked*/
1
2
3
4
5
6
7
2
3
4
5
6
7
# 多选 checkbox 选中和取消的功能
林黛玉<input type="checkbox" name="female" value="dai" >
/*1.name数据名称*/
薛宝钗<input type="checkbox" name="female" value="cha" checked>/*2.value服务器传输的数据值*/
王熙凤<input type="checkbox" name="female" value="fen">
/*3.name值相同,每个都可选择 同一选项必须同一名字*/
/*4.checked将单选按钮设置为默认选中*/
1
2
3
4
5
6
2
3
4
5
6
# label标签
输入的时候的辅助标签,,扩大元素的选择范围,帮助我们快速选中元素
他非常重要,主要用于给表单添加结构,并增强它的可用性和无障碍性.
让我们点击label标签的时候也会把输入焦点定位到相关的表单元素.
第一种是隐式的,把表单控制嵌入到label元素中
<label>林黛玉<input id="dai" type="checkbox" name="female" value="dai"></label>
<label>薛宝钗<input id="cha" type="checkbox" name="female" value="cha"></label>
<label>王熙凤 <input id="fen" type="checkbox" name="female" value="fen"></label>
1
2
3
2
3
第二种是显示的,把label的for属性设为于相关表单控件的id属性相同的值
<label for="dai">林黛玉</label>
<input id="dai" type="checkbox" name="female" value="dai" >
<label for="cha">薛宝钗</label>
<input id="cha" type="checkbox" name="female" value="cha">
<label for="fen">王熙凤</label>
<input id="fen" type="checkbox" name="female" value="fen">
/*通过for属性与表单控件的id名字进行关联.
Label元素不一定要紧挨着相关控件.可以离得很远.
但是从结构的角度来看,把表单控件与相关的label元素分开并不明智,尽量避免这么做.*/
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
几乎每个表单都会有name和id属性.
id属性实在表单输入字段与label元素间建立联系的关键.
name属性则是表单正确地将数据提交给服务器的关键.
id和name的值可以不一样,但是为了保持一致性,让他们相同比较好.
# 下拉选择
<form action="">
<select name="wife">
/*1.name下拉列表的名称(提交服务器数据的名字)*/
<optgroup label="活泼俏皮型"></optgroup>
/*2.option元素 具体选项 value提交的值*/
<option value="dai">林黛玉</option>
<optgroup label="温柔大气型"></optgroup>
/*3.给下拉选项说明或者是标签提示*/
<option value="cha" selected>薛宝钗</option>
/*4.selected默认选中*/
<optgroup label="大家闺秀型"></optgroup>
<option value="fen">王熙凤</option>
</select>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 表单分组
/* fieldset可以和legend单独设置样式
fieldset 划分一块区域
legned定义区域标题*/
fieldset{
border: 3px dotted pink;
}
legend{
color: red;
font-size: 50px;
}
<fieldset>
<legend>未满十八岁禁止游览</legend>
注册: <input type="text">
</fieldset>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# datalist
前端HTML所创造的数据,这个数据会被input标签使用
<input type="text" list="data1">
<datalist id="data1">
<option value="A">第一条数据</option>
<option value="AB">第二条数据</option>
<option value="ABC">第三条数据</option>
<option value="ABCD">第四条数据</option>
</datalist>
/*input被动态的挂载上了数据,保持文本输入框的list的值与datalist的id值相同即可*/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 文本输入区域
<textarea name="" id="" cols="30" rows="10"></textarea>
/*rows属性表示这个文本输入区域默认的高
cols属性表示这个文本输入区域默认的宽.
一般是默认可以随意拉伸,如果要禁止拉伸的话.*/
1
2
3
4
2
3
4
textarea{
resize: none;
}
1
2
3
2
3
# 聚焦的伪类
:foucs伪类 当前表单聚焦(正在输入)
#name:focus{
border: 2px solid red;
outline: none;/*不要蓝色边框可删除*/
}
<input type="text" id="name">
1
2
3
4
5
2
3
4
5
.tips{
display: none;
}
#name:focus ~ .tips{
display: inline;
}
<input id="name" type="text">
<span class="tips">请认真输入哟~~~</span>/*用户体验会变好*/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# foucs-within
一个元素获得焦点，该元素的后代元素获得焦点
它或它的后代获得焦点，都可以触发 :focus-within
form {
width: 200px;
height: 200px;
border:1px solid #ccc;
}
form:focus-within{
background: pink;
border: 1px solid skyblue;/*唯一一个子元素状态改变,父元素监控的操作.*/
}
<form action="">
<input type="text" placeholder="name"><br>
<input type="password" placeholder="password">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# checked
被勾选的状态(适用于input type="checkbox/radio" )
<form action="#">
<input type="checkbox" id="checkbox">
<div class="box"></div>
</form>
.box{
width: 200px;
height: 200px;
background-color: blue;
transition:.5s;
}
#checkbox{
position: absolute;/*绝对定位脱离文档流*/
opacity: 0;/*透明度为0*/
width: 200px;
height: 200px;
margin:0;/*清除外边距与盒子贴牢*/
}
#checkbox:checked{
width:400px;
height:400px;
}/*被勾选之后的按钮的状态 */
#checkbox:checked +.box{
width:400px;
height:400px;
background-color: red;
/*当复选框被选择中的时候让下面兄弟类名为box盒子的盒子变成400px400px宽高背景颜色红色的盒子.*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
← 基本标签 01-CSS基本样式和选择器 →