form表單標籤


 <form action = "提交到伺服器地址">
       <表單元素>
 </form>


常見的表單元素
     <input type = "text" name = "username"> 明文輸入框
     <input type = "password">暗文輸入框
     <input type = "radio" name = "互斥" checked = "預設選中">單選框
      <input type = "checkbox">多選框
      <input type = "button" value = "我是按鈕">普通按鈕
      <input type = "image" src = "images/img.jpg">圖片按鈕
      <input type = "reset" value = "清空">重置按鈕
      <input type = "submit">提交按鈕
          1.給form新增action屬性
          2.給表單元素新增name屬性
      <input type = "hidden">隱藏域
**********************************************************
label標籤
      文字和輸入框繫結（關聯）
    <form>
       1.關聯方式一（官方推薦）
       <label for = "account">賬號:</label><input type = "text" id = "account">
       2.關聯方式二
       <label>賬號:<input type = "text"></label>
    </form>
**********************************************************
select標籤 --- 下拉列表
   <select>
       <optgroup  label = "北京">//分類
            <option>通州區</option>
            <option>朝陽區 selected = "預設選中"</option>
        </optgroup>
   </select>


textarea標籤 ---定義多行輸入框
     <textarea cols = "2列" row = "5行">
     </textarea>
     cols  row  改變寬和高 但可以繼續輸入
     可以無限拉伸 用CSS resize屬性控制有無
**********************************************************
datalist標籤《瞭解 瀏覽器不支援》
    待選項內容
   請輸入車型：<input type = "text" list = "cars">
   <datalist id = "cars">
            <option>賓士</option>
            <option>寶馬</option>
            <option>奧迪</option>

   </datalist>

常用於選擇地區的列表
一、select標籤
格式：
<select>
 <option>列表資料</option>
注意點：
1、下拉列表不能輸入內容，但是可以直接在列表中選擇內容
2、可以通過給option標籤新增一個selected屬性來指定列表的預設值（比如在地區裡：北京 、廣州、上海中指定廣州為預設顯示值）
3.可以通過給option標籤新增包裹一層optgroup標籤來給下拉列表中的資料分類
如下方格式：
<select>
<optgroup label="廣州">


<option>番禹區</option>
<option>天河區</option>
<option>荔灣區</option>
<option>越秀區</option>
</optgroup>
二、textarea標籤
作用：定義一個多行(k跨行，類似br）換行輸入框
格式：<textarea>
內容
</textarea>
注意點：
1、預設情況下輸入框可以無限換行
2、預設情況下輸入框有自己的寬度和高度
3、可以通過cols和rows來指定輸入框的寬度和高度，
但是雖然指定了列數和行數，但是還是可以無限往下輸入。
4、預設情況下輸入框是可以手動拉伸大小的
如果不想手動拉伸，可以用css寫樣式,就不會拉伸了
<style type="text/css">
textarea{
      resize:none
            }

1.select標籤
作用：用於定義下拉列表


格式：
<select>
<option>列表資料</option>
</select>
注意點：
1.下拉列表不能輸入內容，但是可以直接在列表中選擇內容
2.可以通過給option標籤新增一個selected屬性來指定列表的預設值
3.可以通過給option標籤包裹一層optgroup標籤來給下拉列表中的資料分類

2.textarea標籤
作用：定義一個多行輸入框

格式：
<textarea>

</textarea>
注意點：
1.預設情況下輸入框可以無限換行
2.預設情況下輸入框有自己的寬度和高度

3.可以通過cols和rows來指定輸入框的寬度和高度，但是雖然指定了列數和行數，但是還是可以無限往下輸入