前端之css 验证form表单提交数据

一、用flask框架验证form表单提交数据

1、后端开发的主流框架

Django

Flask # 安装：pip install Flask

Tornado

2、Flask框架

简本

from flask import Flask
app = Flask(__name__)
app.run()

结果：生成ip和port
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

简单通信

from flask import Flask
app = Flask(__name__)
@app.route('/index',methods=['GET','POST'])
def xxx():
    return 'OK'
app.run()

结果：

向服务器提交form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>往服务端提交form表单</title>
</head>
<body>
<!--如果不写method="post" enctype="multipart/form-data" 则会默认method="get" enctype="application/x-www-form-urlencoded"-->
<!--method 参数：用来控制提交方式。form表单默认是get请求（method='get'）。你要指定成post请求（method='post'）-->
<!--             因为get请求能够携带参数 但是参数的携带方式是直接跟在url后面的。如：url?xxx=ooo&yyy=bbb&lll=ccc-->
<!--             特点: 1.数据全是明文 2.数据大小有限制   大概应该可能在4KB左右吧... 3.get请求不应该携带隐私信息-->
<!--enctype 参数：用来控制数据提交的编码格式。默认情况下form表单是不能够直接发送文件的。-->
<!--             如果你要发送文件，必须将该参数有默认的form-urlencode改为form-data-->
<form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">
<p>username: <input type="text" placeholder="用户名" name="username"></p>
<p>password: <input type="password" placeholder="密码" name="password"></p>
<p>gender:
    男: <input type="radio" name="gender" value="male">
    女: <input type="radio" name="gender" value="female">
</p>
<p>date: <input type="date" name="birthday"></p>
<p>hobby:
    篮球： <input type="checkbox" name="hobby" value="basketball">
    足球： <input type="checkbox" name="hobby" value="soccerball">
    打游戏： <input type="checkbox" name="hobby" value="playgames">
</p>
<p>省份：
    <select name="province" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
</p>
<p>男友：
    <select name="boyfriend" id="">
        <option value="鹿晗" selected>鹿晗</option>
        <option value="李现">李现</option>
        <option value="胡一天" selected>胡一天</option>
    </select>
</p>
<p>个人简介：
    <textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>文件：
    <input type="file" name="myfile">
</p>
<input type="submit" name="提交表单">
</form>

</body>
</html>
<!--input标签、：获取用户输入。该标签是一个行内标签-->
<!--     type 属性里：-->
<!--          text  表示普通文本-->
<!--          password  表示密文-->
<!--          date   表示日期-->
<!--          radio   表示多选一-->
<!--          checkbox  表示多选多-->
<!--          checked 表示默认选中某某-->
<!--          reset   表示重置-->
<!--          submit  表示触发form表单提交动作-->
<!--          file  表示获取文件-->
<!--           button  表示普通按钮-->
<!--     name 属性里：-->
<!--          类似字典里的key-->
<!--     value 属性里：-->
<!--          类似字典的value值-->


服务端的python代码

from flask import Flask
from flask import request                                                  (重要)
app = Flask(__name__)

@app.route('/index',methods=['GET','POST'])
def xxx():
    print(request.form)
    print(request.files)
    file_obj = request.files.get('myfile')     #这里get('myfile')对应html文件中的 <input type="file" name="myfile">  （重要）

    file_obj.save('yy.png')
    return 'OK'
app.run()


向服务器提交form表单结果：

不用flask向后端提交form表单

form表单：默认是urlencoded编码格式传输数据
urlencoded数据格式：username=jason&password=123
django后端针对该格式的数据会自动解析并帮你打包到request.POST中
formdata数据格式
django后端针对符合urlencoded编码格式数据(普通键值对)还是统一解析到request.POST中
而针对formdata文件数据就会自动解析放到request.FILES中

二、CSS

1、什么是CSS?

层叠样式表，就是用来调节标签的样式的

2、CSS注释

单行注释： /*单行*/

多行注释：/*注释1

注释2

注释的使用：css应该是一个独立的文件

/*这是小米首页的css样式文件*/
/*页面通用样式*/
/*顶部导航条样式*/
/*侧边菜单栏样式*/

3、CSS语法结构：选择器 {属性名1:属性值1;属性名2:属性值2;}

4、CSS三种引入方式：在html文件中引入css的三种方式

01、head内通过link标签引入外部css文件（最正规的书写方式）

既是：<link rel="stylesheet" href="mycss.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>

</body>
</html>

link标签引入css文件

02、head内 style标签内部直接书写css代码（为了教学可以使用）

既是：

                                 <style>
                                     p {
                                        color: red;
                                     }
                                 </style>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head内 style标签内部直接书写css代码（为了教学可以使用）</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>

</body>
</html>

head内部通过style直接写css代码

03、标签内部通过style属性直接书写对应的样式（不推荐）

既是：<p style="color: orange">学习前端啊，加油加油</p>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签内部通过style属性直接书写对应的样式</title>
</head>
<body>
<p style="color: orange">学习前端啊，加油加油</p>
</body>
</html>

标签内部通过style属性直接书写对应的样式

5、CSS学习流程：

01、如何查找标签？

001、基本选择器

1、标签选择器，也称元素选择器（既是：指定标签名）

意思是：将页面上所有的div标签内部的文本变成红色

<style>

div {

color:red;

}

<style>

2、类选择器（既是： .类属性值）

意思是：让所有具有c1类属性值的标签内部文本变成蓝色

<head>

<style>

.c1 {

color:red;

}

</style>

</head>

<body>

<span class="c1">珊珊出来接待一下</span>

</body>

3、id选择器（既是：#id属性的值）

意思是：将id为d1的标签内部文本内容改成绿色

<head>

<style>

#D2 {

color:red;

}

</style>

</head>

<body>

<span id="D2">珊珊出来接待一下</span>

</body>

4、通用选择器（既是：* 空格）

意思是：将页面上所有的标签统一修改样式

<head>

<style>

* {

color:red;

}

</style>

</head>

<body>

<span id="D2">珊珊出来接待一下</span>

<p id="d1" class="c1">来宾三位楼上请</p>

</body>

002、组合选择器

1、后代选择器（既是：标签名空格标签内的标签名）

意思是：空格表示div内部的所有span 没有层级限制

<style>

div span {

color:red;

}

</style>

2、儿子选择器（既是：标签名 > 标签内的标签名）

意思是：> 表示div内部的儿子span 有层级限制

<style>

div > span {

color:red;

}

</style>

3、毗邻选择器（既是：标签名1 + 标签名）

意思是：+ 表示紧挨着标签名1的下一个标签。他们是同级的标签

<style>

div + span {

color:red;

}

</style>

4、弟弟选择器（标签名1 ~ 标签名）

意思是：~ 表示同级别标签名1下面所有的标签

<style>

div ~ span {

color:red;

}

</style>

003、属性选择器（既是：[属性名] 或者 [属性名=属性值] 或者标签名[属性名=属性值]）

1、意思是：找到页面上所有具有username属性名的标签

<style>

[username] {

background-color: deeppink;

}

<style>

2、意思是：找到页面上属性名是username并且属性值叫jason的标签

<style>

[username=‘jason’] {

background-color: deeppink;

}

<style>

3、意思是：找到页面上属性名是username并且属性值叫jason的input标签

<style>

input[username=‘jason’] {

background-color: deeppink;

}

<style>

ps:html文件中的标签即可以有默认的属性，也可以自定义属性，并且支持多个。

004、分组与嵌套

1、同级层的标签

<style>

div,p,span{

color:green;

}

</style>

2、一个标签里

<style>

.c1,#d1,p{

color:green;

}

</style>

005、伪类选择器

以a标签举例

1、a:link 表示：在点击a链接之前的初始的状态（链接态）

<head>

<style>

a:link{

color:aqua;

}

</style>

</head>

<body>

</body>

2、a:hover 表示：鼠标悬浮在点击a链接处的状态（悬浮态）

<head>

<style>

a:hover{

color:black;

}

</style>

</head>

<body>

</body>

3、a:active 表示：鼠标在点击a链接的那一刻不松开时的状态（点击态）

<head>

<style>

a:active{

color:green;

}

</style>

</head>

<body>

</body>

4、a:visited 表示：点击a链接后，再返回原页面时链接的状态（被点击态）

<head>

<style>

a:visited{

color:gray;

}

</style>

</head>

<body>

</body>

5、input:focus 表示：在输入框输入内容的时候，输入框的状态（input聚焦）

<head>

<style>

input:focus{

background-color:red;

}

</style>

</head>

<body>

</body>

006、伪元素选择器

1、p:first-letter 表示 p标签中的文字中的第一个字大写

                           <head>

                           <style>
                               p:first-letter {
                                     color: red;
                                     font-size: 48px;
                                     }
                           </style>
                           </head>
                           <body>
                           <p>大家好，祝你们元旦快乐/p>
                           </body>

2、p:before 表示在 p标签中的文字的最前面加上content中的内容（实际上没有真正加进文本内，只是能呈现出效果来）

                           <head>

                           <style>
                               p:before {
                                     content:'同学们';
                                     color:red;
                                     }
                           </style>
                           </head>
                           <body>
                           <p>大家好，祝你们元旦快乐/p>
                           </body>

3、p:after 表示在 p标签中的文字的末尾加上content中的内容（实际上没有真正加进文本内，只是能呈现出效果来）

                           <head>

                           <style>
                               p:after {
                                     content:'???';
                                     color:red;
                                     }
                           </style>
                           </head>
                           <body>
                           <p>大家好，祝你们元旦快乐/p>
                           </body>

posted @ 2019-12-26 16:05 薛定谔的猫66 阅读(1410) 评论(0) 收藏举报

刷新页面返回顶部

薛定谔的猫66

前端之css 验证form表单提交数据

一、用flask框架验证form表单提交数据

二、CSS

公告