HTML系列（九）：表單

1、表單標籤form

     表單標籤用於申明表單，定義採集數據的範圍，即<form>包含的數據將被提交到數據庫上，包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。

     表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。還能夠包含 menus、textarea、fieldset、legend 和 label 元素。

三個重要的屬性說明：

　　一、action指定該表單發送時接受操做的地址

　　二、method指定表單數據發送的方法。可選值:get、post。get發送則表單內的數據將附加到url後發送（不同意使用）。post則是在HTTP請求中發送。

　　三、enctype指定表單數據在發送的服務器以前如何編碼，特別注意的是，當含有上傳域時要設置編碼方式爲enctype="multipart/form-data"， 不然後臺沒法獲取到瀏覽器發送的文件數據。是設置表單的MIME編碼。默認狀況，這個編碼格式是application/x-www-form- urlencoded，不能用於文件上傳；只有使用了multipart/form-data，form裏面的input的值以2進制的方式傳過去。才能 完整的傳遞文件數據。FTP上傳大文件的時候，也有個選項是以二進制方式上傳。

enctype的三個選項值	描述
application/x-www-form-urlencoded	在發送前編碼全部字符（默認的編碼方式）
multipart/form-data	MIME編碼。以二進制的方式發送數據，當表單含有上傳域時，必須使用後臺才能獲取上傳的文件。
text/plain	以純文本形式發送

 

     完整的表單示例：

 

 1 <form name="input" action="html_form_action.php" method="post">
 2     <div class="login-item">
 3         <input type="hidden" id="savelogin" name="savelogin" value="0">
 4     </div>
 5     <div class="login-item">
 6         <label for="idInput" class="placeholder" id="idPlaceholder">郵箱: </label>
 7         <input class="formIpt formIpt-focus" tabindex="1" title="請輸入賬號" id="idInput" name="username" type="text" maxlength="50" value="" autocomplete="on">
 8     </div>
 9     <div class="login-item">
10         <label for="pwdInput" class="placeholder" id="pwdPlaceholder">密碼: </label>
11         <input class="formIpt formIpt-focus" tabindex="2" title="請輸入密碼" id="pwdInput" name="password" type="password">
12     </div>
13     <div class="login-item">
14         <label for="date" class="placeholder" id="pwdPlaceholder">日期: </label>
15         <input class="date formIpt-focus" tabindex="2" title="請輸入日期" id="date" name="date" type="date">
16     </div>
17     <div class="login-submit">
18         <button id="loginBtn" class="btn btn-main btn-login" tabindex="6" type="submit">登&nbsp;&nbsp;錄</button>
19         <button id="loginBtn" class="btn btn-main btn-login" tabindex="6" type="reset">重&nbsp;&nbsp;置</button>
20     </div>
21 </form>

 

     這裏用到了一個標籤label, label標籤不會向用戶呈現任何特殊效果，它的做用是爲鼠標用戶改進了可用性。若是你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該 label標籤相關連的表單控件上）。

     語法：

  <label for="控件id名稱">

     注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值必定要相同。

 

 

2、input標籤

     <input> 標籤用於蒐集用戶信息。根據不一樣的 type 屬性值，輸入字段擁有不少種形式。輸入字段能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

一、文本域

<input type="text" name="控件名稱" size="控件長度" maxlength="填寫最長字符數" value="文字字段默認值" />

二、密碼域

　　密碼跟文本框相似，可是在裏面輸入的內容顯示爲圓點。

<input type="password" name="控件名稱" size="控件長度" maxlength="填寫最長字符數" value="文字字段默認值" />

三、單選按鈕

<input type="radio" name="單選按鈕名稱" value="單選按鈕的取值" checked="checked" />

男人:<input type="radio" name="sex" value="male" /> <br /> 女人：<input type="radio" name="sex" value="female" /> 

     checked屬性表示該項被默認選中。

四、複選框

<input type="checkbox" name="複選框的名稱" value="複選框的值" checked="checked"/>

五、普通按鈕

<input type="button" name="按鈕名" value="按鈕上面的文字" onclick="處理程序"/>

六、重置按鈕

　　當點擊重置按鈕時，重置按鈕所在的表單將所有清空，而其餘表單不受影響。

<input type="reset" name="按鈕名" value="按鈕上面的文字" />

七、提交按鈕

　　當點擊提交按鈕時，瀏覽器將自動提交表單。

<input type="submit" name="按鈕名" value="按鈕上面的文字" />

八、隱藏域

     隱藏域在瀏覽器中並不顯示，僅僅爲保存一些不過重要的資料而存在，當用戶提交表單時隱藏域的內容會一塊兒提交。

<input type="hidden" name="隱藏域名稱" value="提交的值" />

九、文件域

     文件域在上傳文件時經常用到，它用於查找硬盤中的文件路徑，而後經過表單將選中的文件上傳。在發送電子郵件、上傳頭像、傳送文件時會看到這一控件。

<input type="file" name="文件域的名稱" />

十、圖片按鈕

     若是想用圖片做爲按鈕來提升網頁的美感，可使用圖像域建立圖像提交按鈕，這幅圖片即具備按鈕功能。

<input type="image" src="圖像地址" name="圖像域名稱" />

 

3、下拉列表select

     select 元素可建立單選或多選菜單。<select&> 元素中的 <option> 標籤用於定義列表中的可用選項。

     基本語法：

<select name="下拉菜單名稱">
    <option value="選項值" selected="selected">選項顯示內容</option>
    <option value="選項值">選項顯示內容</option> ...... </select>

     selected表示默認選項。

 

4、文本域textarea

     <textarea> 標籤訂義多行的文本輸入控件。文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（一般是 Courier）。

     能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

     提示：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。

     提示：能夠經過 <textarea> 標籤的 wrap 屬性設置文本輸入區內的換行模式。

　　　　　

     基本語法：

<textarea name="文本域名稱" value="文本域默認值" rows="行數" cols="列數">具體內容</textarea>