HTML 表單4

4.1表單
什麼是表單？收集用戶填寫的信息並將其提交到後臺服務器。
（表單的標籤）
action屬性：指定提交的地址；
method屬性：指定提交的方式、get/post。
get和post方式的區別：長度的限制，不能大於2KB；安全性，get方式提交的數據會直接呈現在地址欄，敏感數據容易被截獲（（1）get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，一般被默認爲不受限制。get安全性非常低，post安全性較高。)
4.2文本框

     <input type="text">

  maxlength：指定文本框能接收的最大字符個數；
  size：指定文本框的大小（寬度）；
  value：指定初始值。

4.3密碼框

      <input type="password">

  密碼框和文本框是一樣的，文本框的屬性同樣屬用於密碼框，唯一不同的是密碼框是以掩碼的形式顯示內容、保證安全性。

4.4 label
的作用：
（1）可以單獨對其應用相應的格式；
（2）for屬性可以使之和某個關聯，即當單擊文本會激活對應的文本框。

<label for="userId">賬號：</label>
    <input id="userId" type="text" maxlength="10" size="20" value="abc">
    <br>
    <label for="password">密碼：</label>
    <input id="password" type="password" maxlength="6">

  Maxlength：輸入文字的長度
  Size：文本框的大小
  Value：默認的值
  在<label>中for和id屬於關聯的關係

4.5單選按鈕

<input type="radio" name="role">學生
<input type="radio" name="role" checked>教師
<input type="radio" name="role">管理員

如果需要將若干個單選按鈕編成一組（一組最多有一個被選中）需要設置相同的name屬性。如果需要默認選中摸個選項，需要加上checked屬性。（checked屬性後面）
標籤屬性的表示形式：
（1）鍵值對：屬性名=屬性值
Type=“text”、maxlength=“6”
（2）一些取值爲布爾類型的屬性直接使用屬性名
checked readonly
4.6多選按鈕

你的興趣愛好是：
<input type="checkbox" checked>音樂
<input type="checkbox" >閱讀
<input type="checkbox">遊戲
<input type="checkbox">電影
<input type="checkbox">睡覺

Checked默認選中

4.7提交按鈕

<input type="submit">

（1）點擊按鈕之後跳轉到form表單的Action。
（2）value屬性：value對應的值就是按鈕上顯示的文字。
（3）點擊按鈕：將form表單中的input中name屬性值（鍵）和用戶輸入的值組成鍵值對（或input標籤value屬性對應的值）。並拼接到form表單action屬性值的後面。

http://localhost:63342/untitled1/disizhang4/result.html?name=huadian&password=123456
http://localhost:63342/untitled1/disizhang4/result.html?name=huadian&password=123456&sex=1

4.8重置按鈕

<input type="reset" value="刷新">

（1）點擊按鈕，重置表單內部輸入框（單選按鈕）
（2）value屬性：value對應的值就是按鈕上顯示的文字。
4.9普通按鈕

<input type="button" value="登錄">

（1）點擊按鈕，沒有任何反應。
（2）value屬性：value對應的值就是按鈕上顯示的文字。
4.10圖片按鈕

<input type="image" src="圖片" alt="登錄">

（1）作用和submit按鈕是一樣的
（2）需要設置src的值，如果src對應的路徑沒有找到圖片，（並且有沒有設置alt屬性，按鈕顯示默認值“提交”，如果設置alt屬性則alt的值。（類似img標籤））。
4.11標籤
（1）內容可以是任意資源（eg：圖片、段落、視頻…）
（2）當button標籤放置在form內部，作用和submit一樣。
4.12文件選擇框

選擇你的頭像<input type="file" accept="application/pdf">
選擇你的頭像<input type="file" accept="image/jpeg">`
簡歷<input type="file" accept="application/pdf">
簡歷<input type="file" accept=".doc">

4.13下拉列表
使用下拉列表的好處
（1）節省頁面空間，使得頁面更簡潔；
（2）方便輸入；
（3）規範輸入

<form action="#" method="get">
    你來自：
    <select name="province">
    <option value="33">浙江</option>
    <option value="41">河南</option>
    <option value="32">江蘇</option>
    <option value="36">江西</option>
    </select>
    <input type="submit">
</form>

<select>標籤定義了一個下拉列表；
<option>標籤定義了一個下拉列表的選項；
<select>標籤的name屬性定義了提交的參數；
<option>標籤的內容定義了該選項顯示的文本，value屬性定義了選中該選項。
時傳遞的參數。
多選可通過設置multiple屬性來實現，Ctrl+單擊選擇多個

<select name="color" multiple>
    <option value="red">紅色</option>
    <option value="blue">藍色</option>
    <option value="green">綠色</option>
    <option value="yellow">黃色</option>
    <option value="black">黑色</option>
</select>

<size>標籤的size屬性定義了下拉列表框顯示的選項個數，當小於實際選項個數時，會自動增加一個滾動條

<select>
    <optgroup label="國產">
        <option value="紅旗">紅旗</option>
        <option value="byd">比亞迪</option>
        <option value="奇瑞">奇瑞</option>
    </optgroup>
    <optgroup label="德國系">
        <option value="benz">奔馳</option>
        <option value="bwm">寶馬</option>
        <option value="大衆">大衆</option>
    </optgroup>
    <optgroup label="日系" disabled>
        <option value="豐田">豐田</option>
        <option value="本田">本田</option>
        <option value="三菱">三菱</option>
        <!--disabled可顯示，但不可選-->
    </optgroup>
</select>

<optgroup>的label屬性定義分組顯示的文字，disabled設置該分組不能用。

4.14 textarea
Textarea標籤主要方便用戶輸入較多文字信息，rows屬性指定區域的行數，cols屬性指定區域的列數。

<textarea rows="3" cols="9"></textarea>

<textarea> 標籤定義一個多行的文本輸入控件。文本區域中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小。
4.15 fieldset
當信息較多時，可以考慮按照信息內容進行分組，達到表達清晰的

個人基本信息
姓名：<input type="text" name="name"> <br>
性別：<input type="text" name="name"> <br>
年齡：`

<fieldset>
    <legend>院校信息</legend>
    畢業院校：<input type="text" name="name">
    <br>
    畢業時間：<input type="text" name="name">
    <br>
    畢業專業：<input type="text" name="name">
    <br></fieldset>

<fieldset>
    <legend>企業信息</legend>
    工作單位：<input type="text" name="name">
    <br>
    公司職務：<input type="text" name="name">
    <br>
</fieldset>

Name:
Email:

fieldset 元素可將表單內的相關元素分組。
標籤將表單內容的一部分打包，生成一組相關表單的字段。 標籤沒有必需的或唯一的屬性。

Personalia:
Name:
Email:
Date of birth:
gend>邊框的命名
disabled 屬性是一個布爾屬性。
disabled 屬性規定應該禁用一組表單元素（一個 fieldset）。被禁用的 fieldset 不可用，也不可點擊。
可以對 disabled 屬性進行設置，使用戶在滿足某些條件時，才能使用輸入字段。然後，可使用 JavaScript 來刪除 disabled 值，使該 fieldset 變爲可用的狀態。
4.16隱藏域
當需要向服務區傳遞參數時，把不想讓客戶看到(看到看不到沒關係)的隱藏起來。

<form action="result1.html" method="get">
    <input type="hidden" name="stuNo" value="15020702" readonly>
    <br>
    原密碼：<input type="password" name="old">
    <br>
    新密碼：<input type="password" name="new">
    <br>
  <input type="submit" value="修改密碼">
</form>