HTML 表單的用法

一、表單

1. 表單的作用

HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。

2. 表單定義（<form></form>標簽）

HTML表單是一個包含表單元素的區域， 表單使用<form> 標簽創建。表單能夠包含 <a target="_blank" title="HTML input 元素，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含<a target="_blank" title="HTML menus、<a target="_blank" title="HTML textarea、<a target="_blank" title="HTML fieldset、<a target="_blank" title="HTML legend 和 <a target="_blank" title="HTML label 元素。注意，<form >元素是塊級元素，其前后會產生折行。

  1. <form action="reg.ashx" method="post">
2. <!--表單元素在這里-->
3. </form>

3. 表單屬性

action：規定當提交表單時，向何處發送表單數據。action取值為:第一，一個URL（絕對URL/相對URL），一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理。比如<form action="http://www.cnblogs.com/reg.ashx">,當用戶提交這個表單時，服務器將執行網址"http://www.cnblogs.com/"上的名為"reg.ashx"的一般處理程序。第二，使用mailto協議的URL地址，這樣會將表單內容以電子郵件的形式發送出去。這種情況比較少見的，因為它要求訪問者的計算機上安裝和正確設置好了郵件發送程序。第三，空值，如果action為空或不寫，表示提交給當前頁面。
　　method：該屬性定義瀏覽器將表單中的數據提交給服務器處理程序的方式。關于method的取值，最常用的是get和post。第一，使用get方式提交表單數據，Web瀏覽器會將各表單字段元素及其數據按照URL參數格式附在<form>標簽的action屬性所指定的URL地址后面發送給Web服務器；由于URL的長度限制，使用get方式傳送的數據量一般限制在1KB以下。第二，使用post方式，瀏覽器會將表單數據作為HTTP請求體的一部分發送給服務器。一般來說，使用post方式傳送的數據量要比get方式傳遞的數據量大；根據HTML標準，如果處理表單的服務器程序不會改變服務器上存儲的數據，則應采用get方式（比如查詢），如果表單處理的結果會引起服務器上存儲的數據的變化，則應該采用post方式（比如增刪改操作）。第三，其它方式（Head、PUT、DELETE、TRACE 或 OPTIONS等）。其實，最初HTTP標準對各種操作都規定了相應的method，但后來很多都沒有被遵守，大部分情況只是使用get或post就OK。關于更多的各種method方式的區別，由于我目前對HTTP協議了解的不多，不敢妄下結論。很多園友的討論也好像不是很深入，大家爭論比較多。
參見123

target：該屬性規定在何處顯示action屬性中指定的URL所返回的結果。取值有_blank（在新窗口中打開）、_self（在相同的框架中打開，默認值）、_parent（在父框架中打開）、_top（在整個窗口中打開）和framename（在指定的框架中打開）。
　　title：設置網站訪問者的鼠標放在表單上的任意位置停留時，瀏覽器用小浮標顯示的文本。
　 enctype：規定在發送到服務器之前應該如何對表單數據進行編碼。取值：默認值為 "application/x-www-form-urlencoded"，在發送到服務器之前，所有字符都會進行編碼（空格轉換為 "+" 加號，特殊符號轉換為 ASCII HEX 值）；“multipart/form-data”：不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
　　name:表單的名稱。注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和JavaScript中使用的。

二、 表單元素

  • 單行文本框<input type="text"/>（input 的type 屬性的默認值就是"text"）

<input type="text" name="名稱">

以下是單行文本框的主要屬性：
　size：指定文本框的寬度，以字符個數為單位；在大多數瀏覽器中，文本框的缺省寬度是20個字符。
　value：指定文本框的默認值，是在瀏覽器第一次顯示表單或者用戶單擊<input type="reset"/>按鈕之后在文本框中顯示的值。
　maxlength：指定用戶輸入的最大字符長度。
　readonly：只讀屬性，當設置readonly屬性后，文本框可以獲得焦點，但用戶不能改變文本框中的value。
　disabled：禁用，當文本框被禁用時，不能獲得焦點，當然，用戶也不能改變文本框的值。并且在提交表單時，瀏覽器不會將該文本框的值發送給服務器。

  • 密碼框<input type="password"/>

<input type="password" name="名稱">

  • 單選按鈕<input type="radio"/>
    　　使用方式：使用name相同的一組單選按鈕，不同radio設定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨的判斷。單選按鈕的元素值由value屬性顯式設置，表單提交時，選中項的value和name被打包發送，不顯式設置value。

<input type=“radio” name=“gender” value=“male”/>
<input type=“radio” name=“gender” value=“female”/>

  • 復選框<input type="checkbox"/>

使用復選按鈕組，即name相同的一組復選按鈕，復選按鈕表單元素的元素值由value屬性顯式設置，表達提交時，所有選中項的value和name被打包發送

不顯式設置value。復選框的checked屬性表示是否被選中，<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。

<input type =“checkbox” name=“language” value=“Java”/>
<input type =“checkbox” name=“language” value=“C”/>
<input type =“checkbox” name=“language” value=“C#”/>

  • 隱藏域<input type="hidden"/>

隱藏域通常用于向服務器提交不需要顯示給用戶的信息。

<input type=“hidden” name=“隱藏域”/>

  • 文件上傳<input type="file"/>

使用file，則form的enctype必須設置為multipart/form-data，method屬性為POST。

<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>

  • 下拉框<select>標簽

<select>標記創建一個列表框,<option>標記創建一個列表項,<select>與嵌套的<option>一起使用，共同提供在一組選項中進行選擇的方式。
　　將一個option設置為選中：<option selected>北京</option>或者<option selected="selected">北京</option>(推薦方式)就可以將這個項設定為選擇項。如何實現“不選擇”，添加一個<option value="-1">--不選擇--<option>，然后編程判斷select選中的值如果是-1就認為是不選擇。
　　select分組選項，可以使用optgroup對數據進行分組，分組本身不會被選擇，無論對于下拉列表還是列表框都適用。　　
　　<select>標記加上multiple屬性，可以允許多選(按CTRL鍵選擇)

select.jpg
  • 多行文本<textarea></textarea>
    多行文本<textarea>創建一個可輸入多行文本的文本框,<textarea>沒有value屬性,<textarea>文本</textarea>，cols=“50”、rows=“15”屬性表示行數和列數,不指定則瀏覽器采取默認顯示。
  1. <textarea name=“textareaContent” rows=“ 20“ cols=“50” >
  1. 多行文本框的初始顯示內容 3 </textarea>
  • <label></label>標簽
    在<input type=“text”>前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，<label for=“txt1” >內容</label>；”,然后按下alt+u(了解)。accesskey=“u“，label的另一個屬性。注意：要為被修飾的控件設置一個唯一的id。我覺得<label></label>標簽對<input type="radio"/>和<inputtype="checkbox"/>這兩個標簽是非常有用的。
  1. <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
  2. <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>
  3. <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label>
  • <fieldset></fieldset>標簽
    fieldset標簽將控件劃分一個區域，看起來更規整。
    1<fieldset>
    2 <legend>愛好</legend>
    3 <input type="checkbox" value="籃球" />
    4 <input type="checkbox" value="爬山" />
    5 <input type="checkbox" value="閱讀" />
    6 </fieldset>
  • 提交按鈕<input type="submit"/>
    當用戶單擊<inputt type="submit"/>的提交按鈕時，表單數據會提交給<form>標簽的action屬性所指定的服務器處理程序。中文IE下默認按鈕文本為“提交查詢”，可以設置value屬性修改按鈕的顯示文本。　
    <input type="submit" value="提交"/>
  • 重置按鈕<input type="reset"/>

當用戶單擊<input type="reset"/>按鈕時，表單中的值被重置為初始值。在用戶提交表單時，重置按鈕的name和value不會提交給服務器。

<input type=“reset” value=“重置按鈕"/>

  • 普通按鈕<input type="button"/>

普通按鈕通常用于單擊執行一段腳本代碼。

<input type="button" value="普通按鈕"/>

  • 圖像按鈕<input type="image"/>

圖像按鈕的src屬性指定圖像源文件，它沒有value屬性。圖像按鈕可代替<input type="submit"/>，而現在也可以通過css直接將<input type="submit"/>按鈕的外觀設置為一幅圖片。

<input type="image" src="bg.jpg" />

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 表單是一個包含表單元素的區域，而表單元素是運行用戶在表單中輸入信息的元素。通過表單，用戶可以向服務器提交數據，而服...
    饑人谷_半島王子閱讀 549評論 0贊 51
  • HTML表單的用法 表單表單作用：HTML表單用于搜集不同類型的用戶輸入。表單的工作機制訪問一個含有表單的頁面輸入...
    饑人谷_羅丹閱讀 290評論 0贊 0
  • HTML 表單用于搜集不同類型的用戶輸入。用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。HTM...
    FLYSASA閱讀 444評論 0贊 0
  • 1、關于form表單的基礎 form表單：是一個包含表單元素的區域；作用，用于包裹表單元素。 表單元素：是允許用戶...
    tangmengyun閱讀 711評論 1贊 1
  • Top Ecommerce Trends to inform your 2017 marketing strate...
    LC123456閱讀 927評論 0贊 0