前端-form表单与CSS
form表单
form表单能够获取用户的输入的内容、选择、上传文件全部发送给后端。
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符编码 |
| action | 规定向何处提交表单的地址（URL） |
| autocomplete | 规定浏览器自动完成表单，默认开启 |
| enctype | 规定被提交数据的编码（默认：url-encoded，）提交文件要用formdata |
| method | 规定在提交表单时所用的HTTP方法，默认get |
| name | 规定识别表单的名称 |
| novalidate | 规定浏览器不验证表单 |
| target | 规定action属性中地址的目标 |
<!--例子：注册-->
<h1>欢迎来到注册页面！</h1>
<form action="这里填数据提交的目的地，通常是一个URL地址（IP:port）" method="post">
<p>
<label for="username">username：<input type="text" id="username"></label>
</p>
<p>
<label for="password">password：<input type="password" id="password"></label>
</p>
</form>
action：控制数据提交的目的地
- 不写的情况下，默认提交到当前页面所在的路径。
- 写全路径（https://www.baidu.com），将数据提交给对应路径。
- 只写路径后缀，后面框架上会资源定位到某个位置。
method：控制数据提交的方式
- get：
form表单默认是get请求 - post：提交数据
label标签
通常情况下 input 标签需要结合 label 标签一起使用。
<label for="username">username：<input type="text" id="username"></label>
在label标签中绑定id值，之后点击label标签内的任意位置都可以自动选中输入框。
input标签
input 标签就类似于前端的变形金刚，根据 type 参数的不同，展示不同的功能
所有获取用户输入的标签，都应该有name、value属性
- name：类似于字典中的key
- value：
input输入框获取到的用户输入都会放到input框的value属性中
针对选择框，传到后端的数据，应该设置value值，由value值决定
所有属性：
| 属性值 | 表现形式 |
|---|---|
| text | 普通文本输入框 |
| password | 密文密码输入框 |
| date | 日期输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| hidden | 隐藏输入框 |
| file | 文本选择框 |
重点介绍几个：
- submit：触发提交的动作
- button：普通按钮，没有实际的意义，但是可以通过js绑定事件实现自定义的动作
- reset：清空用户填写的表单信息
- radio：单选，可以通过
checked参数控制默认选择的选项 - file：获取用户上传的文件，需要修改form表单的参数，
method="post"，enctype="multipart/form-data" - disable：禁用该输入框
- value：设置默认值，提交数据时候的选项，以
key:value形式提交
select 下拉框标签
select标签中 一个个的 option标签就是一个个的下拉框的选项，
默认是单选，可以给select 标签加一个 multiple 参数就是多选
<p>省份：
<select name="city" id="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广东</option>
</select>
</p>
属性说明：
- multipe：默认是单选，添加此参数变为多选
- disabled：禁用，不能修改此框内的内容
- selected：默认选中该选项
- value：提交数据时候的选项，以key:value形式提交
textarea多行文本
用户可输入大段文本内容。
<p>自我介绍：
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
属性说明：
- name：名称
- cols：定义可输入行数
- rows：列数
- disabled：禁用
提交
能够触发form表单中提交数据的动作可以有两个标签完成：
- input：
input标签中 type="submit" 参数可以提交 - button：
button标签也可以提交
<input type="submit" value="提交按钮">
<button>提交</button>
Flask 结合form表单 初探
前端用form表单简单些注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--例子：注册-->
<h1>欢迎来到注册页面！</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="username">username：<input type="text" id="username"></label>
</p>
<p>
<label for="password">password：<input type="password" id="password"></label>
</p>
<p>性别：
<label for="">男 <input type="radio" name="gender" value="male" checked></label>
<label for="">女 <input type="radio" name="gender" value="female"></label>
</p>
<p>生日：
<input type="date">
</p>
<p>爱好：
<label for="">
篮球 <input type="checkbox" name="hobby" value="basketball">
足球 <input type="checkbox" name="hobby" value="football">
乒乓球 <input type="checkbox" name="hobby" value="pingpang" checked>
</label>
</p>
<p>省份：
<select name="city" id="">
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
<option value="3">广东</option>
</select>
</p>
<p>自我介绍：
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>文件：
<input type="file" name="myfile">
</p>
<p>隐藏框：
<input type="hidden">
</p>
<p>
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<button>提交</button>
</p>
</form>
</body>
</html>
Flask 插件安装
pip3 install Flask
# coding=utf-8
Flask代码
from flask import Flask, request
app = Flask(__name__)
@app.route('/index/', methods=['GET', 'POST']) # 装饰的函数就能够接收这两种请求
def index():
print(request.form) # 获取前端form表单提交过来的数据
return '收到了'
app.run() # Flask默认端口 5000
写好上述代码后，右键运行，在html表单的action属性中输入 127.0.0.1:5000/index
在给我们的简单的登录注册html页面 form表单的标签加上 name、value，提交之后，在服务端打印看到：
127.0.0.1 - - [13/Nov/2019 20:00:06] "GET /index/ HTTP/1.1" 200 -
ImmutableMultiDict([('gender', 'male'), ('hobby', 'basketball'), ('hobby', 'football'), ('hobby', 'pingpang'), ('city', '2'), ('info', '你好 ，我叫秦')])
127.0.0.1 - - [13/Nov/2019 20:06:40] "POST /index/ HTTP/1.1" 200 -
接收文件需指定
要指定 enctype="multipart/form-data" 来接收文件
CSS介绍以及基本选择器
层叠样式表，定义元素显示的样式，控制html标签样式。
浏览器按照我们定义的样式表格式，对文档进行格式化（渲染）。
css的注释：
/*css的注释*/
/*通常我们在写css的时候，都会单独写一个cs文件，里面只有css代码，然后通过link外部引用css文件实现网页渲染*/
/*通用样式*/
/*导航条样式*/
/*轮播图样式*/
CSS的语法结构：
选择器 {属性：属性值}
CSS的三种引入方式：
通过link标签引入外部的css文件（最正规的用法）
<head>
<meta charset="UTF-8">
<title>网页栏名字</title>
<link rel="stylesheet" href="css学习.css">
</head>
直接在html页面上的head标签内，通过style标签书写css代码
<head>
<meta charset="UTF-8">
<title>网页栏名字</title>
<style>
h1 {
background-color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
</body>
行内样式，在行内标签内通过style参数书写
<h1 style="background-color: red">一级标题</h1>
我们在渲染网页的时候，要怎么渲染，渲染的步骤？
我们需要先学习如何查找标签，然后通过标签来修改样式
基本选择器
- 元素(标签)选择器：标签 {属性：属性值}
- id选择器：#id {属性：属性值}
- 类选择器：.类名 {属性：属性值}
- 通用选择器：* {属性：属性值}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义网页标题</title>
<style>
/*让页面所有的span变成红色，标签选择器*/
span {
color: red;
}
/*id 选择器 标签选择器 #id值*/
#first_div span {
color: green;
}
/*类选择器 .类值*/
.first_p {
color: red;
}
/*通用选择器 **/
* {
color: red;
}
</style>
</head>
<body>
<p class="first_p">第一个P标签</p>
<span>第一个span标签</span>
<div id="first_div">第一个div标签
<span>第一个div标签里的span标签</span>
</div>
<p>第二个P标签
<span>第二个P标签里的span标签</span>
</p>
普通文本内容
<a href="">我是链接，点我点我</a>
</body>
</html>
组合选择器
- 后代选择器：标签 空格 后者标签，前者的标签下面的所有后者的标签样式全都修改。
- 儿子选择器：> 选择标签下面的第一个标签
- 弟弟选择器：~同级别的下面所有的标签，其他不修改
- 毗邻选择器：+紧挨着的标签样式会修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义网页标题</title>
<style>
/*后代选择器，只要在标签内部都算作该标签的后代*/
div span {
color: red;
}
/*儿子选择器*/
div>span {
color: green;
}
/*弟弟选择器*/
div~span {
color: yellow;
}
/*毗邻选择器，紧挨着的同级别下面的那一个*/
div+p {
color: crimson;
}
</style>
</head>
<body>
<span>span</span>
<span>span</span>
<div>div
<span>div里面的span</span>
<p>div里面的p
<span>div里面的p里面的span</span>
</p>
<span>div里面最下面的span</span>
</div>
<p>ppp</p>
<span>span</span>
<p>ppp</p>
<span>span</span>
</body>
</html>
属性选择器
- 任何标签都有自己的默认的属性，id 和 class
- 标签还支持自定义任何多的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义网页标题</title>
<style>
/*含有某个属性的标签*/
/*含有某个属性名并且属性值是...的标签*/
/*找P标签并且含有某个属性名并且属性值是...的标签*/
[password] {
color: red;
}
[username] {
background-color: red;
}
p[username] {
color: green;
}
div[password] {
color: yellow;
}
</style>
</head>
<body>
<p username="qinyj"> PPP</p>
<p username="jack"> PPP</p>
<span password="123">span</span>
<div password="456">div</div>
</body>
</html>
分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义网页的标题</title>
<style>
/*如果说我们想对文本内容，特定的一些文字做一些样式修改，那么这些文字又有很多属性和id*/
/*那么这时候我们可以用分组嵌套来对样式做修改*/
#d1,.c1,.c2 {
color: red;
}
</style>
</head>
<body>
<div id="d1">div</div>
<span class="c1">span</span>
<p class="c2">
p
</p>
</body>
</html>
#d1,.c1,.c2：三个标签内容的属性都选中，以 “,” 隔开，做样式的修改
伪类选择器
a 标签有四种状态：
- 没有被点击过
- 鼠标悬浮在上面
- 点击之后不松手
- 点击之后再回去
我们将input框鼠标点进去之后的那个状态 叫做 input获取焦点，即聚焦（focus）
鼠标一出去之后的状态叫做input框失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义网页的标题</title>
<style>
/*a {*/
/*font-size: 20px;*/
/*}*/
/*a 标签有四种状态：*/
/*1. 没有被点击过*/
/*2. 鼠标悬浮在上面*/
/*3. 点击之后不松手*/
/*4. 点击之后再回去*/
/*a标签内容，连接态*/
a:link {
color: red;
}
/*访问过后的状态，需要注意的是visited要放在link下面，hover上面*/
a:visited {
color: pink;
}
/*鼠标悬浮的时候的颜色*/
a:hover {
color: black;
}
/*鼠标点击的时候*/
a:active {
color: orange;
}
/*输入框背景色*/
input:focus {
background-color: orange;
}
/*鼠标悬浮在文字上的颜色*/
span:hover {
background-color: pink;
}
</style>
</head>
<body>
<a href="https://www.aliyun.com/?utm_content=se_1003074876">点我点我</a>
<input type="text">
<span>span</span>
</body>
</html>
伪元素选择器
可以通过 CSS 添加文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置第一个字体大小*/
p:first-letter {
font-size: 100px;
}
/*开头添加内容 和 文字的颜色*/
p:before {
content: "*";
color: red;
}
/*结尾添加内容 和 文字的颜色*/
p:after {
content: "?";
color: blue;
}
</style>
</head>
<body>
<p>
窗前明月光，
<br>
疑是地上霜，
<br>
举头望明月，
<br>
低头思故乡。
<br>
</p>
</body>
</html>
选择器优先级
选择器相同的情况下，引入方式不同
就近原则，谁离标签更近，就渲染谁的
选择器不同的情况下，
行内选择器 > id选择器 > 类选择器 > 元素选择器。
前端-form表单与CSS的更多相关文章
- 前端form表单与css
form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...
- 前端之form表单与css（1）
目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
- 基于JQuery的前端form表单操作
Jquery的前端表单操作: jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
- form表单和CSS
一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...
- form表单与CSS选择器和样式操作
form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...
- form表单，css简介，css选择器，css样式操作
form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
- form表单与css选择器
目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...
- javaWeb 中前端Form表单数据处理(手动拼json)
在前端我们会用到最多的就是form表单提交数据,在form表单中有很多都是自动将数据传到后台,然后通过实体来接受的,但是有的时候我们就是需要在前端就拿到这个Form表单的数据,这是我们就可以自己讲数据 ...
- （day43）form表单、css
目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...
随机推荐
- hexo next主题深度优化(三)，引入require.js,适配pjax。
文章目录 require.js的好处, hexo next中加入require.js 新建一个main.js作为所有js的入口 pjax的require.js实现 关于require js适配过程中报 ...
- nutch二次开发环境搭建
开发环境: ubuntu14.04 + jdk1.7 + eclispe +nutch1.7 1:解压下好nutch1.7 src 源码(wget http://archive.apache.org/ ...
- jQuery Ajax请求 .net 一般处理程序
初学ajax 一个简单的功能,调试了2个小时,代码如下虽然成功了 但是有错误 <!DOCTYPE html> <html> <head> <meta http ...
- windows下怎么给ubantu虚拟机全屏的处理
ubantu版本时16.04 windows下窗口太小需要设置 相信很多人在装虚拟机的时候,遇到了窗口过小不能自适应的问题.我也是查了好多资料,都说安装Vmware Tools即可解决,还有说修改分辨 ...
- 2019-8-31-dotnet-数组自动转基类数组提示-Co-variant-array-conversion-是什么问题
title author date CreateTime categories dotnet 数组自动转基类数组提示 Co-variant array conversion 是什么问题 lindexi ...
- sql (4) key and Join
新建表: "Persons" 表:Id_P LastName FirstName Address City1 Adams John Oxford Street London2 Bu ...
- 新知道一个 端对端加密 Signal protocol
看 socketio Sponsors 列表中的小蓝鸟,发现网站中有使用 x-jquery-tmpl [翻译]WhatsApp 加密概述(技术白皮书) 知道一个叫 Signal 协议 的端对端加密 端 ...
- Python自学:第五章 使用range( )创建数字列表
# -*- coding: GBK -*- number = list(range(1,6)) print(number) 输出为: [1, 2, 3, 4, 5] 2. # -*- coding: ...
- 使用ajax怎么请求跨域资源
1.ajax中添加“xhrFields”和“crossDomain”,如: $.ajax({ url: url, data: data, type: "post", xhrFiel ...
- 思维构造——cf1090D
/* 只要找到两个没有关系的点即可 */ #include<bits/stdc++.h> using namespace std; #define maxn 100005 long lon ...