HTML之表單

目錄

• 表單的結構
• get方式與post方式
• 輸入
• 單行文本輸入框
• 提交按鈕和重置按鈕
• 密碼輸入框
• 複選框
• 單選按鈕
• 圖像按鈕
• 文本選擇輸入框
• 隱藏框
• 多行文本輸入框
• 下拉列表框
• 新增輸入元素
• 新增其餘元素

表單的結構

<form name="" action="" method="">
    <input>
    ...
    <select>...</select>
    <textarea>...</textarea>
</form>

（1）name：表單名稱，在爲表單命名以後就可使用腳本語言對它進行控制；
（2）action：動做屬性，指定處理表單信息的服務瀏覽器應用端。
（3）method：方法屬性，用於指定表單向服務器提交數據的方法，method的值能夠爲get或post，默認爲get。

get方式與post方式

一、get方法
使用 get 方法提交數據，瀏覽器將把表單中的各個值添加到 action 指定的URL（這二者之間用問號分割）並向服務器發送 get 請求，每一個值之間用符號「&」連接。IE地址欄最大的URL長度是2083個長度，最大能夠傳遞的數據長度2048個字符，因此用戶不要對數據量較多的表單使用 get 方法。且 get 限制表單的數據集的值必須爲ASCII字符。

二、post方法
若是採用 post 方法，瀏覽器將首先與 action 屬性中指定的表單處理服務器創建聯繫，一旦創建聯繫以後，瀏覽器就會按分段傳輸的方法將數據發送給服務器。與 get 方法不一樣的是， post 支持整個ISO10646字符集。

輸入

輸入<input>是一個單標籤，必須嵌套在表單標籤中使用，用於定義一個用戶的輸入項。

<form>
    <input name="" type="">
</form>

name屬性的參數值是相應程序中的變量名。Web服務器將把這條輸入信息的值賦予name屬性規定的變量。type屬性用於指定該輸入項提供的輸入方式，即指出用戶輸入的值的類型。在不一樣的輸入方式下，<input>標籤的格式略有不一樣，除了type以外的其餘5種屬性因type類型的不一樣而含義不一樣。

單行文本輸入框

當type="text"時，表示該輸入項的輸入信息是字符串。此時，瀏覽器會在相應的位置顯示一個文本框供用戶輸入信息。

<form>
    <input name="text" type="text" maxlength="" value="">
</form>

text文本框是一個只能輸入一行文字的輸入框。
（1）maxlength：設置單行輸入框能夠輸入的最大字符數；
（2）size：設置單行輸入框能夠顯示的最大字符數，這個值老是小於等於 maxlength 屬性的值，當輸入的字符數超過文本框的長度時，用戶能夠經過移動光標來查看超過的內容；
（3）value：文本框的值，能夠經過設置value屬性的值來指定當表單首次被載入時顯示在輸入框中的值；
（4）若是須要建立一個隨着表單提交一同傳遞的元素，但願用戶看到，卻又不容許編輯，能夠添加一個readonly屬性。
另外經過<label><input></label>標籤可讓鼠標點擊前面文字而到輸入框裏面。

提交按鈕和重置按鈕

<form><input name="submit" type="submit" value="提交"></form>
<form><input name="submit" type="reset" value="重置"></form>
其中name是能夠默認的，value用於顯示在按鈕上的值。

<form action="process.aspx" method="get">
    請輸入你的姓名：<input type="text" name="yourname">
    <input type="submit" name="submit" value="submit">
    <input type="reset" name="reset" value="reset">
</form>

密碼輸入框

<input type="password" name="password" maxlength="" size="">
除 type 屬性之外，其餘屬性和文本輸入框一致。

<form action="process.aspx" method="get">
    請輸入你的姓名：<input type="text" name="yourname"><br>
    請輸入你的密碼：<input type="password" name="password" maxlength="12" size="8"><br>
    <input type="submit" name="submit" value="submit">
    <input type="reset" name="reset" value="reset">
</form>

複選框

<input type="checkbox" name="" value="" checked>
因爲選項能夠不少，屬性 name 應該取不一樣的值。屬性 value 是用於提交給服務器的數據，因此其參數值必須與選項內容相同或基本相同，也能夠在邏輯上有聯繫。 checked 屬性用於默認選擇。

<form action="process.aspx" method="get">
    四大名著有如下幾本：<br>
    <input type="checkbox" name="三國演義" value="三國演義" checked>《三國演義》<br>
    <input type="checkbox" name="紅樓夢" value="紅樓夢">《紅樓夢》<br>
    <input type="checkbox" name="水滸傳" value="水滸傳">《水滸傳》<br>
    <input type="checkbox" name="老殘遊記" value="老殘遊記">《老殘遊記》<br>
    <input type="checkbox" name="西遊記" value="西遊記">《西遊記》<br>
</form>

單選按鈕

<input type="radio" name="radio" value="" checked>
因此屬性的 name 都應取相同的值；不一樣的選項其 value 屬性的值是不一樣的；checked 屬性爲默認勾選。

<form action="process.aspx" method="get">
    如下那本不是四大名著之一：<br>
    <input type="radio" name="radio" value="三國演義" checked="">《三國演義》<br>
    <input type="radio" name="radio" value="紅樓夢">《紅樓夢》<br>
    <input type="radio" name="radio" value="水滸傳">《水滸傳》<br>
    <input type="radio" name="radio" value="老殘遊記">《老殘遊記》<br>
    <input type="radio" name="radio" value="西遊記">《西遊記》<br>
</form>

圖像按鈕

<input type="image" name="image" scr="URL">

文本選擇輸入框

<form method="post" enctype="multipart/form-data">
    <input type="file" name="" size="">
</form>

把 type 屬性設置成 file 就能夠插入，在

標籤中，咱們必須把 method 屬性設置成 post ，另外， enctype 屬性確保文件採用正確的格式上傳。

<form action="process.aspx" method="post" enctype="multipart/form-data">
    <p>
        請選擇文件<br>
    <input type="file" name="uploadfile" size="40">
    </p>
    <div>
        <input type="submit" name="Send" value="上傳">
    </div>
</form>

隱藏框

若是用戶不想顯示某些選項而又不肯意將它們從文檔中刪去，多是應用程序須要的一些信息。把 type 屬性設置成 hidden ，就不會在頁面中顯示了。
<form><input type="hidden" name="hidden" value=""></form>

多行文本輸入框

<textarea></textarea>標籤能夠用來定義高度超過一行的文本輸入框。
<textarea name="" cols="" rows="" wrap="">初始的文本內容</textarea>
（1）name指定文本框的名字；

（2）rows設置多行文本輸入框的行數，瀏覽器會自動爲高度超過一行的文本輸入框添加垂直滾動條；

（3）cols設置多行文本輸入框的列數；

（4）wrap設置自動換行：
wrap="virtual"僅僅是顯示上的換行，而在實際的傳輸過程當中仍然以回車鍵爲準；
wrap="physical"不只僅在顯示上換行，還在實際的傳輸過程當中以此換行爲標準；
wrap="off"不會自動換行，且在內容超過文本域右邊界時，文本將向左滾動，必須按下回車鍵纔會換行。

<form action="process.aspx" method="post">
    <p>簡介：</p>
    <textarea name="簡介" cols="50" rows="10" wrap="virtual">內容</textarea><br>
    <input type="submit" name="submit" value="提交">
    <input type="reset" name="reset" value="重置">
</form>

下拉列表框

<form>
    <select name="" size="">
        <option></option>
        ......
        <option></option>
    </select>
</form>

（1）<select>是一個成對標籤，它其中用<option>標籤來定義各個選項內容。
name設定下拉列表名字；
size可選項，設置在列表中選項的數目。若是實際數量大於size屬性的數值， 瀏覽器會爲該下拉列表框添加滾動條，且size默認爲1；
multiple是否容許用戶多選。

（2）option是雙標籤，用來定義下拉列表框中的衆多選項。
value發送給服務器的信息
selected是否默認選擇

<form>
    <p>你最喜歡的運動：</p>
    <select name="sport">
        <option value="足球">足球</option>
        <option value="籃球">籃球</option>
        <option value="高爾夫">高爾夫</option>
    </select>
</form>

新增輸入元素

1. email類型
   用於包含e-mail地址的輸入域，在提交表單時會自動驗證email域的值，不用使用帶有正則表達式的腳原本驗證輸入域的值。根據瀏覽器的不一樣，email格式錯誤將會彈出不一樣的提示信息。
   <input type='email' name='userEmail'/>
2. url類型
   要求用戶必須輸入scheme://host.domain:post/path/filename的url地址，不然會報錯。
   <input type='url' name='userUrl'>
3. number類型

屬性	值	描述
max	number	指定數值最大值
min	number	指定數值最小值
step	number	指定步長（數值間隔），默認步長爲1
value	number	指定默認值

<input type='number' min='' max='' step='' name='userNumber'/>

1. range類型
   range類型用於肯定包含必定範圍內數字值的輸入域，和number類型一致，而且屬性相同。
   <input type='range' min='' max='' step='' name='userRange'/>
2. color類型
   color類型用於彈出顏色選擇器
   <input type='color' name='userColor'>
3. Date Picker類型
   用於彈出日期選擇器
   <input type='data' name='userDate'>
   支持如下的輸入類型：
   • date:選取日、月、年
   • month:選取月、年
   • week:選取周和年
   • time:選取時間（小時和分鐘）
   • datetime:選取時間、日、月、年（UTC時間）
   • datetime-local:選取時間、日、月、年（本地時間）
4. search類型
   search類型用於搜索域，例如站點搜索或

新增其餘元素

datalist類型
該元素功能是輔助表單文本框的內容輸入，用於生成隱藏的可選下拉菜單，至關於一個select元素。datalist下拉菜單包含的選項使用option標籤產生。顯示文本是<option>的label屬性值，而應該顯示文本的實際參數值爲value屬性值。另外，datalist元素須要與某文本框結合使用，其結合方式是經過將文本框的list屬性值設置爲datalist的id值，這樣就完成二者的綁定：

<!DOCTYPE html>
<html>
<head>
    <title>實例</title>
</head>
<body>
    <input type="text" list="datalist" name="cname"/>
    <datalist id="datalist">
        <option label="北京" value="北京">北京</option>
        <option label="南京" value="南京">南京</option>
        <option label="成都" value="成都">成都</option>
    </datalist>
</body>
</html>

屬性	描述
autocomplete	表單或文本框的自動完成功能
autofocus	頁面加載時自動得到焦點
form	所屬表單id
formaction	重寫表單action屬性
formentype	重寫表單entype屬性
formmethod	重寫表單method屬性
formnovalidate	重寫表單novalidate屬性
formtarget	重寫表單target屬性
list	新增表單元素datalist的屬性，規定了下拉菜單列表
min,max,step	部分新增imput類型元素的屬性，最大、最小以及步長
multiple	規定輸入域可選擇多個
pattern	驗證輸入域的模式（正則表達式）
placeholder	輸入域的提示文本，描述了當前輸入域所期待的值
required	輸入域必填項，不能爲空