form表单与css选择器

目录

• form表单
  • action属性
  • input标签
  • lable标签
  • select标签
  • textarea标签
  • 补充
• 网络请求方式
• CSS简介
• CSS基本选择器
• 组合选择器
• 属性选择器
• 分组与嵌套
• 伪类选择器

form表单

form表单的作用是获取前端用户数据并发送给后端服务器。

<form action="" method="">
</form>

method属性是用于控制提交的方式，有两种方式，get请求和post请求。

action属性

action属性可以指定表单数据提交的地址，属性值有多种写法：

1.写全路径，路径是哪里就会提交到哪里。

2.只写后缀，自动补全当前ip和port，如action="abc.php"就是将数据提交到当前ip地址下的abc.php页面中。

3.什么都不写，会朝网页所在ip地址提交。

input标签

input标签是用于获取用户的各种数据的，有多种获取方式。

<input name="" type="" value="" checked=""/>

属性说明：

• name：表单提交时的键
• value：表单提交时对应项的值，
• type：input的类型。
• checked：是否被选中，多用于单选框与复选框，值为"checked"代表被选中。

type属性值	意义	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" />
reset	重置按钮	<input type="reset" />
button	普通按钮	<input type="button" />
email	邮箱输入框	<input type="email" />
file	文本选择框	<input type="file" />

代码演示：

<form action="">
    <p>
        文本框：<input type="text" />
    </p>
    <p>
        密码框：<input type="password" />
    </p>
    <p>
        日期框：<input type="date" />
    </p>
    <p>
       邮箱：<input type="email" />
    </p>
    <p>
        复选框：<input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
    </p>
    <p>
        单选框:<input name="abc" type="radio" />
        <input name="abc" type="radio" />
        <input name="abc" type="radio" />
    </p>
    <p>
        提交按钮：<input type="submit" />
    </p>
    <p>
        重置按钮：<input type="reset" />
    </p>
    <p>
        普通按钮：<input type="button" />
    </p>
    <p>
        提交文件按钮：<input type="file" />
    </p>
</form>

lable标签

lable标签是专门给input标签配文字说明的，也可以不使用。

方式一：

<label for="input1">用户名:</label>
<input type="text" id="input1">
<!--label的for属性与input的id属性要对应-->

方式二：

<label>用户名:
    <input type="text">
</label>

与直接添加文字表面上没有区别，但是设置了label后点击文字也会跳到输入框中。

select标签

select标签可以让你在多个选项中选择一个，它是一个下拉框。

select创建下拉框，option代表里面的每一个选项。

<form action="">
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</form>

也可以把select里的multiple属性值设为"multiple"变成多选。

<form action="">
	<select multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</form>

option标签也可以设置value属性，用于传给后端。

textarea标签

textarea标签可以获取大段文本内容。

<form action="">
	<textarea cols="30" rows="10"></textarea>
</form>

属性说明：

• cols：行，可以看出宽度。
• rows：列，可以看成高度。

补充

input标签中有两个非常重要的属性。

1.name属性：名称，与value对应，在编写input标签的时候应该添加name属性用于区分具体数据含义。

2.value属性：值，与name对应，如果是输入框，value值就会等于用户输入；如果是选择框，需要前端程序员自己定义选择这个选项的value。

前端给后端传数据就是以name=value的形式传输，后端可以根据name获取value。

网络请求方式

最常见的网络请求方式有两种，get方法和post方法。

1.get请求：朝服务端索要数据

2.post请求：朝服务端提交数据

着两种请求都可以携带数据，但是get请求实在URL地址后面通过?组织数据，比如：URL地址?name=jason&pwd=123，很容易被看见；post请求是在请求体中组织数据，不易被看见；

所以get请求一般只用于传输不重要的数据，并且get请求携带数据的大小有限制，最多只能携带2KB左右。

CSS简介

CSS是装饰页面的技术。

语法结构

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

语法注释

/*注释内容*/

引入css的方式

1.head标签中的style标签内部直接编写css代码

2.head标签中的link标签引入外部css文件

3.标签内部通过style属性直接编写

CSS基本选择器

1.标签选择器：通过标签来定义css样式

/*选择页面的所有h1标签*/
h1 {

}
/*选择页面的所有img标签*/
img {

}

2.类选择器：通过标签的class属性定义css样式

html:

<p class='p1'>我的class属性值是p1</p>
<p class='p1'>我的class属性值是p1</p>
<p class='p2'>我的class属性值是p2</p>

css:

/*选择页面标签class属性为p1的标签*/
.p1 {

}
/*选择页面标签class属性为p2的标签*/
.p2 {

}

3.id选择器：通过标签的id属性定义css样式

html:

<p id='p1'>我的id属性值是p1</p>
<p id='p1'>我的id属性值是p1</p>
<p id='p2'>我的id属性值是p2</p>

css

/*选择页面标签id属性为p1的标签*/
#p1 {

}
/*选择页面标签id属性为p2的标签*/
#p2 {

}

4.通用选择器：选择所有标签定义css样式

/*选择页面所有标签*/
* {

}

组合选择器

通过标签关系选择标签来定义css样式。

html:

<div class='div1'>
    <p class='p1'>
        我是div1儿子p1
    </p>
    <p class='p2'>
        我是div1儿子p2，p1的毗邻
    </p>
    <div class='div2'>
        <p class="p3">
            我是div1孙子p3
        </p>
    </div>
</div>

1.儿子选择器(使用大于号)，查找标签内部，只向内部查找一层。

/*选择class值为div1的标签内部儿子的class是p1的标签*/
.div1 > .p1 {

}

2.后代选择器(关键符号是空格)，查找标签内所有的标签。

/*选择class值为div1的标签内部所有的p标签*/
.div1 p {

}

3.毗邻选择器(关键符号是加号)，查找标签同级别下紧挨的第一个标签。

/*选择class值为p1的标签同级别下一个class值为p2的标签*/
.p1 + .p2 {

}

4.弟弟选择器(关键符号是小波浪号)，查找同级别下的所有标签。

/*选择class值为p1的标签同级别下所有p标签*/
.p1 ~ p {

}

属性选择器

根据标签内部的属性名和属性值查找标签(关键符号是中括号)。

1.直接通过属性名查找

/*选择所有标签中有class属性值的*/
[class] {

}

2.通过属性与值查找

/*选择所有标签中有type属性值的，并且值为text的*/
[type='text'] {

}

3.通过属性与值查找，并指定具体标签

/*选择所有input标签中有type属性值的，并且值为text的，*/
input[type='text'] {

}

分组与嵌套

分组

css定义样式时可以把多种样式相同的选择器放在一起定义。

/*选择p标签、div标签、class属性值为abc的标签*/
p, div, .abc {

}

嵌套

多种选择器可以混合起来使用。

/*选择div标签中id为d1的标签内部所有的p标签*/
div#d1 p{

}

伪类选择器

我们可以根据标签不同的状态，对标签进行一些修改。

1.鼠标悬浮

/*定义鼠标停在p标签上时的样式*/
p:hover {

}

2.获取聚点(选中输入框)

/*输入框被鼠标选择时的样式*/
input:focus {

}

其他伪类选择器：

/*未访问链接的样式*/
a:link {

}
/*选定链接后的样式*/
a:active {

}
/*已访问链接后的样式*/
a:visited {

}