前端入門(mén)-html 表單

言

前面已經(jīng)學(xué)習(xí)相關(guān)html大部分知識(shí)，基本上可以制作出簡(jiǎn)單的頁(yè)面，但是這些頁(yè)面都是靜態(tài)的，一個(gè)網(wǎng)站如果要實(shí)現(xiàn)用戶的互動(dòng)交流，這時(shí)表單就起到關(guān)鍵的作用，表單的用途很多，它主要用來(lái)收集用戶的相關(guān)信息，是網(wǎng)頁(yè)具有交互的功能。例如，用戶注冊(cè)登錄，留言等。

下面會(huì)詳細(xì)介紹表單的使用方法，有以下內(nèi)容：

表單標(biāo)簽form的使用
表單控件使用

表單標(biāo)簽 —— form

使用<form></form>標(biāo)簽來(lái)創(chuàng)建一個(gè)表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。

語(yǔ)法代碼如下：

<form name="表單名稱" action="表單處理程序的服務(wù)地址" method="提交表單時(shí)所用的HTTP方法">
  ...... 表單控件......
  </form>

1、action —— 處理程序

這里的 action 屬性值表單提交的地址，就是表單收集好數(shù)據(jù)后要傳遞給遠(yuǎn)程服務(wù)的地址，其地址可以是絕對(duì)路徑也可以是相對(duì)路徑，或者其它形式，如發(fā)送電子郵件。

使用表單發(fā)送電子郵件：

<form action="mailto:xxx@126.com">
  ...... 表單控件......
  </form>

提交到后臺(tái)程序地址：

<form action="action_page.php">
  ...... 表單控件......
  </form>

2、name —— 表單名稱

表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺(tái)處理程序時(shí)發(fā)生混亂，一般要設(shè)置一個(gè)名稱，且在同一頁(yè)面中最好是唯一的，不要和其它表單重復(fù)命名。

<form name="loginForm">
  ...... 表單控件......
  </form>

3、method —— 傳送數(shù)據(jù)方法

method 屬性用來(lái)定義處理程序使用那種方法來(lái)獲取數(shù)據(jù)信息，常用的有 get 和 post （http 協(xié)議定義的方法）。

<form name="loginForm" action="get 或 post">
  ...... 表單控件......
  </form>

何時(shí)使用 GET？

GET 最適合少量數(shù)據(jù)或不是很重要數(shù)據(jù)的提交，瀏覽器會(huì)設(shè)定容量限制，默認(rèn)如何沒(méi)有設(shè)置method 屬性，表單則會(huì)使用get 方法。

當(dāng)您使用 GET 時(shí)，表單數(shù)據(jù)在頁(yè)面地址欄中是可見(jiàn)的，會(huì)在表單提交的地址后面跟一個(gè)問(wèn)號(hào)“?” ，問(wèn)號(hào)后面是數(shù)據(jù)，以名稱1=值1&名稱2=值2 形式發(fā)送到后臺(tái)程序。

地址欄會(huì)看到如下：

action_page.php?firstname=Mickey&lastname=Mouse

關(guān)于 GET 的注意事項(xiàng)：
以名稱/值對(duì)的形式將表單數(shù)據(jù)追加到 URL
永遠(yuǎn)不要使用 GET 發(fā)送敏感數(shù)據(jù)?。ㄌ峤坏谋韱螖?shù)據(jù)在 URL 中可見(jiàn)！）
URL 的長(zhǎng)度受到限制（2048 個(gè)字符）
對(duì)于用戶希望將結(jié)果添加為書(shū)簽的表單提交很有用
GET 適用于非安全數(shù)據(jù)，例如 Google 中的查詢字符串

何時(shí)使用 POST？

使用post 表單數(shù)據(jù)和url（表單提交地址）是分開(kāi)發(fā)送的，在頁(yè)面地址欄中被提交的數(shù)據(jù)是不可見(jiàn)的，這樣安全性更好，用戶端會(huì)通知服務(wù)端獲取數(shù)據(jù)，所以這種情況沒(méi)有數(shù)據(jù)長(zhǎng)度的限制，缺點(diǎn)是速度會(huì)慢些。

關(guān)于 POST 的注意事項(xiàng)：
將表單數(shù)據(jù)附加在 HTTP 請(qǐng)求的正文中（不在 URL 中顯示提交的表單數(shù)據(jù)）
POST 沒(méi)有大小限制，可用于發(fā)送大量數(shù)據(jù)。
帶有 POST 的表單提交后無(wú)法添加書(shū)簽

4、enctype —— 編碼方式

enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。

<form enctype="value">

有以下幾種值：

值	含義
application/x-www-form-urlencoded	在發(fā)送前編碼所有字符（默認(rèn)編碼方式）
multipart/form-data	不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)，必須使用該值。
text/plain	以純文本的方式，空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼。

5、target —— 目標(biāo)顯示方式

target 屬性規(guī)定在何處打開(kāi) action URL。表單的目標(biāo)窗口通常用來(lái)顯示表單返回的信息，例如是否成功提交了表單，是否出錯(cuò)等。

<form target="value">

屬性值有以下：

值	描述
_blank	在新窗口中打開(kāi)。
_self	默認(rèn)。在表單當(dāng)前的窗口中打開(kāi)。
_parent	在父窗口中打開(kāi)。
_top	在頂級(jí)窗口中打開(kāi)。
framename	在指定的框架窗口中打開(kāi)。

看到這里是不是想的了之前學(xué)習(xí)超鏈接時(shí)候，a標(biāo)簽也有同樣的屬性，這里差不多一個(gè)意思，只是用途不一樣。

這里的窗口有可能是框架 frame 或浮動(dòng)窗口 iframe ，后面會(huì)講到框架和浮動(dòng)窗口，就是在一個(gè)頁(yè)面中可以嵌套一個(gè)子窗口。

表單控件的使用

什么是表單控件，就是收集數(shù)據(jù)的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。

如下代碼：

<form name="form1">
<div>用戶名：<input name="username" type="text" ></div>
<div>密碼：<input name="password" type="password" ></div>
<div>性別：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 車輛：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
請(qǐng)輸入文本
</textarea>
</div>
</select>
  </form>

效果如下：

這里顯示了一個(gè)基本表單，包含了輸入框，密碼框，單選，下拉菜單，文本域等組件，下面會(huì)按其使用類型介紹表單控件。

所有表單控件都一個(gè)name屬性和vaule屬性，用于和其它控件區(qū)別，后臺(tái)程序?qū)?huì)以此名稱獲取其表單控件對(duì)應(yīng)的vaule值。

下篇會(huì)介紹各種表單控件的使用，感謝關(guān)注。

上篇：前端入門(mén)——html 表格的使用

下篇：前端入門(mén)——html 表單控件使用

在開(kāi)篇

什么是表單呢？當(dāng)前端想要提交數(shù)據(jù)給后端，怎么搞？那么在前端開(kāi)發(fā)中，表單是常用的手段，比如常見(jiàn)的場(chǎng)景有：登錄框、賬號(hào)注冊(cè)頁(yè)、主機(jī)信息錄入CMDB等等場(chǎng)景都是需要表單。那么在本篇中，筆者除了講一些基本的知識(shí)點(diǎn)，還會(huì)再結(jié)合后端的方式來(lái)演示如何接收表單提交的數(shù)據(jù)。希望這些小小的演示可以起到拋磚引玉的效果。

盤(pán)點(diǎn)HTML表單基礎(chǔ)

1. from元素

構(gòu)建表單，主要是通過(guò)from元素，我們先來(lái)一個(gè)最簡(jiǎn)單的小栗子，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <h3>主機(jī)信息錄入CMDB</h3>
        <form>
            <label for="hostname">主機(jī)名：</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屬性，下面我們來(lái)總結(jié)下：

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

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

2. 單選按鈕

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <h3>問(wèn)答題1（單選）：某站長(zhǎng)，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問(wèn)題？</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">沒(méi)有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>問(wèn)答題2（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺(jué)得是否對(duì)你有幫助？</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">沒(méi)有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下圖：

上面的小栗子中，出了兩道問(wèn)答題，均為單選題。那么，類似的需求都是可以使用輸入類型為radio來(lái)實(shí)現(xiàn)需要使用單選按鈕的場(chǎng)景。

3. 復(fù)選框

什么是復(fù)選框？復(fù)選框就是可以選擇多個(gè)選項(xiàng)，當(dāng)需要多選的時(shí)候，使用復(fù)選框輸入類型就對(duì)了?？聪旅娲a：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <h3>問(wèn)答題1（單選）：某站長(zhǎng)，工作經(jīng)驗(yàn)不足1年，僅從互聯(lián)網(wǎng)收集學(xué)習(xí)資料制定學(xué)習(xí)路線售賣盈利，從道德層面角度分析是否有問(wèn)題？</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">沒(méi)有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>問(wèn)答題2（單選）：實(shí)際工作經(jīng)驗(yàn)不足1年的人員折騰的學(xué)習(xí)資料您覺(jué)得是否對(duì)你有幫助？</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">沒(méi)有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下圖：

上面的小栗子中，實(shí)現(xiàn)復(fù)選框的輸入類型是checkbox，這個(gè)是重點(diǎn)哦！

4. 提交按鈕

當(dāng)有數(shù)據(jù)要提交給后端的時(shí)候怎么搞？如果后端是API服務(wù)，可以給它提交json。如果是前端頁(yè)面，就需要通過(guò)構(gòu)建表單來(lái)獲取用戶的輸入?；诒韱翁峤粩?shù)據(jù)給后端，怎么提交？需要一個(gè)可以點(diǎn)擊的提交按鈕，那這個(gè)按鈕怎么來(lái)？先看下面代碼：

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

效果如下圖：

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

HTML表單重要屬性

1. Action屬性

在之前的例子中，前端表單需要將數(shù)據(jù)提交給后端，除了需要一個(gè)提交按鈕外，還需要action屬性。當(dāng)點(diǎn)擊提交按鈕后，表單的數(shù)據(jù)該發(fā)到后端的哪個(gè)url進(jìn)行處理，就是定義在action屬性中。接下來(lái)，我們結(jié)合前端和后端直接來(lái)個(gè)小實(shí)戰(zhàn)，后端代碼用Python的Flask框架。

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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)

前端和后端的代碼寫(xiě)完后，我們接下來(lái)看看效果

輸入IP地址后，點(diǎn)擊提交

這個(gè)ok是后端返回的

后端接收到數(shù)據(jù)后，啥也沒(méi)做，只是做了簡(jiǎn)單打印

這個(gè)小栗子很簡(jiǎn)單，通過(guò)這個(gè)小栗子，是不是對(duì)action屬性的用法有了進(jìn)一步的理解呢？

2. Method屬性

method屬性的用途是指定提交數(shù)據(jù)的http方法，通常有2個(gè)，get和post。接下來(lái)我們?cè)谏蟼€(gè)小栗子的基礎(chǔ)上做個(gè)小改造，看下面代碼

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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)

當(dāng)前端輸入數(shù)據(jù)后，提交表單時(shí)，直接告訴你這是不允許的方法

在這個(gè)例子中，是因?yàn)榍岸说谋韱瘟酥付薽ethod為get請(qǐng)求，而后端接收數(shù)據(jù)的method規(guī)定了需要post請(qǐng)求，故所以出現(xiàn)這個(gè)問(wèn)題。

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

# 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 '提交數(shù)據(jù)需要post請(qǐng)求'

if __name__ == '__main__':

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

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

看到了嗎？后端判斷前端過(guò)來(lái)的請(qǐng)求是get還是post，很顯然，前端過(guò)來(lái)的請(qǐng)求是get，并且返回了非常友好的提示。

接下來(lái)我們繼續(xù)改造一下前端的代碼，將請(qǐng)求修改為post，代碼如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <h3>主機(jī)信息</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>

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

# 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 '提交數(shù)據(jù)需要post請(qǐng)求'

if __name__ == '__main__':

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

輸入IP地址，并點(diǎn)擊提交

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

接下來(lái)看下后端，后端啥也沒(méi)做，就獲取到表單的數(shù)據(jù)，然后打印了數(shù)據(jù)，并且打印了下數(shù)據(jù)類型

好了，關(guān)于前端的action屬性和Method屬性就講到這里了。為了講解action和method，還結(jié)合了后端的一丟丟知識(shí)，前端和后端的知識(shí)點(diǎn)以后都會(huì)慢慢講到哈！

HTML表單常用元素

1. 下拉列表

先來(lái)個(gè)前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運(yùn)維開(kāi)發(fā)應(yīng)掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python語(yǔ)言</option>
                <option value="go">Go語(yǔ)言</option>
                <option value="shell">Shell語(yǔ)言</option>
                <option value="database">數(shù)據(jù)庫(kù)</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</option>
                <option value="storage">存儲(chǔ)</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 '提交數(shù)據(jù)需要post請(qǐng)求'

if __name__ == '__main__':

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

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

后端啥也沒(méi)干，就只做了打印

2. 允許多選

前端代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)主頁(yè)</title>
    </head>
    <body>
        <h2>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">運(yùn)維開(kāi)發(fā)應(yīng)掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python語(yǔ)言</option>
                <option value="go">Go語(yǔ)言</option>
                <option value="shell">Shell語(yǔ)言</option>
                <option value="database">數(shù)據(jù)庫(kù)</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">網(wǎng)絡(luò)</option>
                <option value="storage">存儲(chǔ)</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代碼中，是使用multiple屬性來(lái)實(shí)現(xiàn)選擇多個(gè)值。

后端代碼的打印方式稍微做了些許調(diào)整：

# 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 '提交數(shù)據(jù)需要post請(qǐng)求'

if __name__ == '__main__':

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

按住ctrl或者shift鍵可進(jìn)行多選

后端打印的效果圖下圖：

寫(xiě)在最后

關(guān)于表單基礎(chǔ)知識(shí)點(diǎn)的講解就這么愉快的結(jié)束了，關(guān)于更多表單的元素、輸入屬性、輸入類型可自行查閱和實(shí)戰(zhàn)，筆者因時(shí)間有限就不一一演示。感謝您的閱讀，望多多關(guān)注我們、點(diǎn)贊、轉(zhuǎn)發(fā)！

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

彈性布局（Flexbox）逐漸流行，越來(lái)越多人使用，因?yàn)樗鼘?xiě) CSS 布局真是太方便了。

三年前，我寫(xiě)過(guò) Flexbox 的介紹，但是有些地方寫(xiě)得不清楚。今天，我看到一篇教程，才意識(shí)到一個(gè)最簡(jiǎn)單的表單，就可以解釋 Flexbox，而且內(nèi)容還很實(shí)用。

下面，你只需要10分鐘，就可以學(xué)會(huì)簡(jiǎn)單的表單布局。

一、元素

表單使用<form>元素。

上面是一個(gè)空表單。根據(jù) HTML 標(biāo)準(zhǔn)，它是一個(gè)塊級(jí)元素，默認(rèn)將占據(jù)全部寬度，但是高度為0，因?yàn)闆](méi)有任何內(nèi)容。

二、表單控件

現(xiàn)在，加入兩個(gè)最常用的表單控件。

上面代碼中，表單包含一個(gè)輸入框（<input>）和一個(gè)按鈕（<button>）。

根據(jù)標(biāo)準(zhǔn)，這兩個(gè)控件都是行內(nèi)塊級(jí)元素（inline-block），也就是說(shuō)，它們默認(rèn)并排在一行上。

在線咨詢

上一篇：前端面試題：瀏覽器如何解析HTML文件？
下一篇：HTML基礎(chǔ)教程：顏色知多少

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端入門(mén)-html 表單

言

表單標(biāo)簽 —— form

表單控件的使用

在開(kāi)篇

盤(pán)點(diǎn)HTML表單基礎(chǔ)

1. from元素

2. 單選按鈕

3. 復(fù)選框

4. 提交按鈕

HTML表單重要屬性

1. Action屬性

2. Method屬性

HTML表單常用元素

1. 下拉列表

2. 允許多選

寫(xiě)在最后

您的項(xiàng)目需求