前端入門-html 表單控件使用

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數(shù)字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時自動對電子郵件地址進(jìn)行驗(yàn)證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗(yàn)證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認(rèn)選擇的項(xiàng)，checked = “true”指選中那個選項(xiàng)，表單會將 checked = “true” 的選型值傳遞給后臺。

如下實(shí)例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺的數(shù)據(jù)是不一樣的，如下會看到地址欄中的數(shù)據(jù)，多選會發(fā)送多個值，后臺將會獲取一個數(shù)組形式的數(shù)據(jù)。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進(jìn)行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。

如剛才的登錄表單，提交后會返回結(jié)果：

重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。

輸入數(shù)據(jù)

點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空

重置清空數(shù)據(jù)

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實(shí)現(xiàn)文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢?，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當(dāng)要選擇的選型很多時，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標(biāo)單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動態(tài)網(wǎng)站中使用，這為以后制作動態(tài)網(wǎng)站打下基礎(chǔ)。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網(wǎng)頁中使用窗口框架

并發(fā)處理框架—— Tornado

Tornado 是使用 Python 編寫的一個強(qiáng)大的可擴(kuò)展的 Web 服務(wù)器。它在處理高網(wǎng)絡(luò)流量時表現(xiàn)得足夠強(qiáng)健，卻在創(chuàng)建和編寫時有著足夠的輕量級，并能夠被用在大量的應(yīng)用和工具中。Tornado 作為 FriendFeed 網(wǎng)站的基礎(chǔ)框架，于2009年9月10日發(fā)布，目前已經(jīng)獲得了很多社區(qū)的支持，并且在一系列不同的場合中得到應(yīng)用。除 FriendFeed 和 Facebook 外，還有很多公司在生產(chǎn)上轉(zhuǎn)向Tornado，包括 Quora、Turntable.fm、Bit.ly、Hipmunk 及 MyYearbook 等。

相對于其他 Python 網(wǎng)絡(luò)框架，Tornado 有如下特點(diǎn)。

完備的 Web 框架：與 Django、Flask 等一樣，Tornado 也提供了 URL 路由映射、Request 上下文、基于模板的頁面渲染技術(shù)等開發(fā) Web 應(yīng)用的必備工具。

是一個高效的網(wǎng)絡(luò)庫，性能與 Twisted、Gevent 等底層 Python 框架相媲美：提供了異步 I/O 支持、超時事件處理。這使得 Tornado 除了可以作為 Web 應(yīng)用服務(wù)器框架，還可以用來做爬蟲應(yīng)用、物聯(lián)網(wǎng)關(guān)、游戲服務(wù)器等后臺應(yīng)用。

提供高效 HTTPClient：除了服務(wù)器端框架，Tornado 還提供了基于異步框架的HTTP 客戶端。

提供高效的內(nèi)部 HTTP 服務(wù)器：雖然其他 Python 網(wǎng)絡(luò)框架（Django、Flask）也提供了內(nèi)部 HTTP 服務(wù)器，但它們的 HTTP 服務(wù)器由于性能原因只能用于測試環(huán)境。而 Tornado 的HTTP服務(wù)器與 Tornado 異步調(diào)用緊密結(jié)合，可以直接用于生產(chǎn)環(huán)境。

完備的 WebSocket 支持：WebSocket 是 HTML5 的一種新標(biāo)準(zhǔn)，實(shí)現(xiàn)了瀏覽器與服務(wù)器之間的雙向?qū)崟r通信。

因?yàn)?Tornado 的上述特點(diǎn)，Tornado 常被用作大型站點(diǎn)的接口服務(wù)框架，而不像 Django 那樣著眼于建立完整的大型網(wǎng)站，所以本章著重講解 Tornado 的異步及協(xié)程編程、身份認(rèn)證框架、獨(dú)特的非 WSGI 部署方式。

支持快速建站的框架——Flask

Flask 是 Python Web 框架族里比較年輕的一個，于 2010 年出現(xiàn)，這使得它吸收了其他框架的優(yōu)點(diǎn)，并且把自己的主要領(lǐng)域定義在了微小項(xiàng)目上。同時，它是可擴(kuò)展的，F(xiàn)lask 讓開發(fā)者自己選擇用什么數(shù)據(jù)庫插件存儲他們的數(shù)據(jù)。很多功能簡單但性能卓越的網(wǎng)站就是基于 Flask 框架而搭建的，比如 http://httpbin.org/ 就是一個功能簡單但性能強(qiáng)大的 HTTP 測試項(xiàng)目。Flask 是一個面向簡單需求和小型應(yīng)用的微框架。

相對于其他 Python 語言的 Web 框架而言，F(xiàn)lask 的特點(diǎn)可以歸結(jié)如下。

內(nèi)置開發(fā)服務(wù)器和調(diào)試器

網(wǎng)絡(luò)程序調(diào)試是在將編制好的網(wǎng)站投入實(shí)際運(yùn)行前，用手工或編譯程序等方法進(jìn)行測試，修正語法錯誤和邏輯錯誤的過程。有經(jīng)驗(yàn)的開發(fā)者都知道，這是保證網(wǎng)站系統(tǒng)能夠正式應(yīng)用的必要步驟。

Flask 自帶的開發(fā)服務(wù)器使開發(fā)者在調(diào)試程序時無須再安裝其他任何網(wǎng)絡(luò)服務(wù)器，比如 Tomcat、JBoss、Apache 等。Flask 默認(rèn)處于調(diào)試狀態(tài)，使得運(yùn)行中的任何錯誤會同時向兩個目標(biāo)發(fā)送信息：一個是 Python Console，即啟動Python 程序的控制臺；另一個是 HTTP 客戶端，即 Flask 開發(fā)服務(wù)器將調(diào)試信息傳遞給了客戶端。

與 Python 單元測試功能無縫銜接

單元測試是對最小軟件開發(fā)單元的測試，其重點(diǎn)測試程序的內(nèi)部結(jié)構(gòu)，主要采用白盒測試方法，由開發(fā)人員負(fù)責(zé)。單元測試的主要目標(biāo)是保證函數(shù)在給定的輸入狀態(tài)下，能夠得到預(yù)想的輸出，在不符合要求時能夠提醒開發(fā)人員進(jìn)行檢查。

Flask 提供了一個與 Python 自帶的單元測試框架 unitest 無縫銜接的測試接口，即 Flask 對象的 test_client 函數(shù)。通過 test_client 函數(shù)，測試程序可以模擬進(jìn)行 HTTP 訪問的客戶端來調(diào)用 Flask 路由處理函數(shù)，并且獲取函數(shù)的輸出來進(jìn)行自定義的驗(yàn)證。

使用 Jinja2 模板

將 HTML 頁面與后臺應(yīng)用程序聯(lián)系起來一直是網(wǎng)站程序框架的一個重要目標(biāo)。Flask 通過使用 Jinja2 模板技術(shù)解決了這個問題。Jinja2 是一個非常靈活的 HTML 模板技術(shù)，它是從 Django 模板發(fā)展而來的，但是比 Django 模板使用起來更加自由且更加高效。Jinja2 模板使用配制的語義系統(tǒng)，提供靈活的模板繼承技術(shù)，自動抗擊 XSS 跨站攻擊并且易于調(diào)試。

完全兼容 WSGI 1.0 標(biāo)準(zhǔn)

WSGI（Web Server Gateway Interface）具有很強(qiáng)的伸縮性且能運(yùn)行于多線程或多進(jìn)程環(huán)境下，因?yàn)?Python 線程全局鎖的存在，使得 WSGI 的這個特性至關(guān)重要。WSGI 已經(jīng)是 Python 界的一個主要標(biāo)準(zhǔn)，各種大型網(wǎng)路服務(wù)器對其都有良好的支持。WSGI 位于Web應(yīng)用程序與 Web 服務(wù)器之間，與 WSGI 完全兼容使得 Flask 能夠配置到各種大型網(wǎng)絡(luò)服務(wù)器中。

基于 Unicode 編碼

Flask 是完全基于 Unicode 的。這對制作非純 ASCII 字符集的網(wǎng)站來說非常方便。HTTP 本身是基于字節(jié)的，也就是說任何編碼格式都可以在 HTTP 中傳輸。但是，HTTP 要求在 HTTP Head 中顯式地聲明在本次傳輸中所應(yīng)用的編碼格式。在默認(rèn)情況下，F(xiàn)lask 會自動添加一個 UTF-8 編碼格式的 HTTP Head，使程序員無須擔(dān)心編碼的問題。

底層自定義協(xié)議網(wǎng)絡(luò)框架——Twisted

以上講到的 2個 Python Web 框架都是圍繞著應(yīng)用層 HTTP 展開的，而 Twisted是一個例外。Twisted 是一個用 Python 語言編寫的事件驅(qū)動的網(wǎng)絡(luò)框架，對于追求服務(wù)器程序性能的應(yīng)用，Twisted 框架是一個很好的選擇。

Twisted 是一個有著 10 多年歷史的開源事件驅(qū)動框架。Twisted 支持很多種協(xié)議，包括傳輸層的 UDP、TCP、TLS，以及應(yīng)用層的 HTTP、FTP 等。對于所有這些協(xié)議，Twisted 提供了客戶端和服務(wù)器方面的開發(fā)工具。

Twisted 框架的歷史悠久，其主要發(fā)行版本都以 Python 2 為基礎(chǔ)，最新的版本為基于 Python 2.7 的 Twisted-15.4.0。Twisted 社區(qū)正在開發(fā)基于 Python 3 的版本，但目前為止尚沒有基于 Python 3 的 Twisted 穩(wěn)定發(fā)行版。

Twisted 是一個高性能的編程框架。在不同的操作系統(tǒng)平臺上，Twisted 利用不同的底層技術(shù)實(shí)現(xiàn)了高效能通信。在 Windows 中，Twisted 的實(shí)現(xiàn)基于 I/O 完成端口（IOCP，Input/Output Completion Port）技術(shù)，它保證了底層高效地將I/O事件通知給框架及應(yīng)用程序；在 Linux 中，Twisted 的實(shí)現(xiàn)基于 epoll 技術(shù)，epoll是Linux下多路復(fù)用 I/O 接口 select/poll 的增強(qiáng)版本，它能顯著提高程序在大量并發(fā)連接中只有少量活躍的情況下的系統(tǒng) CPU 利用率。

在開發(fā)方法上，Twisted引導(dǎo)程序員使用異步編程模型。Twisted 提供了豐富的Defer、Threading等特性來支持異步編程。

企業(yè)級開發(fā)框架——Django

Django 于 2003 年誕生于美國堪薩斯（Kansas）州，最初用來制作在線新聞Web站點(diǎn)，于 2005 年加入了 BSD 許可證家族，成為開源網(wǎng)絡(luò)框架。Django 根據(jù)比利時的爵士音樂家 Django Reinhardt 命名，作者這樣命名 Django 意味著Django 能優(yōu)雅地演奏（開發(fā)）功能豐富的樂曲（Web應(yīng)用）。

它是當(dāng)前Python世界里最負(fù)盛名且最成熟的網(wǎng)絡(luò)框架。最初用來制作在線新聞的 Web 站點(diǎn)，目前已發(fā)展為應(yīng)用最廣泛的 Python 網(wǎng)絡(luò)框架。Django 的各模塊之間結(jié)合得比較緊密，所以在功能強(qiáng)大的同時又是一個相對封閉的系統(tǒng)，但是其健全的在線文檔及開發(fā)社區(qū)，使開發(fā)者在遇到問題時能找到解決方法。

Django 框架的特點(diǎn)

相對于 Python 的其他 Web 框架，Django 的功能是最完整的，Django 定義了服務(wù)發(fā)布、路由映射、模板編程、數(shù)據(jù)處理的一整套功能。這也意味著 Django模塊之間緊密耦合，開發(fā)者需要學(xué)習(xí) Django 自己定義的這一整套技術(shù)。Django的主要特點(diǎn)如下。

完善的文檔：經(jīng)過 10 多年的發(fā)展和完善，Django 有廣泛的應(yīng)用和完善的在線文檔，開發(fā)者遇到問題時可以搜索在線文檔尋求解決方案。

集成數(shù)據(jù)訪問組件：Django 的 Model 層自帶數(shù)據(jù)庫 ORM 組件，使開發(fā)者無須學(xué)習(xí)其他數(shù)據(jù)庫訪問技術(shù)（dbi、SQLAlchemy 等）。

強(qiáng)大的 URL 映射技術(shù)：Django 使用正則表達(dá)式管理 URL 映射，因此給開發(fā)者帶來了極高的靈活性。

后臺管理系統(tǒng)自動生成：開發(fā)者只需通過簡單的幾行配置和代碼就可以實(shí)現(xiàn)完整的后臺數(shù)據(jù)管理 Web 控制臺。

錯誤信息非常完整：在開發(fā)調(diào)試過程中如果出現(xiàn)運(yùn)行異常，則 Django 可以提供非常完整的錯誤信息幫助開發(fā)者定位問題，比如缺少xxx組件的配置引用等，這樣可以使開發(fā)者馬上改正錯誤。

Django 的組成結(jié)構(gòu)

Django 是遵循MVC架構(gòu)的Web開發(fā)框架，其主要由以下幾部分組成。

管理工具（Management）：一套內(nèi)置的創(chuàng)建站點(diǎn)、遷移數(shù)據(jù)、維護(hù)靜態(tài)文件的命令工具。

模型（Model）：提供數(shù)據(jù)訪問接口和模塊，包括數(shù)據(jù)字段、元數(shù)據(jù)、數(shù)據(jù)關(guān)系等的定義及操作。

視圖（View）：Django 的視圖層封裝了 HTTP Request 和 Response 的一系列操作和數(shù)據(jù)流，其主要功能包括URL映射機(jī)制、綁定模板等。

模板（Template）：是一套 Django 自己的頁面渲染模板語言，用若干內(nèi)置的tags和filters定義頁面的生成方式。

表單（Form）：通過內(nèi)置的數(shù)據(jù)類型和控件生成 HTML 表單。

管理站（Admin）：通過聲明需要管理的 Model，快速生成后臺數(shù)據(jù)管理網(wǎng)站。

*聲明：本文于網(wǎng)絡(luò)整理，版權(quán)歸原作者所有，如來源信息有誤或侵犯權(quán)益，請聯(lián)系我們刪除或授權(quán)事宜。

單標(biāo)簽

常見的語句：

form：表單標(biāo)簽格式

作用：用來收集用戶輸入信息如：登入、注冊、搜索商品等
action：開始網(wǎng)址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：單選框性別格式性別是單選,單選類型是radio,注意name要加上sex
checkbox：復(fù)選框
textarea：文本框
file：上傳文件
select：下拉選擇框
button：按鈕
reset：重置
submit：提交

詳解：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<input type="radio" name="sex" id="" />男

<input type="radio" name="sex" id="" />女

</p>

<p>

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />python

</p>

<p>學(xué)歷

</select>

</p>

</p>

</form>

</body>

</html>

在線咨詢

上一篇：前端入門-css顏色和背景
下一篇：性能測試YSLOW前端調(diào)優(yōu)23大規(guī)則（八）-JavaScript和CSS置于外部

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端入門-html 表單控件使用

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

并發(fā)處理框架—— Tornado

支持快速建站的框架——Flask

底層自定義協(xié)議網(wǎng)絡(luò)框架——Twisted

企業(yè)級開發(fā)框架——Django

您的項(xiàng)目需求