整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數據 |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
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">
數字類型（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文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。
除了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 表單
下篇： 前端入門 —— 網頁中使用窗口框架
前面已經學習相關html大部分知識，基本上可以制作出簡單的頁面，但是這些頁面都是靜態的，一個網站如果要實現用戶的互動交流，這時表單就起到關鍵的作用，表單的用途很多，它主要用來收集用戶的相關信息，是網頁具有交互的功能。例如，用戶注冊登錄，留言等。
下面會詳細介紹表單的使用方法，有以下內容：
使用<form></form>標簽來創建一個表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。
語法代碼如下：
<form name="表單名稱" action="表單處理程序的服務地址" method="提交表單時所用的HTTP方法">
...... 表單控件......
</form>1、action —— 處理程序
這里的 action 屬性值表單提交的地址，就是表單收集好數據后要傳遞給遠程服務的地址，其地址可以是絕對路徑也可以是相對路徑，或者其它形式，如發送電子郵件。
使用表單發送電子郵件：
<form action="mailto:xxx@126.com">
...... 表單控件......
</form>提交到后臺程序地址：
<form action="action_page.php">
...... 表單控件......
</form>2、name —— 表單名稱
表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺處理程序時發生混亂，一般要設置一個名稱，且在同一頁面中最好是唯一的，不要和其它表單重復命名。
<form name="loginForm">
...... 表單控件......
</form>3、method —— 傳送數據方法
method 屬性用來定義處理程序使用那種方法來獲取數據信息，常用的有 get 和 post （http 協議定義的方法）。
<form name="loginForm" action="get 或 post">
...... 表單控件......
</form>何時使用 GET？
GET 最適合少量數據或不是很重要數據的提交，瀏覽器會設定容量限制，默認如何沒有設置method 屬性，表單則會使用get 方法。
當您使用 GET 時，表單數據在頁面地址欄中是可見的，會在表單提交的地址后面跟一個問號“?” ，問號后面是數據，以 名稱1=值1&名稱2=值2 形式發送到后臺程序。
地址欄會看到如下：
action_page.php?firstname=Mickey&lastname=Mouse關于 GET 的注意事項：
以名稱/值對的形式將表單數據追加到 URL
永遠不要使用 GET 發送敏感數據！（提交的表單數據在 URL 中可見！）
URL 的長度受到限制（2048 個字符）
對于用戶希望將結果添加為書簽的表單提交很有用
GET 適用于非安全數據，例如 Google 中的查詢字符串
何時使用 POST？
使用post 表單數據和url（表單提交地址）是分開發送的，在頁面地址欄中被提交的數據是不可見的，這樣安全性更好，用戶端會通知服務端獲取數據，所以這種情況沒有數據長度的限制，缺點是速度會慢些。
關于 POST 的注意事項：
將表單數據附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數據）
POST 沒有大小限制，可用于發送大量數據。
帶有 POST 的表單提交后無法添加書簽
4、enctype —— 編碼方式
enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。
<form enctype="value">有以下幾種值：
值 | 含義 |
application/x-www-form-urlencoded | 在發送前編碼所有字符（默認編碼方式） |
multipart/form-data | 不對字符編碼。 在使用包含文件上傳控件的表單時，必須使用該值。 |
text/plain | 以純文本的方式，空格轉換為 "+" 加號，但不對特殊字符編碼。 |
5、target —— 目標顯示方式
target 屬性規定在何處打開 action URL。表單的目標窗口通常用來顯示表單返回的信息，例如是否成功提交了表單，是否出錯等。
<form target="value">屬性值有以下：
值 | 描述 |
_blank | 在新窗口中打開。 |
_self | 默認。在表單當前的窗口中打開。 |
_parent | 在父窗口中打開。 |
_top | 在頂級窗口中打開。 |
framename | 在指定的框架窗口中打開。 |
看到這里是不是想的了之前學習超鏈接時候，a標簽也有同樣的屬性，這里差不多一個意思，只是用途不一樣。
這里的窗口有可能是框架 frame 或 浮動窗口 iframe ，后面會講到框架和浮動窗口，就是在一個頁面中可以嵌套一個子窗口。
什么是表單控件，就是收集數據的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。
如下代碼：
<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屬性，用于和其它控件區別，后臺程序將會以此名稱獲取其表單控件對應的vaule值。
下篇會介紹各種表單控件的使用，感謝關注。
上篇：前端入門——html 表格的使用
下篇：前端入門——html 表單控件使用
.槪念
用來收集用戶輸入的信息，定義采集數據的范圍，并且完成與用戶的基本交互的作用。
表單就是輸入框、單選框、復選框、按鈕、選項菜單等網頁元素，也稱表單元素。
2.語法
form標簽，所有表單元素都要放在form標簽中。
<form action = "#" method = "get">xx</form> <!-- # 是沒有數據時的占位--> from標簽屬性：
① action：設置發送數據的位置；
② method：用什么方式發送數據。
屬性值分為get和post：get，發送數據時直接顯示在url欄中，發
送數據量小，且不安全；post，直接通過服務器發送數據，用戶看不到過
程，且數據量較大。
3.表單元素
一般使用 input標簽：
<form action = "#" method>
<input type = "text" name = "age"/>
</form>input標簽屬性：
type屬性：設置當前輸入框的不同形態。值分別為：
password 密碼框，text輸入文字、字母、數字等
submit 提交按鈕，reset 重置按鈕
button 普通按鈕，checkbox 表單復選框
radio表單單選框。
name 屬性：給當前的表單元素數據起個名字，不能是中文和特殊符號。 （除了按鈕標簽外需要輸入數據的都要加name屬性）
value 屬性：當前表單元素的默認值，在按鈕標簽中會顯示在按鈕上，在選項框里必須有，否則后端看到為on。
例如，<input type = "radio" name = "sex" value = "男"/>，傳遞給后端數據為sex=男，如果不寫value，則顯示sex=on。
placeholder屬性：輸入框的提示信息。
maxlength屬性：設置輸入text和password輸入框的最大字符數。
size屬性：當type = "text"或"password"時，設置元素的寬度。
checked屬性：當type為radio或checkbox時，設置單選框或復選框的默認選中項。
4.擴展表單元素
如圖，select 標簽表示聲明下拉列表；option 標簽用于聲明列表項；selected 改變下拉列表默認選中項。
多文本域（textarea）：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
