前端入門-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ū)挾日紟琢?，比如上面定義了高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)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

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

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

言

前面已經(jīng)學(xué)習(xí)相關(guān)html大部分知識，基本上可以制作出簡單的頁面，但是這些頁面都是靜態(tài)的，一個網(wǎng)站如果要實現(xiàn)用戶的互動交流，這時表單就起到關(guān)鍵的作用，表單的用途很多，它主要用來收集用戶的相關(guān)信息，是網(wǎng)頁具有交互的功能。例如，用戶注冊登錄，留言等。

下面會詳細介紹表單的使用方法，有以下內(nèi)容：

表單標簽form的使用
表單控件使用

表單標簽 —— form

使用<form></form>標簽來創(chuàng)建一個表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。

語法代碼如下：

<form name="表單名稱" action="表單處理程序的服務(wù)地址" method="提交表單時所用的HTTP方法">
  ...... 表單控件......
  </form>

1、action —— 處理程序

這里的 action 屬性值表單提交的地址，就是表單收集好數(shù)據(jù)后要傳遞給遠程服務(wù)的地址，其地址可以是絕對路徑也可以是相對路徑，或者其它形式，如發(fā)送電子郵件。

使用表單發(fā)送電子郵件：

<form action="mailto:xxx@126.com">
  ...... 表單控件......
  </form>

提交到后臺程序地址：

<form action="action_page.php">
  ...... 表單控件......
  </form>

2、name —— 表單名稱

表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺處理程序時發(fā)生混亂，一般要設(shè)置一個名稱，且在同一頁面中最好是唯一的，不要和其它表單重復(fù)命名。

<form name="loginForm">
  ...... 表單控件......
  </form>

3、method —— 傳送數(shù)據(jù)方法

method 屬性用來定義處理程序使用那種方法來獲取數(shù)據(jù)信息，常用的有 get 和 post （http 協(xié)議定義的方法）。

<form name="loginForm" action="get 或 post">
  ...... 表單控件......
  </form>

何時使用 GET？

GET 最適合少量數(shù)據(jù)或不是很重要數(shù)據(jù)的提交，瀏覽器會設(shè)定容量限制，默認如何沒有設(shè)置method 屬性，表單則會使用get 方法。

當您使用 GET 時，表單數(shù)據(jù)在頁面地址欄中是可見的，會在表單提交的地址后面跟一個問號“?” ，問號后面是數(shù)據(jù)，以名稱1=值1&名稱2=值2 形式發(fā)送到后臺程序。

地址欄會看到如下：

action_page.php?firstname=Mickey&lastname=Mouse

關(guān)于 GET 的注意事項：
以名稱/值對的形式將表單數(shù)據(jù)追加到 URL
永遠不要使用 GET 發(fā)送敏感數(shù)據(jù)！（提交的表單數(shù)據(jù)在 URL 中可見?。?/p>
URL 的長度受到限制（2048 個字符）
對于用戶希望將結(jié)果添加為書簽的表單提交很有用
GET 適用于非安全數(shù)據(jù)，例如 Google 中的查詢字符串

何時使用 POST？

使用post 表單數(shù)據(jù)和url（表單提交地址）是分開發(fā)送的，在頁面地址欄中被提交的數(shù)據(jù)是不可見的，這樣安全性更好，用戶端會通知服務(wù)端獲取數(shù)據(jù)，所以這種情況沒有數(shù)據(jù)長度的限制，缺點是速度會慢些。

關(guān)于 POST 的注意事項：
將表單數(shù)據(jù)附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數(shù)據(jù)）
POST 沒有大小限制，可用于發(fā)送大量數(shù)據(jù)。
帶有 POST 的表單提交后無法添加書簽

4、enctype —— 編碼方式

enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼。

<form enctype="value">

有以下幾種值：

值	含義
application/x-www-form-urlencoded	在發(fā)送前編碼所有字符（默認編碼方式）
multipart/form-data	不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
text/plain	以純文本的方式，空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼。

5、target —— 目標顯示方式

target 屬性規(guī)定在何處打開 action URL。表單的目標窗口通常用來顯示表單返回的信息，例如是否成功提交了表單，是否出錯等。

<form target="value">

屬性值有以下：

值	描述
_blank	在新窗口中打開。
_self	默認。在表單當前的窗口中打開。
_parent	在父窗口中打開。
_top	在頂級窗口中打開。
framename	在指定的框架窗口中打開。

看到這里是不是想的了之前學(xué)習(xí)超鏈接時候，a標簽也有同樣的屬性，這里差不多一個意思，只是用途不一樣。

這里的窗口有可能是框架 frame 或浮動窗口 iframe ，后面會講到框架和浮動窗口，就是在一個頁面中可以嵌套一個子窗口。

表單控件的使用

什么是表單控件，就是收集數(shù)據(jù)的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。

如下代碼：

<form name="form1">
<div>用戶名：<input name="username" type="text" ></div>
<div>密碼：<input name="password" type="password" ></div>
<div>性別：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 車輛：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
請輸入文本
</textarea>
</div>
</select>
  </form>

效果如下：

這里顯示了一個基本表單，包含了輸入框，密碼框，單選，下拉菜單，文本域等組件，下面會按其使用類型介紹表單控件。

所有表單控件都一個name屬性和vaule屬性，用于和其它控件區(qū)別，后臺程序?qū)源嗣Q獲取其表單控件對應(yīng)的vaule值。

下篇會介紹各種表單控件的使用，感謝關(guān)注。

上篇：前端入門——html 表格的使用

下篇：前端入門——html 表單控件使用

.槪念

用來收集用戶輸入的信息，定義采集數(shù)據(jù)的范圍，并且完成與用戶的基本交互的作用。

表單就是輸入框、單選框、復(fù)選框、按鈕、選項菜單等網(wǎng)頁元素，也稱表單元素。

2.語法

form標簽，所有表單元素都要放在form標簽中。

<form action = "#" method = "get">xx</form>   <!-- # 是沒有數(shù)據(jù)時的占位-->

from標簽屬性：

① action：設(shè)置發(fā)送數(shù)據(jù)的位置；

② method：用什么方式發(fā)送數(shù)據(jù)。

屬性值分為get和post：get，發(fā)送數(shù)據(jù)時直接顯示在url欄中，發(fā)

送數(shù)據(jù)量小，且不安全；post，直接通過服務(wù)器發(fā)送數(shù)據(jù)，用戶看不到過

程，且數(shù)據(jù)量較大。

3.表單元素

一般使用 input標簽：

<form action = "#" method>
 			<input type  = "text" name = "age"/>
  </form>

input標簽屬性：

type屬性：設(shè)置當前輸入框的不同形態(tài)。值分別為：

password 密碼框，text輸入文字、字母、數(shù)字等

submit 提交按鈕，reset 重置按鈕

button 普通按鈕，checkbox 表單復(fù)選框

radio表單單選框。

name 屬性：給當前的表單元素數(shù)據(jù)起個名字，不能是中文和特殊符號。（除了按鈕標簽外需要輸入數(shù)據(jù)的都要加name屬性）

value 屬性：當前表單元素的默認值，在按鈕標簽中會顯示在按鈕上，在選項框里必須有，否則后端看到為on。

例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數(shù)據(jù)為sex=男，如果不寫value，則顯示sex=on。

placeholder屬性：輸入框的提示信息。

maxlength屬性：設(shè)置輸入text和password輸入框的最大字符數(shù)。

size屬性：當type = "text"或"password"時，設(shè)置元素的寬度。

checked屬性：當type為radio或checkbox時，設(shè)置單選框或復(fù)選框的默認選中項。

4.擴展表單元素

如圖，select 標簽表示聲明下拉列表；option 標簽用于聲明列表項；selected 改變下拉列表默認選中項。

多文本域（textarea）：

在線咨詢

上一篇：PHP基礎(chǔ)知識講座：第2課，如何在HTML頁面中嵌入PHP代碼
下一篇：用 Java 拿下 HTML 分分鐘寫個小爬蟲

您的項目需求

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

整合營銷服務(wù)商

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

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

言

表單標簽 —— form

表單控件的使用

您的項目需求