form表单和CSS
一、form表单
1. form表单有什么用
- 能够获取用户输入的信息（输入，选择， 上传的文件），并且将这些数据全部发送给后端
2. form表单的用法
（1）有两个重要参数：
- action ： 控制数据提交的地址
- 三种书写方式：
- 不写 ， 默认就是朝当前这个页面所在的地址提交数据
- 写全路径，如
http://www.baidu.com - 只写路径后缀（/index/）
- 三种书写方式：
- method ： 控制数据提交的方式
- get form表单默认是get请求
- post
- enctype 控制前端朝后端提交数据的编码格式
- 默认是urlencoded
form表单如果想要传输文件 必须要做两件事
1.method必须是post
2.必须将默认的urlencoded换成formdata
- 默认是urlencoded
<body>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
</form>
</body>
（2）input 结合 label 一起使用
<body>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
1. 绑定id值方法一
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后在浏览器中点击label标签内文字任何的位置都可以自动选中input框
2. 绑定id值方法二
<label for="d2">用户名:</label>
<input type="text" id="d2">
</form>
<body>
（3）input的type参数
- 根据input的type属性的参数的不同，展示不同的功能，以下都是type的参数
- text 普通文本
- password 输入的内容，会变成密文
- date 日期
- radio 单选圆圈
- checkbox 多选 打钩
- hidden 隐藏
- file 传文件
- button 普通按钮，没有任何意义。然而却是最多的，你可以给它绑定js事件
- reset 重置按钮
- submit 提交按钮，能够自动触发form表单提交数据的动作
input标签的其他属性
- disable 属性 ，禁用该input框
- value属性 ， 设置默认值
选择的标签，如何默认选中
- radio
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
******)
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
- checkbox
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
******)
- 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(
- radio
select标签 ：下拉框
- 一个个的option标签就是一个个的选项
- 默认是单选
- 你可以给select标签加一个multiple参数，就可以变成多选
- 在option标签中添加selected属性类似checked，就可以默认选中
textarea 标签 获取大段文本
能够触发form表单提交数据的动作的两个标签
- input标签的type = submit
- button标签（input标签的type参数也有button，两者作用不一样）
所有获取用户输入的标签，都应该有name属性（
*******）- name属性就类似于字典的key
- input框获取到的用户输入都会自动放到input框的value属性中，无需自己在添加value属性
针对所有选择框来说，传到后端的数据，由value属性接收再传到后端，所以要手动添加value属性。
form表单如果要提交文件数据，必须修改以下参数
enctype="multipart/form-data"
二、CSS
1. 什么是css
css就是层叠样式表
css就是用来控制html标签样式的，让其在浏览器上渲染的样式更合适，好看。
2. 注释
单行注释：
/*单行注释*/多行注释：
/*
多行注释`1
多行注释2
*/
注释的作用
- 通常我们在写css的时候，都会单独写一个css文件，里面只有css代码
- 这时，就用注释来标注和区分一个个功能
3. css的语法结构
- 选择器 {属性1：属性值1}
4. css的三种引入方式
通过head标签内部的link标签引入外部的css文件（最正规的用法）
<link rel="stylesheet" href="css文件路径（只能放相对路径）">直接在html页面上的head内通过style标签直接书写css代码
<style>
h1 {
color: green;
}
</style>
行内式（直接在标签内部通过style属性直接书写），不推荐使用
<h1 style="color: orange">我是Oscar</h1>
5. css 查找标签方法
（1）基本选择器
元素选择器（即标签选择器）
让页面上的所有该标签都变成红色 标签名 {
color: red;
}
id选择器
让id为该id值的标签变成绿色 (# + id值) #id值 {
color: green;
}
类选择器
让类中有c1的标签都变成粉红色 (. +类值)
.c1 {
color: pink;
}通用选择器
让页面的所有标签都变成橘黄色
* {
color: orange;
}
（2）组合选择器
后代选择器
只要在标签内部都算作该标签的后代，用1个空格连接
如div 内部的所有span标签： div span {
color: red;
}
儿子选择器
表示一个标签内部的第一层标签。用 > 连接
如 div内的第一个span是儿子标签，第二个是div的孙子标签
<div>
<span>adff</span> # div 的儿子标签
<p>dsfsadf # div 的儿子标签
<span>iuiuio</span> # div 的孙子标签
</p>
</div> 儿子选择器语法：
div>span {
color: green;
}
弟弟选择器
属于同一级别标签的标签1的之下的标签都是标签1的弟弟标签， 用 ~ 连接 <div>div
<span>div里面的span</span>
<p>div里面的p
<span>div里面的p里面的span</span>
</p>
<span>div里面最下面的span</span>
</div>
<p>ppp</p> # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
<span>span</span> # div 的弟弟标签
<p>ppp</p> # div 的弟弟标签
<span>span</span> # div 的弟弟标签 弟弟选择器语法： div~span {
color : yellow
}毗邻选择器
毗邻选择器 标签1的下方的第一个同级别标签 ，用 + 连接 <div>div
<span>div里面的span</span>
<p>div里面的p
<span>div里面的p里面的span</span>
</p>
<span>div里面最下面的span</span>
</div>
<p>ppp</p> # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
<span>span</span> # div 的弟弟标签
<p>ppp</p> # div 的弟弟标签
<span>span</span> # div 的弟弟标签 div+span {
color: aqua;
}
（3）属性选择器
标签的补充
- 任何的标签都有自己的默认的属性 id class
- 标签还支持你自定义任何数量的属性(也就意味着可以让标签帮你携带一些额外的数据)(
******)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1.含有某个属性名的标签
2.含有某个属性名并且属性值是...的标签
3.找p标签并且含有某个属性名并且属性值是...的标签
*/
[password] {
color: red;
} [username='jason'] {
color: black;
} span[username='jason'] {
color: red;
}
</style>
</head>
<body>
<p username="jason">ppp</p>
<p username="oscar">ppp</p>
<p username="sean">ppp</p>
<span username="jason">span</span>
<span password="123">span</span>
<div password>div</div>
</body>
</html>
（4）伪类选择器
hover状态所有标签都有a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后 再回去依次对应上面a标签的4种状态
<style>
a:link {
color: red;
}
a:hover { /*hover表示的就是悬浮的意思*/
color: black;
}
a:active {
color: orange;
}
a:visited {
color: pink;
} input输入框的聚焦状态：
input:focus {
background-color: orange;
}
普通文本的鼠标悬浮状态：
span:hover {
background-color: pink;
}
</style>
input输入框的两种状态
我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus；
鼠标移出去之后的状态 叫做input框失去焦点
（5）伪元素选择器
(清除浮动带来的负面影响)，可以通过css添加文本内容
p标签的文本信息首个字符变大且变成红色：
p:first-letter {
font-size: 48px;
color: red;
}
p标签的文本信息首个字符前面加绿色的 * ，content的内容不能被选中
p:before {
content: '*';
color: green;
}
p标签的文本信息末尾加上蓝色的 ？ ，content的内容不能被选中
p:after {
content: '?';
color: blue;
}
6.选择器的优先级
1.选择器相同的情况下 引入方式不同
遵循就近原则 谁离标签更近 就听谁的 ， 行内选择器优先级最高
2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器
7.分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
***************分组写法，把同等级标签写在一起*********************
div,span,p {
color: blue;
}
****************嵌套，各种选择器放在一起写，前提是他们对应的标签要是同等级的标签。用逗号隔开****************
#d1,.c1,p {
color: orange;
}
</style>
</head>
<body>
<div id="d1">div</div>
<span class="c1">span</span>
<p class="c2">
p
</p>
</body>
</html>
form表单和CSS的更多相关文章
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
- （day43）form表单、css
目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...
- 1113 form表单与css选择器
目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...
- 前端form表单与css
form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...
- 前端之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 ...
- form表单与CSS选择器和样式操作
form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...
- form表单，css简介，css选择器，css样式操作
form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
- form表单与css选择器
目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...
随机推荐
- 递归选中easyui树
$(function(){ // var data1 = [ // { // "id": 3, // "text": "3组织", // & ...
- 物料批量盘点，调用其中两个BAPI BAPI_MATPHYSINV_COUNT BAPI_MATPHYSINV_CHANGECOUNT
涉及两个BAPI:录入数量BAPI_MATPHYSINV_COUNT 修改数量:BAPI_MATPHYSINV_CHANGECOUNT REPORT ZSC_133 NO STANDARD PAGE ...
- RTX数据表分析
/******************************************* * UserName 做主键 **************************************** ...
- java：struts框架5（Converter，Validation，Tags（Object-Graph Navigation Language））
1.Converter: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTY ...
- The system has no LUN copy license
[问题描述] ipsan作为cinder后端的时候,通过快照创建磁盘失败,报以下错误: { u 'data': {}, u 'error': { u 'code': 1077950181, u 'de ...
- Objective-C中的自动释放池
自动释放池块@autoreleasepool 自动释放池块在MRC和ARC下都可以使用.在MARC下,为了将自动释放池块内部的变量放入自动释放池,需要手动调用autorelease方法:在ARC下,只 ...
- 一篇文章看懂Java并发和线程安全（一）
一.前言 长久以来,一直想剖析一下Java线程安全的本质,但是苦于有些微观的点想不明白,便搁置了下来,前段时间慢慢想明白了,便把所有的点串联起来,趁着思路清晰,整理成这样一篇文章. 二.导读 1.为什 ...
- HDU-4332-Constructing Chimney
题目描述 用\(1*1*2\)的砖头摆出如图所示的烟囱,可以横着摆也可以竖着摆,求摆出\(n\)层高的烟囱会有多少种不同的方案. Input 一共有\(T\)组数据. 每组数据包含一个\(n(1 \l ...
- 利用BFS解决拯救007问题 -- 数据结构
题目: 7-1 拯救007 (30 分) 在老电影“007之生死关头”(Live and Let Die)中有一个情节,007被毒贩抓到一个鳄鱼池中心的小岛上,他用了一种极为大胆的方法逃脱 —— 直接 ...
- Windows7下Pycharm安装Keras
1.安装Anaconda3 2.安装Pycharm 3.安装TensorFlow 一.File -> Settings -> Install 二.搜索TensorFlow -> In ...