form表单，css简介，css选择器，css样式操作
form表单
简介
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序
以处理，从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。
表单在网页中主要负责数据采集功能，它用< form >标签定义。用户输入的信息都要包含在form标签中，点击
提交后，< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
属性action
action属性：设置表单提交的服务器地址
method属性：设置表单提交的方式，一般有“GET”和“POST”方式, 不区分大小写
<body>
<form action="http://www.baidu.com" method="GET">
</form>
</body>
方法一：绝对 URL - 指向另一个网站
action="http://www.baidu.com"
会将表单提交到指定的地址
方法二：什么都不写
action="" 或（action="#"）
向当前页面提交表单
方法三：相对 URL - 指向网站内的一个文件
action="example.html"
向这个文件提交表单
input标签
type属性
text 单行文本框（注意这个是单行文本框并且还是input里type属性的值。多行文本框是一个标签）
date 日历展示
email 邮箱格式数据
password 密码框
radio 单选按钮，同一组的单选按钮name值一样，checked属性默认选中
checkbox 复选框，同一组的单选按钮name值一样，checked属性默认选中
file 文件选中按钮，文件上传按钮
form的enctype设置成multipart/form-data。method设置成post提交方式
form默认的enctype值application/x-www-form-urlencoded。特殊字符ASCII码。method默认get提交方式
name 数据的名字（相当于给数据写名字）
value 提交数据（如果给了一个value还给了属性值那么这个属性值会默认的出现在input中的。如果要将input中的数据提交要有一个name）
image 图片按钮（会将form表单的数据进行点击图片提交，同时会将鼠标的坐标进行提交，这个的作用主要就是可以把一张图片当成一个提交按钮）
submit 提交按钮（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）
reset 重置按钮（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）
hidden 隐藏按钮，值会被提交(常用场景：不想让用户看到的地方使用。主要作用是将input隐藏)
button 普通按钮
disabled：禁用
checked：默认选中
readonly：只读
提交按钮有哪些？
<input type="submt" value="">
<input type="image" src="" alt="">
<button></button> 写在表单内部的button
<button type="submit"></button>
重置按钮
<input type="reset" value="">
<button type="reset"></button>
普通按钮
<input type="button" value="">
<button type="button"></button>
"""
input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义
ps:我们在编写input标签的时候应该添加name属性
"""
select标签
国家:
China
American
Japan
selected:下拉项默认选中
<option></option>下拉项
国家:<select name="address">
<option selected value="0">China</option>
<option value="1">American</option>
<option value="2">Japan</option>
</select><br/><br/>
textarea标签
<textarea name="desc"></textarea>
lable标签
用户名:
用户名:
专门给input标签配文字说明 也可以不使用
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
<input type="text">
</label>
效果展示：
form 表单
注册
用户名:
密 码:
性别:男
女
妖
爱好:吃
睡成猪
LOL
大头贴:
国家:
China
American
Japan
地区:
山西
洪洞
河南
南阳
个性签名:星光不问赶路人，时光不负有心人
源码：
<h1>form 表单</h1>
<form action="" method="post">
<h2>注册</h2>
用户名:<input type="text" name="username" value="春游去动物园" readonly/><br/><br/>
密 码:<input type="password" name="userpass" disabled/><br/><br/>
性别:<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" checked value="2"/>妖<br/><br/>
爱好:<input type="checkbox" name="hobby[]" checked value="0"/>吃
<input type="checkbox" name="hobby[]" checked value="1"/> 睡成猪
<input type="checkbox" name="hobby[]" value="2"/>LOL<br/><br/>
大头贴:<input type="file" name="pic" /><br/><br/>
国家:<select name="address">
<option value="0">China</option>
<option selected value="1">American</option>
<option value="2">Japan</option>
</select><br/><br/>
地区:<input type="text" name="address1" list="mylist"/>
<datalist id="mylist">
<option value="山西">山西</option>
<option value="洪洞">洪洞</option>
<option value="河南">河南</option>
<option value="南阳">南阳</option>
</datalist><br/><br/>
个性签名:<textarea name="jianjie" rows="5" cols="40"></textarea>
<input type="submit" value="登录"/>
<input type="reset" value="取消"/>
</form>
GET/POST请求
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方
法和 GET 方法。
1、 如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指
定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
2、 另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤
中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
get提交时参数直接暴露在URL上。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
但是，在以下情况中，请使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get/post区别：
1、Get方法是用来向服务器上获取数据，而Post是用来向服务器上传递修改数据。
2、Get将表单里的数据添加到action所指向的URL后面，并且两者之间使用“?”连接，而各个变量之间使
用“&”连接；
Post是将表单中的数据放在form的数据体中，按照变量和值对象的方式，传递到所指向的action.
3、Get是不安全的，因为在传输过程中，数据被放在请求的URL中，这样，用户可以直接在浏览器上看到
提交的数据，一些系统内部信息也一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
4、Get传输的数据量小，主要是受限与于URL长度限制，其中IE浏览器对URL的最大限度为2083个字符。
而post可以的传输大量的数据，所以在上传文件和大数据量时使用post。
5、Form提交默认为Get方法提交。
6、Get方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，而Post方法刷洗页面重复提交可
能会产生不良的后果。
CSS基本选择器
1.标签选择器：选择器的名字代表html页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。
<style type="text/css">
p{
font-size:14px;
}</style>
<body>
<p>css</p>
<p>html</p>
</body>
【总结】需要注意的是：
（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
2.ID选择器：规定用#来定义（名字自定义）
通过标签的id属性查找标签
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="mytitle">你好</h2>
</body>
id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
HTML页面，不能出现相同的id，哪怕他们不是一个类型
3、类选择器：规定用圆点.来定义
通过标签的class属性查找标签(关键性符号是句点符)
<head>
<style type="text/css">
.oneclass/*定义类选择器*/{
width:800px;
}
</style>
</head>
<body>
<h2 class="oneclass">你好</h2>
</body>
和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次
class属性的特点：
特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下
<h3 class="classone classtwo">我是一个h3啊</h3>
4.通用选择器
查找所有的标签
* {
color: blue;
}
CSS高级选择器
1.后代选择器 （父子之间一定要有空格）
1
2
E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内（也就是说所有在E元素里的F元素
都会被选择）
<style type="text/css">
#div1 p{
color: red;
}
</style>
<div id="div1">
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
儿子选择器（父子之间一定要有>）
1
2
E>F 儿子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
<style type="text/css">
#div1>p{
color: red;
}
</style>
<div id="div1">
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
3.相邻选择器 （父子之间一定要有+）
1
2
E+F 相邻选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面(匹配E元素，后面的第一个F元素)
<style type="text/css">
#div1+div{
width: 50px;
height: 10px;
background-color: red;
}
</style>
<div id="div1" >
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
弟弟选择器(关键符号是小波浪号)
1
2
E~F 弟弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素(匹配E元素后所有为F的元素)
<style type="text/css">
#div1~div{
margin: 10px;
width: 50px;
height: 10px;
background-color: red;
}
</style>
<div id="div1">
<p>1</p>
<div id="div2">
<p>2</p>
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
属性选择器
CSS3中共有7种属性选择器
1.E[attr]：只使用了属性名，并没有确定任何属性值。
a[target]{
background: gray;
}
//带有target属性的链接会得到灰色的背景
2.E[attr="value"]：指定了属性名，并指定了该属性的属性值。
a[target=blank]{
background-color: green;
}
//target="_blank"的链接会得到绿色的背景
3.E[attr~="value"]：指定了属性名，并指定了该属性的属性值，此属性值是一个词列表，并且以空格隔开，其中的词列表包含一个value值，而且“~”不可忽略。
[title~=flower]
//选择title属性包含单词“flower”的元素，并设置其样式
4.E[attr^="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value开头的。
div[class^="test"]{
background:#ccc;
}
//设置class属性值以“test”开头的所有div元素的背景颜色
5.E[attr$="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value结束的。
div[class$="test"]{
background: #ccc;
}
//设置class属性值以“test”结尾的所有div元素的背景色
6.E[attr*="value"]：指定了属性名，并指定了该属性的属性值，属性值中包含value。
div[class*="test"]{
background:#fff;
}
//设置class属性值包含“test”的所有div元素的背景颜色
7.E[attr|="value"]：指定了属性名，并且属性值是value或以"value"开头的值，
[lang|=en]
//选择lang属性值以“en”开头的元素并设置其样式
分组与嵌套
# 1.分组
div, p, span { 查找div或者p或者span
color: red;
}
# 2.嵌套
d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
"""
综合玩法
玩法1
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
玩法2
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签
"""
伪类选择器
:link 选择地址没有被访问过的超链接元素
:visited 选择地址被访问过的超链接元素
:hover 选择鼠标悬停在上面的元素。
:active 选择鼠标在上面并且按键按下不松手的元素
:focus 选择获取焦点的元素。
# 1.鼠标悬浮
p:hover { 鼠标移动到p标签上方 字体颜色动态修改为橙色
color: orange;
}
# 2.获取聚点
input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}
form表单，css简介，css选择器，css样式操作的更多相关文章
- form表单js提交
form表单js提交 $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...
- form表单与CSS选择器和样式操作
form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...
- form表单与css选择器
目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...
- 1113 form表单与css选择器
目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...
- （day43）form表单、css
目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...
- 前端form表单与css
form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...
- form表单和CSS
一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...
- 前端之form表单与css（1）
目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
- form表单和CSS基础
form 表单 input type="" 表单的组合标签,用来确定需要的是什么输入类型 type属性值: 文本输入框:text 密码输入框:password 单选按钮:radio ...
随机推荐
- 小技巧之“将Text文件中的数据导入到Excel中，这里空格为分割符为例”
1.使用场景 将数据以文本导出后,想录入到Excel中,的简便方案, 起因:对于Excel的导出,Text导出明显会更方便些 2.将Text文件中的数据导入到Excel中,这里空格为分割符为例的步骤 ...
- Redis报错：DENIED Redis is running in protected mode
转:Redis使用认证密码登录 Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis ...
- Python这些位运算的妙用，绝对让你大开眼界
位运算的性能大家想必是清楚的,效率绝对高.相信爱好源码的同学,在学习阅读源码的过程中会发现不少源码使用了位运算.但是为啥在实际编程过程中应用少呢?想必最大的原因,是较为难懂.不过,在面试的过程中,在手 ...
- [译]HTML&CSS Lesson5: 定位
CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置,使我们的设计具有结构,使内容更加易懂. CSS有好几种不同的定位属性,每种都有自己的使用场景.在这节课中我们会通过不同的案例--可复用 ...
- HTML5与类有关的扩充
对于传统HTML而言,HTML5是一个叛逆.所有之前的版本对JavaScript接口的描述都不过三言两语,主要篇幅都用于定义标记,与JavaScript相关的内容一概交由DOM规范去定义. 而HTML ...
- Python疫情爬取输出到txt文件
在网上搬了一个代码,现在不适用了,改了改 import requestsimport jsondef Down_data(): url = 'https://view.inews.qq.com/g2/ ...
- Shiro 安全框架详解二（概念+权限案例实现）
Shiro 安全框架详解二 总结内容 一.登录认证 二.Shiro 授权 1. 概念 2. 授权流程图 三.基于 ini 的授权认证案例实现 1. 实现原理图 2. 实现代码 2.1 添加 maven ...
- jboss7学习3-jboss安装 访问（外网）添加用户
一.下载安装 1.下载地址: http://www.jboss.org/jbossas/downloads ,下载Certified Java EE 6 Full Profile版本. 2.解压 jb ...
- mpvue使用scss
安装scss 安装命令如下,不带版本号可能会导致报错 npm i sass-loader@7.3.1 -D npm i node-sass@4.14.1 -D 然后修改 build 文件夹下的 web ...
- linux中sort、uniq、cut、tr、wc命令的使用
文本处理命令 1.sort命令 使用场景 : 用于将文件内容加以排序(可以和cat一起用) 参数 作用 -n 依照数值的大小排序 -r 以相反的顺序来排序(默认只比较第一个数,-rn是按所有数值比较) ...