整合營銷服務商
電腦端+手機端+微信端=數(shù)據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據同步管理
免費咨詢熱線：
TML 表單用于收集不同類型的用戶輸入，它是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個部分，希望對大家學習有所幫助喲！
本文福利后臺回復【學習】即可獲得Python、HTML等編程學習資料
HTML 表單
表單使用表單標簽 <form> 來設置:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML 表單 - 輸入元素
多數(shù)情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。
如何在 HTML 頁面創(chuàng)建文本域？
用戶可以在文本域中寫入文本，參考代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表單本身是不可見的。并且注意一個文本字段的默認寬度是20個字符。</p>
</body>
</html>
運行結果為
如何創(chuàng)建 HTML 的密碼域？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>
</body>
</html>
運行結果如下
戳了解更多免費領取HTML試聽課~
單的 ASP.NET 頁面看上去就像普通的 HTML 頁面。
Hello RUNOOB.COM
在開始學習 ASP.NET 之前，我們先來構建一個簡單的 HTML 頁面，該頁面將在瀏覽器中顯示 "Hello RUNOOB.COM"：
Hello RUNOOB.COM! |
用 HTML 編寫的 Hello RUNOOB.COM
下面的代碼將以 HTML 頁面的形式顯示實例：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
</center>
</body>
</html>
如果您想親自嘗試一下，請保存上面的代碼到一個名為 "firstpage.htm" 的文件中，并創(chuàng)建一個到該文件的鏈接：firstpage.htm。
用 ASP.NET 編寫的 Hello RUNOOB.COM
轉換 HTML 頁面為 ASP.NET 頁面最簡單的方法是，直接復制一個 HTML 文件，并把新文件的擴展名改成 .aspx 。
下面的代碼將以 ASP.NET 頁面的形式顯示實例：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
</center>
</body>
</html>
如果您想親自嘗試一下，請保存上面的代碼到一個名為 "firstpage.aspx" 的文件中，并創(chuàng)建一個到該文件的鏈接：firstpage.aspx。
它是如何工作的？
從根本上講，ASP.NET 頁面與 HTML 是完全相同的。
HTML 頁面的擴展名是 .htm。如果瀏覽器向服務器請求一個 HTML 頁面，服務器可以不進行任何修改，就直接發(fā)送頁面給瀏覽器。
ASP.NET 頁面的擴展名是 .aspx。如果瀏覽器向服務器請求個 ASP.NET 頁面，服務器在將結果發(fā)回給瀏覽器之前，需要先處理頁面中的可執(zhí)行代碼。
上面的 ASP.NET 頁面不包含任何可執(zhí)行的代碼，所以沒有執(zhí)行任何東西。在下面的實例中，我們將添加一些可執(zhí)行的代碼到頁面中，以便演示靜態(tài) HTML 頁面和動態(tài) ASP 頁面的不同之處。
經典 ASP
Active Server Pages (ASP) 已經流行很多年了。通過 ASP，可以在 HTML 頁面中放置可執(zhí)行代碼。
之前的 ASP 版本（在 ASP.NET 之前）通常被稱為經典 ASP。
ASP.NET 不完全兼容經典 ASP，但是只需要經過少量的修改，大部分經典 ASP 頁面就可以作為 ASP.NET 頁面良好地運行。
如果您想學習更多關于經典 ASP 的知識，請訪問我們的 ASP 教程。
用經典 ASP 編寫的動態(tài)頁面
為了演示 ASP 是如何顯示包含動態(tài)內容的頁面，我們將向上面的實例中添加一些可執(zhí)行的代碼（紅色字體標識）：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
<p><%Response.Write(now())%></p>
</center>
</body>
</html>
<% --%> 標簽內的代碼是在服務器上執(zhí)行的。
Response.Write 是用來向 HTML 輸出流中寫東西的 ASP 代碼。
Now() 是一個返回服務器當前日期和時間的函數(shù)。
如果您想親自嘗試一下，請保存上面的代碼到一個名為 "dynpage.asp" 的文件中，并創(chuàng)建一個到該文件的鏈接：dynpage.asp。
用 ASP .NET 編寫的動態(tài)頁面
下面的代碼將以 ASP.NET 頁面的形式顯示實例：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
<p><%Response.Write(now())%></p>
</center>
</body>
</html>
如果您想親自嘗試一下，請保存上面的代碼到一個名為 "dynpage.aspx" 的文件中，并創(chuàng)建一個到該文件的鏈接：dynpage.aspx。
ASP.NET 對比經典 ASP
上面的實例無法演示 ASP.NET 與經典 ASP 之間任何的不同之處。
正如最后的兩個實例中，您看不出 ASP 頁面和 ASP.NET 頁面兩者之間的不同之處。
在下一章中，您將看到服務器控件是如何讓 ASP.NET 比經典 ASP 更強大的。
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數(shù)據 |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
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 還增加了多個新的輸入類型：
如下代碼：
<!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">
能夠在被提交時自動對電子郵件地址進行驗證<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>顯示效果：
單選和多選傳遞給后臺的數(shù)據是不一樣的，如下會看到地址欄中的數(shù)據，多選會發(fā)送多個值，后臺將會獲取一個數(shù)組形式的數(shù)據。
/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"，用于清除表單數(shù)據，也是一種特殊按鈕。
輸入數(shù)據
點擊重置按鈕后，表單數(shù)據清空
重置清空數(shù)據
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文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現(xiàn)文件上傳功能。
除了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 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：
<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選列表和多選按鈕類似，一樣為了節(jié)省空間，當數(shù)據選項比較多時，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項數(shù)" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項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鍵同時鼠標單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動態(tài)網站中使用，這為以后制作動態(tài)網站打下基礎。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網頁中使用窗口框架
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
