前端入門-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 表單

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

單的工作過程

表單的信息發送與處理過程可以簡單的進行圖示，如下圖。

以注冊會員為例，用戶在自己的電腦上打開相應的注冊表單頁面填寫信息，完成填寫后點擊提交按鈕，也就是圖中1所示過程。

這時瀏覽器會將這些信息發送給處理這些信息的服務器，服務器上有使用類似asp或php寫成的相應的處理程序，處理完成后，生成一個反饋信息，也就是2到3的過程。

然后服務器將處理后的信息發送給個人電腦，個人電腦在瀏覽器上通過一個新頁面來提示用戶處理結果。

這里就涉及到一個問題，一個網站會有針對不同用戶的信息注冊表單以及相應的信息處理程序，比如我們注冊頭條號就有"個人"、"企業"、"媒體"和"國家機構"的區分。如何使不同的表單找到相應的處理程序呢？在<form>標簽中，有一個action屬性就是為這個表單信息指定處理程序的。

<form>中的action屬性

調用程序

<form>的action屬性實際上就是為表單提示處理程序所在的路徑，如果程序和頁面在一個服務器中存儲，那使用相對路徑即可，如果在其他服務器，則要使用絕對路徑。示例代碼如下：

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

這段代碼中的"form_action.asp"程序和這個表單頁面在一個文件夾中，故直接寫名稱即可調用。

發送郵件

action屬性除了調用程序外，也可以發送郵件，示例代碼如下：

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件發送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20"><br />
電郵：<br /><input type="text" name="mail" value="yourmail" size="20"><br />
內容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="發送">
<input type="reset" value="重置">
</form>

這段代碼中。發送郵件的寫法是這樣的：action="MAILTO:someone@w3school.com.cn"，通過MAILTO:告訴瀏覽器，這里要發送郵件！然后輸入相應的郵箱地址，這樣就會把表單中的信息以郵件的形式發送到相應的郵箱中了。

大家可以把郵箱地址改成自己的郵箱試一下，瀏覽器會讓大家選擇發送郵件的程序。如圖所示：

使用這個功能我們可以寫一個簡單的郵件發送頁面，示例代碼如下：

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主題：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>

這樣的寫法大家可能會發現問題，即如果一個網站注冊用戶超過100人以后，靠這種手動輸入用戶郵箱的方法發送郵件簡直就是折磨人啊！

實際上，在網站中，我們會把會員或注冊用戶的郵箱存在數據庫中，通過調用數據庫中的用戶郵箱的程序語句來替換action中的具體郵箱地址即可，再通過程序，可以針對全部用戶或部分用戶進行群發信息。

其中，enctype屬性是向服務器聲明上傳信息的形式，也就是向服務器說明發送的數據到底是數字還是英文還是中文還是編程語句。專業一些的說法是"規定在發送表單數據之前如何對其進行編碼。"

全部屬性值有三個，如圖所示，大家可以簡要理解一下。

除此之外，我們還發現一個屬性叫做method（方法），通過上面的示例代碼可知，method屬性有兩個屬性值，一個是get一個是post，這是什么意思呢？

信息上傳的兩種方法

<form>中的method標簽即為表單信息指定相應的發送方法。

方法有兩種，一種叫get，這種方法通常用來發送簡短的且低安全要求的信息，特點是速度比較快。

post經常用來發送體積較大的信息，如果發送一些對安全性要求高的信息，html的官方說明中建議使用post方法。

我個人認為，現階段大家能記住這兩個方法的主要特點即可。這一篇的內容實際上也是前端學習者對服務器端的運行的了解內容。

下面為大家附上更為專業的講解，看不懂也沒關系，盡量讀，至少能被專業詞匯洗禮一下!

method 屬性

瀏覽器使用 method 屬性設置的方法將表單中的數據傳送給服務器進行處理。共有兩種方法：POST 方法和 GET 方法。

如果采用 POST 方法，瀏覽器將會按照下面兩步來發送數據。首先，瀏覽器將與 action 屬性中指定的表單處理服務器建立聯系，一旦建立連接之后，瀏覽器就會按分段傳輸的方法將數據發送給服務器。

在服務器端，一旦 POST 樣式的應用程序開始執行時，就應該從一個標志位置讀取參數，而一旦讀到參數，在應用程序能夠使用這些表單值以前，必須對這些參數進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數。

另一種情況是采用 GET 方法，這時瀏覽器會與表單處理服務器建立連接，然后直接在一個傳輸步驟中發送所有的表單數據：瀏覽器會將數據直接附在表單的 action URL 之后。這兩者之間用問號進行分隔。

一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務器只接受其中一種方法提供的數據。可以在 <form> 標簽的 method （方法）屬性中指明表單處理服務器要用方法來處理數據，使 POST 還是 GET。

POST 還是 GET？

如果表單處理服務器既支持 POST 方法又支持 GET 方法，那么你該選擇哪種方法呢？下面是有關這方面的一些規律：

如果希望獲得最佳表單傳輸性能，可以采用 GET 方法發送只有少數簡短字段的小表單。

一些服務器操作系統在處理可以立即傳遞給應用程序的命令行參數時，會限制其數目和長度，在這種情況下，對那些有許多字段或是很長的文本域的表單來說，就應該采用 POST 方法來發送。

如果你在編寫服務器端的表單處理應用程序方面經驗不足，應該選擇 GET 方法。如果采用 POST 方法，就要在讀取和解碼方法做些額外的工作，也許這并不很難，但是也許你不太愿意去處理這些問題。

如果安全性是個問題，那么我們建議選用 POST 方法。GET 方法將表單參數直接放在應用程序的 URL 中，這樣網絡窺探者可以很輕松地捕獲它們，還可以從服務器的日志文件中進行摘錄。如果參數中包含了信用卡帳號這樣的敏感信息，就會在不知不覺中危及用戶的安全。而 POST 應用程序就沒有安全方面的漏洞，在將參數作為單獨的事務傳輸給服務器進行處理時，至少還可以采用加密的方法。

如果想在表單之外調用服務器端的應用程序，而且包括向其傳遞參數的過程，就要采用 GET 方法，因為該方法允許把表單這樣的參數包括進來作為 URL 的一部分。而另一方面，使用 POST 樣式的應用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程，其中傳輸的內容不能作為傳統 <a> 標簽的內容。

以上內容來自W3school

今天的內容結束了，這一篇內容實踐的東西比較少，主要是閱讀與了解。

至此，HTML表單部分的講解就算告于段落了，如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

<html>
	<head> 
		標題 ---此處放置標題、導航、登錄等內容
		<!此處放置標題、導航、登錄等內容--->
	</head>
	<body> 
		<!此處放置頁面主要內容--->
		<! ：空格
		<: 小于號
		>: 大于號
		": 引號--->
		<p>第一段 世界大勢，合久必分，分久必合。</p>
		<hr/> <!表示單行橫線顯示--->
		<br/> <!表示換行--->
		<h1> hello world, html is easy</h1>
		<h2> hello world, html is easy</h2>
		<h3> hello world, html is easy</h3>
		<h4> hello world, html is easy</h4>
		<h5> hello world, html is easy</h5>
		<h6> hello world, html is easy</h6>
		<p>普通字體</p>
		<b>粗體</b> <i>斜體</i> <del>本文字已被刪除，請忽略</del>
		
		<p> hello     world</p>  <!段落標記--->
		<a href="http://www.baidu.com" target="_self"> 點擊進入百度</a>
		<br/>
		<img src="http://mysite.com/mypic.png" alt="網站作者照片">
		<h3> 普通無邊框表格：</h3>
		<table>
		<tr>
			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
		</tr>
		<tr>
			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
		</tr>
		</table>
		
		<h3>帶表頭，有邊框，有跨列單元:</h3>
		<table border="1">
		<tr>
			<th>head1</th> <th>head2</th> <th>head3</th>
		</tr>
		<tr>
			<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
		</tr>
		<tr>
			<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
		</tr>
		</table>
		
		<h3>三種列表的表達方式:</h3>
		<table cellpadding="2" cellspacing="2">
		<tr>
			<td>
				<ul><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ul>
			</td>
			<td>
				<ol><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ol>
			</td>
		</tr>
		</table>
		<dl>
			<dt>CPU</dt><dd>處理器</dd>
			<dt>MEM</dt><dd>內存</dd>
		</dl>
		
		<body bgcolor="#FF0000">
		<body bgcolor="RGB(255,0,0)">
		<body bgcolor="RED">
		
		<p>視頻</p>
		<object
			classid="clsid:d27sfsfstqwetsasasdfsdfs"
			codebase="http://fpdownload.macromedia.com/pub/shckwave/cabs/flash/swflash.cab">
			<embed src="flashfile.swf" width="300" height="200"></embed>
		</object>
		<br/>
		
		<p>音頻</p>
		<audio controls="crontrols">
			<source src="sample_song.mp3" type="audio/mp3" />
		</audio>
		
		<br/>
		<p>視頻</p>
		<video controls="controls"/>
			<source src="sample_video.mp4" type="video/mp4">
		</video>
		
	    <p>html表單---文本輸入</p>
		<table>
			<tr>
				<td>用戶名：</td>
				<td><input type="text" name="name"></td>
				<td>密碼：</td>
				<td><input type="password" name="pass"></td>
			</tr>
			<tr>
			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
			</tr>
		</table>
		
		<table>
			<tr>
				<td>性別：</td>
				<td>用戶名：</td>
				<td>男性<input type="radio" checked='checked' name="sex" value="male" /></td>
				<td>女性<input type="radio" checked='checked' value="female" /></td>
			</tr>
			<tr>
			<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
			</tr>
		</table>
		
	</body>

</html>

在線咨詢

上一篇：JavaScript上傳TXT文件并預覽
下一篇：pdf免費轉cad？這9種方法知道后就再也不愁了！

您的項目需求

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

整合營銷服務商

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

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

單的工作過程

HTML完整學習目錄

您的項目需求