技術標籤：htmlhtml5

                   HTML知識點總結

一、什麼是form表單
  用於收集使用者資訊，如：登入、註冊等場景；所有要提交的資料都必須放在form標籤中。 一個完整的表單包含三個基本組成部分：表單標籤、表單域、表單按鈕。
二、關於form表單中的標籤以及屬性
(1)私有屬性
action：表單提交地址，提交之後跳轉到action所標記的地址。

<form action="2.表格.html"></form>

method:提交方法，有get和post兩種提交方法,預設為get。
get（預設）:

 username: <input type="text"  name="username" value=""  placeholder="請輸入真實姓名">
 

4.readonly：只讀模式，設定後無法修改輸入框的內容。
5.disabled：禁用狀態。
6.size：由於輸入框是單行的，所以只能設定寬度。
7.maxlength：限制輸入框最大輸入的字元個數。
8.select：下拉框
  私有屬性：
   size:設定每次下拉的項數
   multiple: 布林屬性 是否可以多選
   disabled:禁用
子元件:
   option：選項
   私有屬性
selected：預設選項.
9.optgroup 標籤經常用於把相關的選項組合在一起。
   分組option
  lable:名字

     <select name="" id="">
    <optgroup label="山西">
        <option value="">大同</option>
        <option value="">忻州</option>
        <option value="">太原</option>
    </optgroup>
    <optgroup label="江西">
        <option value="">九江</option>
        <option value="">南昌</option>
       
    </optgroup>
    <optgroup label="內蒙">
        <option value="">包頭</option>
        <option value="">呼和浩特</option>
        
    </optgroup>
</select>
 

10.label標籤為 input 元素定義標註（標記）。
  label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
  label 標籤的 for 屬性應當與相關元素的 id 屬性相同。
提示:“for” 屬性可把 label 繫結到另外一個元素。請把 “for” 屬性的值設定為相關元素的 id 屬性的值。

女<input type="radio" name="gender" value="women" id="women">
  <label for="women">
    女:
  </label><br>

11.required 屬性規定必須在提交之前填寫輸入域（不能為空否則無法提交）。
（3）關於input中的type屬性
text:單行文字框,通常如輸入使用者名稱用的是text。
password:密碼框 加密。
submit:提交按鈕（要和action一起用）
reset:重置按鈕。
image:圖片按鈕。
<input type="image" src="微信.jpg" height="50px" width="50px">
radio:單選框。
checkbox:多選框。

    <fieldset>
    <legend>
        多選區域
    </legend>
愛好:
籃球：<input type="checkbox"name="like">
足球: <input type="checkbox" name="like">
排球: <input type="checkbox" name="like" checkered value="paiqiu">
毽球: <input type="checkbox" name="like"><br>
</fieldset>

其中fildset為設定區域，checkered為預設選中，legend ：設定區域標題。
button:普通按鈕。
hidden:隱藏域。
file:檔案上傳按鈕。
url:識別是否為地址。
date：選擇日期。
color：選擇顏色框。
number：數字 step：按一下加多少 max:最大是多少。