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

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

輸入類控件
菜單類控件

輸入類組件 —— input

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

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

文本輸入框和密碼框

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

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

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

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">
  數字類型（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">
  能夠在被提交時自動對電子郵件地址進行驗證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

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

如下實例：

<!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>

顯示效果：

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

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

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

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

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

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

如下示例：

<!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”，用于提交表單內容，是一種特殊按鈕。

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

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

輸入數據

點擊重置按鈕后，表單數據清空

重置清空數據

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，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文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，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 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

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

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

多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：

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

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

如下代碼：

<!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鍵同時鼠標單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！

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

下篇：前端入門 —— 網頁中使用窗口框架

并發處理框架—— Tornado

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

相對于其他 Python 網絡框架，Tornado 有如下特點。

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

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

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

提供高效的內部 HTTP 服務器：雖然其他 Python 網絡框架（Django、Flask）也提供了內部 HTTP 服務器，但它們的 HTTP 服務器由于性能原因只能用于測試環境。而 Tornado 的HTTP服務器與 Tornado 異步調用緊密結合，可以直接用于生產環境。

完備的 WebSocket 支持：WebSocket 是 HTML5 的一種新標準，實現了瀏覽器與服務器之間的雙向實時通信。

因為 Tornado 的上述特點，Tornado 常被用作大型站點的接口服務框架，而不像 Django 那樣著眼于建立完整的大型網站，所以本章著重講解 Tornado 的異步及協程編程、身份認證框架、獨特的非 WSGI 部署方式。

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

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

相對于其他 Python 語言的 Web 框架而言，Flask 的特點可以歸結如下。

內置開發服務器和調試器

網絡程序調試是在將編制好的網站投入實際運行前，用手工或編譯程序等方法進行測試，修正語法錯誤和邏輯錯誤的過程。有經驗的開發者都知道，這是保證網站系統能夠正式應用的必要步驟。

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

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

單元測試是對最小軟件開發單元的測試，其重點測試程序的內部結構，主要采用白盒測試方法，由開發人員負責。單元測試的主要目標是保證函數在給定的輸入狀態下，能夠得到預想的輸出，在不符合要求時能夠提醒開發人員進行檢查。

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

使用 Jinja2 模板

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

完全兼容 WSGI 1.0 標準

WSGI（Web Server Gateway Interface）具有很強的伸縮性且能運行于多線程或多進程環境下，因為 Python 線程全局鎖的存在，使得 WSGI 的這個特性至關重要。WSGI 已經是 Python 界的一個主要標準，各種大型網路服務器對其都有良好的支持。WSGI 位于Web應用程序與 Web 服務器之間，與 WSGI 完全兼容使得 Flask 能夠配置到各種大型網絡服務器中。

基于 Unicode 編碼

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

底層自定義協議網絡框架——Twisted

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

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

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

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

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

企業級開發框架——Django

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

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

Django 框架的特點

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

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

集成數據訪問組件：Django 的 Model 層自帶數據庫 ORM 組件，使開發者無須學習其他數據庫訪問技術（dbi、SQLAlchemy 等）。

強大的 URL 映射技術：Django 使用正則表達式管理 URL 映射，因此給開發者帶來了極高的靈活性。

后臺管理系統自動生成：開發者只需通過簡單的幾行配置和代碼就可以實現完整的后臺數據管理 Web 控制臺。

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

Django 的組成結構

Django 是遵循MVC架構的Web開發框架，其主要由以下幾部分組成。

管理工具（Management）：一套內置的創建站點、遷移數據、維護靜態文件的命令工具。

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

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

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

表單（Form）：通過內置的數據類型和控件生成 HTML 表單。

管理站（Admin）：通過聲明需要管理的 Model，快速生成后臺數據管理網站。

*聲明：本文于網絡整理，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。

單標簽

常見的語句：

form：表單標簽格式

作用：用來收集用戶輸入信息如：登入、注冊、搜索商品等
action：開始網址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：單選框性別格式性別是單選,單選類型是radio,注意name要加上sex
checkbox：復選框
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>學歷

<option value="">請選擇學歷</option>

</select>

</p>

</p>

</form>

</body>

</html>

在線咨詢

上一篇：前端入門-css顏色和背景
下一篇：性能測試YSLOW前端調優23大規則（八）-JavaScript和CSS置于外部

您的項目需求

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

整合營銷服務商

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

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

并發處理框架—— Tornado

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

底層自定義協議網絡框架——Twisted

企業級開發框架——Django

您的項目需求