前端-form表單與CSS

時間 2019-12-02

標籤前端 form 表單 css 欄目 HTML 简体版

原文原文鏈接

目錄css

form表單

form表單可以獲取用戶的輸入的內容、選擇、上傳文件所有發送給後端。html

表單屬性

屬性	描述
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：控制數據提交的方式python

get：form表單默認是get請求
post：提交數據

label標籤

一般狀況下 input 標籤須要結合 label 標籤一塊兒使用。flask

<label for="username">username：<input type="text" id="username"></label>後端

在label標籤中綁定id值，以後點擊label標籤內的任意位置均可以自動選中輸入框。瀏覽器

input標籤

input 標籤就相似於前端的變形金剛，根據 type 參數的不一樣，展現不一樣的功能app

全部獲取用戶輸入的標籤，都應該有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>