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

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

輸入類控件
菜單類控件

輸入類組件 —— input

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

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

文本輸入框和密碼框

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

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用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">
  數(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ù)據(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屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。

如下示例：

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

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

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

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)文件上傳功能。

文本域 —— 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ū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。

下拉菜單和多選列表

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

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

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

<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)網(wǎng)站中使用，這為以后制作動態(tài)網(wǎng)站打下基礎(chǔ)。

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

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

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

TML 服務(wù)器控件是服務(wù)器可理解的 HTML 標簽。

HTML 服務(wù)器控件

ASP.NET 文件中的 HTML 元素，默認是作為文本進行處理的。要想讓這些元素可編程，需向 HTML 元素中添加 runat="server" 屬性。這個屬性表示，該元素將被作為服務(wù)器控件進行處理。

注釋：所有 HTML 服務(wù)器控件必須位于帶有 runat="server" 屬性的 <form> 標簽內(nèi)！

注釋：ASP.NET 要求所有 HTML 元素必須正確關(guān)閉和正確嵌套。

HTML 服務(wù)器控件	描述
HtmlAnchor	控制 <a> HTML 元素
HtmlButton	控制 <button> HTML 元素
HtmlForm	控制 <form> HTML 元素
HtmlGeneric	控制其他未被具體的 HTML 服務(wù)器控件規(guī)定的 HTML 元素，比如 <body>、<div>、<span> 等。
HtmlImage	控制 <image> HTML 元素
HtmlInputButton	控制 <input type="button">、<input type="submit"> 和 <input type="reset"> HTML 元素
HtmlInputCheckBox	控制 <input type="checkbox"> HTML 元素
HtmlInputFile	控制 <input type="file"> HTML 元素
HtmlInputHidden	控制 <input type="hidden"> HTML 元素
HtmlInputImage	控制 <input type="image"> HTML 元素
HtmlInputRadioButton	控制 <input type="radio"> HTML 元素
HtmlInputText	控制 <input type="text"> 和 <input type="password"> HTML 元素
HtmlSelect	控制 <select> HTML 元素
HtmlTable	控制 <table> HTML 元素
HtmlTableCell	控制 <td> 和 <th> HTML 元素
HtmlTableRow	控制 <tr> HTML 元素
HtmlTextArea	控制 <textarea> HTML 元素

多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計算結(jié)果。

HTML表單的一些基本原則

選擇適合于收集的數(shù)據(jù)類型和提供交互方式的控件。
清楚標記每一個控件，這樣用戶就可以理解其功能。
盡可能將標簽對齊。將控件的左邊緣對齊。
將相關(guān)的標簽分組，并且通過設(shè)計中使用空白將每一個分組分開。
表單上的控件順序應(yīng)該類似于用戶操作他們的順序。

創(chuàng)建基本HTML表單

首先創(chuàng)造一個基本的HTML大綱，包含表單控件；然后將控件進行合并（HTML表單必須包括一個提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個單獨的HTML頁面可以包含多個表單。

創(chuàng)建HTML結(jié)構(gòu)

包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。

<HTML>
  <HEAD>
  <TITLE>標題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁面中可以使用任何HTML標簽。基本的表單使用FROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數(shù)據(jù)，可以是絕對路徑或者相對路徑。

<FORM METHOD="method" ACTION="url"> 
  中間可以放置表單控件
  </FORM>

合并控件

兩個常用的基本控件：文本框和提交按鈕。

文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準確訪問其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號），單標簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標題。創(chuàng)建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按鈕：允許用戶將一個表單的內(nèi)容發(fā)送到服務(wù)器，一個HTML表單對應(yīng)應(yīng)該有一個提交按鈕。

示例：一個完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

使用多個表單

可以在一個HTML頁面中包含多個表單，注意下一個表單的FORM開始之前需要結(jié)束前一個FORM表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

創(chuàng)建表單控件

創(chuàng)建自定義的文本框

文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個最初顯示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

創(chuàng)建文本區(qū)域

文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時會滾動。COLS屬性指明可見文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標簽為雙標簽。

值	說明
off	禁止單詞換行但用戶可以輸入換行符強制換行
virtual/soft	各行顯示為換行，但是換行并沒有被發(fā)送到服務(wù)器
physica/hard	啟用了單詞換行

<inputarea name="" rows="" cols="" wrap="">

創(chuàng)建密碼框

創(chuàng)建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

創(chuàng)建復(fù)選框

取兩個值中的一個，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認情況會被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認發(fā)送on值。法如下：

<input type="checkbox" name="" checked value="">

創(chuàng)建單選按鈕

語法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

<input type="radio" name="" checked value="">

創(chuàng)建列表框

用戶可以選擇一個或者多個選項，它是一個滾動菜單。

<select name="" multipile size="">options go here</select>

name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們

列表框的單選行為可作為單選按鈕。

<option selected value="text"></options>

創(chuàng)建隱藏域

<input type="hidden" name="text"value="">

實現(xiàn)上傳文件的HTML表單

<input type="FILE" name="name" accept="time" value="text">

其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：

超文本標記語言文本 .html,.html text/html

　　普通文本：txt text/plain

　　word文檔：application/msword

　　RTF文本：rtf application/rtf

　　GIF圖形：gif image/gif

　　JPEG圖形：jpeg,

　　jpg： image/jpeg

　　au聲音文件：au audio/basic

　　MIDI音樂文件：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　壓縮文件.rar application/octet-stream

　　壓縮文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

整合營銷服務(wù)商

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

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

HTML表單的一些基本原則

創(chuàng)建基本HTML表單

創(chuàng)建表單控件

更多提交表單的信息

您的項目需求