11-表单

表单

大家有没有街上去填写过调查问卷.

这些各式各样的调查问卷的问题就想网页上一个个的表单元素.

这些问题都是为了收集你的个人信息,或者为了各类面试考试等等.

这些填写自己的个人信息,任何情况,前端收集用户信息会用到表单

表单----单词

MDN—前端API文档 w3c非前端了解前端知识

我们网页用户输入内容,填写信息,填写收货地址,或是抢购按钮等都是表单.

这些都是很有价值的活动但很多网站设计不好主要是因为表单的控件众多,不好设计和应用样式.

表单作用 :数据采集;

在form表单里填写表单,发送给后台.

前端展示内容,填写数据发送给服务器

form表单和div标签类似,也是划分区域也是在肚子里划分各种各样的内容

form{
		width:300px;
    height:300px;
}	
<form action="" id="login-info"></form>/*里面添加表单组件*/
/*action属性相当于表单发送地址(服务器地址)  */

<form action="" method=""></form>
/*method表单提交方式,默认提交的数据都是get方式.还有一种post方式.
	get获取信息(默认)
	post发送信息

  两者没有什么本质上的区别.
 
  get:可以在地址中看到的    post不可以在地址中看到的
 */

我们的数据以?开始 name=vlue用&链接进行提交

表单中添加给用户填写的信息,

一条信息由什么构成,信息的名称:信息值(这个概念后面学javascipt也会经常用到)

1.姓名:云牧 2.性别:男 3.年龄:18 4,爱好:女;这有几条信息?

用什么来收集信息?

这时候就需要去Ipnut标签中填写Input的特性,信息的名称:信息的值

Input标签的定性分析 单标签 不能添加到内容到input标签之中

<span>姓名:</span><input type="text">

input{
   	width:300px;
  	height:300px;
    text-indent:2em/*2.设置光标起始位置*/
}

/*1.不独占一行但可以设置宽高说明它是行内块元素*/

表单组件的分类:

全部是用input实现,但Input有种类,通过type进行分类.

input元素：在元素中使用，用来展示用户可以输入数据的元素.

input标签最终的表现形式和传输至服务器的数据类型,取决于type 属性。

输入框

<input type="text" value="">
/*不写type默认text.
  value:文本默认内容.
  input标签有一些默认的样式.
  打开开发者可以看到有默认的padding,我们就需要去清除padding.*/

input{ padding:0; }
/*并且我们选中文本框的时候可以发现它周围一圈边框变成了蓝色*/

input{ outline:none; }
/*outline（轮廓）是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.*/

自动聚焦

<input type="text" autofocus>

提示文字

<input type="text"  placeholder="请输入用户名">
/*没有输入所看到的文本*/

不出现自动补全

<input type="text" autocomplete="off" placeholder="请输入用户名">

文本框-语法

<input  type="text"(文本框)  name="username"(文本框名称,提交给后台的信息名) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) placeholder="提示文字"/>

输入密码

<span>密码:</span><input type="password" name="password"(密码框名称,提交给后台的信息名) value="用户名"(文本框初始值) maxlength="20"(文本框可输入最多字符) ></*密码提交可见*/>

提交按钮

<input type="submit">
/*把当前表单的所有内容提交出去.
  
如果要修改按钮里默认的文字,修改value即可.*/

输入检测

<span>姓名:</span><input type="text" name="username" required>
/*现在点提交网址会出现name,required提示用户这个元素的内容必填*/

required

1.规定文本框填写内容不能为空*，否则不允许用户提交表单.

2.适合于input标签：text、search、email、password、number、checkbox、radio、file等类型

pattern

	用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

语法：

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

按钮

<button></button>
/*功能需要在js中进行实现*/

搜索

input <type="search">

输入数字

<input type="number" step="10" max="10000" min="0">
/*此时只能输入数字  step每次点击加10* 最大最小/

输入滑块

<input  type="range" step="10" max="100" min="1">

选择文件

<input type="file" multiple>/*multiple选中多个文件*/

重置

<input type="reset">

单选和多选

1.单选 radio 特性切换功能

<form>	
	<fieldset>/*标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。*/
		<legend>单选框</legend>/*<legend> 标签为 <fieldset> 元素定义标题*/
		男<input type="radio" name="sex" value="boy">
/*1.多个name值相同的按钮，只可以选择一个,才行成对立*/>
		女<input type="radio" name="sex" value="girl"  checked(单选按钮选中态)>
/*2.value规定了input提交的值*/
	</fieldset>
</form>
/*默认选中某个元素在后面加checked*/

 /*fieldset可以和legend单独设置样式*/
	fieldset{
            border: 3px dotted pink;
        }
	legend{
            color: red;
            font-size: 50px;
        }
	<fieldset>
            <legend>未满十八岁禁止游览</legend>
            注册: <input type="text">
 	</fieldset>

2.多选 选中和取消的功能

<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值相同,每个都可选择 同一选项必须同一名字*/

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>

第二种是显示的,把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属性与表单控件关联的Label元素不一定要紧挨着相关控件.可以离得很远.
  但是从结构的角度来看,把表单控件与相关的label元素分开并不明智,尽量避免这么做.*/

几乎每个表单都会有name和id属性.

id属性实在表单输入字段与label元素间建立联系的关键.

name属性则是表单正确地将数据提交给服务器的关键.

id和name的值可以不一样,但是为了保持一致性,让他们相同比较好.

下拉选择

<form action="">
		<select name="wife">/*1.name下拉列表的名称*/
			<optgroup label="活泼俏皮型"></optgroup>/*3.给下拉选项说明或者是标签提示*/
			<option value="dai">林黛玉</option>/*2.option元素 具体选项 value提交的值*/
			<optgroup label="温柔大气型"></optgroup>
			<option value="cha" selected>薛宝钗</option>/*4.selected默认选中*/
			<optgroup label="大家闺秀型"></optgroup>
			<option value="fen">王熙凤</option>
		</select>
	</form>

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值相同即可*/

文本输入区域

<textarea name="" id="" cols="30" rows="10"></textarea>
/*rows属性表示这个文本输入区域默认的高，cols属性表示这个文本输入区域默认的宽.
  一般是默认可以随意拉伸,如果要禁止拉伸的话.*/

	textarea{
            resize: none;
        }

聚焦的伪类

:foucs伪类 当前正在输入,聚焦 和:hover类似

#name:focus{
	border: 2px solid red;
	outline: none;/*不要蓝色边框可删除*/
}
<input type="text"  id="name">

.tips{
	display: none;
}
#name:focus + .tips{
	display: inline;
}
<input id="name" type="text"><span class="tips">请认真输入哟~~~</span>/*用户体验会变好*/

foucs-within 表单的聚焦 需要添加到表单之中

#login-info:focus-within{
	background-color: #ccc;/*唯一一个子元素状态改变,父元素监控的操作.*/
}
#login-info:focus-within .keywords{
	color: red;
}
<form action="" id="login-info">
	<span class="keywords">姓名:</span><input type="text"><br>
	<span class="keywords">年龄:</span><input type="number"><br>
	<span class="keywords">性别:</span>男<input type="radio" name="sex"value="boy">
	女<input type="radio" name="sex" value="girl">
</form>

check状态的切换表示一个开关.

也有一个伪类checked 表示被勾选之后的状态(raido也可以使用)

<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宽高背景颜色红色的		盒子.*/
}