前端數據提交給后端之HTML表單簡單剖析

在開篇

什么是表單呢？當前端想要提交數據給后端，怎么搞？那么在前端開發中，表單是常用的手段，比如常見的場景有：登錄框、賬號注冊頁、主機信息錄入CMDB等等場景都是需要表單。那么在本篇中，筆者除了講一些基本的知識點，還會再結合后端的方式來演示如何接收表單提交的數據。希望這些小小的演示可以起到拋磚引玉的效果。

盤點HTML表單基礎

1. from元素

構建表單，主要是通過from元素，我們先來一個最簡單的小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息錄入CMDB</h3>
        <form>
            <label for="hostname">主機名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

通上面的小栗子可以知道，form表單的主要通途是用于收集用戶的輸入。在from表單里面，還包含著各種不同類型的input元素，比如我們上面小栗子中用到的文本（text）、提交按鈕（submit）。

input元素是表單里最重要的元素，它有很多type屬性，下面我們來總結下：

類型描述text文本輸入radio單選按鈕checkbox提交按鈕submit提交按鈕button可單擊按鈕

在上面小栗子中，除了input元素之外，不知道大家注意label元素沒有。label元素的主要用途是為input元素定義標簽，且用for屬性和input元素的id屬性進行綁定呢。

2. 單選按鈕

什么是單選按鈕？就是在多個選項中，你只能選其中1個，不能多選。下面我們看個小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經驗不足1年，僅從互聯網收集學習資料制定學習路線售賣盈利，從道德層面角度分析是否有問題？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">沒有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>問答題2（單選）：實際工作經驗不足1年的人員折騰的學習資料您覺得是否對你有幫助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">沒有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下圖：

上面的小栗子中，出了兩道問答題，均為單選題。那么，類似的需求都是可以使用輸入類型為radio來實現需要使用單選按鈕的場景。

3. 復選框

什么是復選框？復選框就是可以選擇多個選項，當需要多選的時候，使用復選框輸入類型就對了。看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>問答題1（單選）：某站長，工作經驗不足1年，僅從互聯網收集學習資料制定學習路線售賣盈利，從道德層面角度分析是否有問題？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">沒有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>問答題2（單選）：實際工作經驗不足1年的人員折騰的學習資料您覺得是否對你有幫助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">沒有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

上面的小栗子中，實現復選框的輸入類型是checkbox，這個是重點哦！

4. 提交按鈕

當有數據要提交給后端的時候怎么搞？如果后端是API服務，可以給它提交json。如果是前端頁面，就需要通過構建表單來獲取用戶的輸入。基于表單提交數據給后端，怎么提交？需要一個可以點擊的提交按鈕，那這個按鈕怎么來？先看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

輸入類型為submit，說明它就是提交按鈕，注意上面代碼type="submit"了嗎？

HTML表單重要屬性

1. Action屬性

在之前的例子中，前端表單需要將數據提交給后端，除了需要一個提交按鈕外，還需要action屬性。當點擊提交按鈕后，表單的數據該發到后端的哪個url進行處理，就是定義在action屬性中。接下來，我們結合前端和后端直接來個小實戰，后端代碼用Python的Flask框架。

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代碼：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代碼寫完后，我們接下來看看效果

輸入IP地址后，點擊提交

這個ok是后端返回的

后端接收到數據后，啥也沒做，只是做了簡單打印

這個小栗子很簡單，通過這個小栗子，是不是對action屬性的用法有了進一步的理解呢？

2. Method屬性

method屬性的用途是指定提交數據的http方法，通常有2個，get和post。接下來我們在上個小栗子的基礎上做個小改造，看下面代碼

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代碼：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

當前端輸入數據后，提交表單時，直接告訴你這是不允許的方法

在這個例子中，是因為前端的表單了指定了method為get請求，而后端接收數據的method規定了需要post請求，故所以出現這個問題。

下面我們改造一下后端代碼：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交數據需要post請求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表單中的method還是保持get請求，再次提交，后端的返回如下：

看到了嗎？后端判斷前端過來的請求是get還是post，很顯然，前端過來的請求是get，并且返回了非常友好的提示。

接下來我們繼續改造一下前端的代碼，將請求修改為post，代碼如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <h3>主機信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代碼也稍微改造一下，改變接收前端數據的方法

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交數據需要post請求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

輸入IP地址，并點擊提交

提交后，后端給前端返回了ok

接下來看下后端，后端啥也沒做，就獲取到表單的數據，然后打印了數據，并且打印了下數據類型

好了，關于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結合了后端的一丟丟知識，前端和后端的知識點以后都會慢慢講到哈！

HTML表單常用元素

1. 下拉列表

先來個前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運維開發應掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python語言</option>
                <option value="go">Go語言</option>
                <option value="shell">Shell語言</option>
                <option value="database">數據庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網絡</option>
                <option value="storage">存儲</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代碼：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交數據需要post請求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中選擇“Go語言”，并提交

后端啥也沒干，就只做了打印

2. 允許多選

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運維技術棧社區主頁</title>
    </head>
    <body>
        <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運維開發應掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python語言</option>
                <option value="go">Go語言</option>
                <option value="shell">Shell語言</option>
                <option value="database">數據庫</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網絡</option>
                <option value="storage">存儲</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代碼中，是使用multiple屬性來實現選擇多個值。

后端代碼的打印方式稍微做了些許調整：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交數據需要post請求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift鍵可進行多選

后端打印的效果圖下圖：

寫在最后

關于表單基礎知識點的講解就這么愉快的結束了，關于更多表單的元素、輸入屬性、輸入類型可自行查閱和實戰，筆者因時間有限就不一一演示。感謝您的閱讀，望多多關注我們、點贊、轉發！

本文轉載于（喜歡的盆友關注我們）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

行一行的吸引人

表單呀表單

W3C標準

World Wide WebConsortium(萬維網聯盟)

成立于1994.web技術領域,最具權威和影響力的國際中立性技術標準機構

http://www.w3.org/

http://www.chinaw3c.org/

W3C標準包括

結構化標準語言(HTML,XHTML,XML)

表現標準語言(CSS)

行為標準(DOM,ECMAScript)

編輯工具

>記事本

>Dreamweaver

>WebStorm (企業主流)

基本結構

<!doctype html>

<html>

<head>

網頁頭部

</head>

<body>

網頁主體

顯示的網頁主題內容

</body>

</html>

===========================================================

網頁的基本標簽

>標題標簽

>段落標簽

<p></p>

>換行標簽

>水平線標簽

<hr/>

>字體樣式標簽

>注釋以及特殊代碼

空格 &nbsp

大于號 &gt

小于號 &lt

引號 &quot

版權符號 &copy

>圖像標簽

常見的圖像格式:JPG GIF PNG BMP

>超鏈接標簽

<a href="path" target="_self ^ _blank">連接文本或頭像</a>

>錨鏈接標簽

實現由甲位置跳轉到乙位置

>功能性鏈接

===========================================================

行內元素和塊元素

行內元素排在一行

塊元素獨占一行<p></p> <h1></h1>

===========================================================

列表

>有序列表

<ul>

</ul>

>無序列表

<ul>

</ul>

>定義列表

<dl>

</dl>

===========================================================

表格

特點

簡單通用

結構穩定

基本結構

行

列

單元格

</tr>

<tr>

</tr>

</tr>

</table>

===========================================================

網頁中的媒體元素

如何實現在網頁上播放視頻和音頻

1,第三方自主開發的播放器

2,FLash

3,HTML5媒體元素

視頻元素

</video>

音頻元素

</oudio>

===========================================================

iframe框架

===========================================================

表單

表單元素

>單選按鈕 type="radio"

<from>

</from>

-----------------------------------------------------------

>復選框 type="checkbox"

<from>

<input name="名字" type="checkbox" value="選擇值1" checked默認選中/>提示1

<input name="名字" type="checkbox" value="選擇值2" checked默認選中/>提示2

<input name="名字" type="checkbox" value="選擇值3" checked默認選中/>提示3

</from>

-----------------------------------------------------------

>下拉列表框

</select>

-----------------------------------------------------------

按鈕

>重置按鈕type="reset"

>提交按鈕type="submit"

>button按鈕

>圖片按鈕 type="image"

>文件域 type="file"

>郵箱type="emil"

>網址type="url"

>數字 type="number"

>滑塊 type="range"

>搜索框 type="search"

表單元素的語法

method和action屬性

常見的表單元素

input(text、password、radio、checkbox、submit、reset、email、url、number、range、search)、select、textare

===========================================================

表單的高級應用

>隱藏<input name="名字" type="text" value="值1" readonly/>

>禁用<input type="submit" value="保存" disabled/>

>標注

===========================================================

表單的初級驗證

1,減輕服務器的壓力

2,保證數據的可行型和安全性

>初級驗證的方法

>placeholder屬性(提示信息)

>required屬性(必填項)

>pattern屬性(符合正則表達式)

頁編程之單選復選。

同學們好，這里是免費少兒編程知識分享。每天一行代碼誰都能學會！今天分享的知識是在網頁中插入單選框復選框和定義標注。顧名思義，單選框就是在一堆選項中單獨選擇一個，而復選框則是選擇多個選項。

定義標注是一種常見的表單控件，觸發表單對應的控件功能，讓用戶在使用表單時能夠有更好的體驗，用到的是Input標簽的type值radio Checkbox和label標簽。

先來看看今天實例的運行效果。網頁上一共有三段，第一段和第二段都是單選框，讓用戶選擇自己的職業，它們的區別在第一段只有點擊單選框空鍵才能夠使單選框處于選中的狀態，而第二段只要點擊某一項對應的文字即可讓單選框處于選中的狀態。

還順便演示了在一個網頁中插入多個單選框，而不互相干擾，一般來說單選框都是必選，且只能夠選擇中一個。所以第一段還演示了如何在頁面加載時就選中單選框的一項。第三個是復選框可以同時選中多個值，也可以一個值都不選，最后一個是輸出選擇的按鈕，點擊之后就會彈出對話框，使用JS取得選中的值并且顯示出來。就像這樣，效果各位同學都已經看到了。

現在我們來看看實現的代碼。單選框用到的是input標簽的type屬性值radio，它的常用屬性有Checked的，使用此項則默認為選中狀態。

·vivo 有定義每一項的返回值波紋定向了選選項組的名稱，所有lam相同的選項則為同一組選項，而要在頁面中插入不同的選項組，只需要將ame設置不同即可。

id 為唯一標識，常用來和labei標簽的For屬性搭配使用Disabled設置某一選項是否會被禁用。復選框用到的是input標簽的type屬性的Checkbox，它的屬性和radio是完全一樣的，沒有任何的差別，也沒有必要在這里再浪費一次時間。

剛才已經演示過，如果說讓用戶去點擊單選框或者復選框控件才能夠更改狀態是比較麻煩的事情，而點擊文字就能更改選項。

操作就會簡單很多，用到的也就是label標簽，label標簽為input元素定義標注也可以叫標記。label標簽不會向用戶展示任何特殊的效果，也就說它和普通文字是一模一樣的。不過它為鼠標用戶改進了可用性。

如果在label元素內點擊文本就會觸發該控件，也就是說當用戶選擇該標簽時瀏覽器會自動將焦點轉移到和標簽相關的表單控件上，用到的是被關聯控件的ID屬性和label的for屬性。就像這樣在for屬性里面填上單選框的ID值，點擊這個label的時候ID為F2-2(口誤)的單選框就得到了焦點改變了值。JS現在就不講了，看看就得了免得你們大。

今天的分享就到這里，希望各位同學下去能夠照著寫3遍，做到不看視頻也能夠寫出來所有的案例及相關文檔均可以向我獲取。下期見。網頁編程·服務端編程·數據庫·算法，點贊·關注。想學編程點關注吧。

在線咨詢

上一篇：寫給初學者的HTML和CSS編碼規范
下一篇：什么是HTML

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端數據提交給后端之HTML表單簡單剖析

在開篇

盤點HTML表單基礎

1. from元素

2. 單選按鈕

3. 復選框

4. 提交按鈕

HTML表單重要屬性

1. Action屬性

2. Method屬性

HTML表單常用元素

1. 下拉列表

2. 允許多選

寫在最后

您的項目需求