Day3 Form表單

　　　　　　　　　　　　　　　　Day3  Form表單

一.form表單 :提交數據
    表單在網頁中主要負責數據採集功能，它用<form>標籤訂義。
    用戶輸入的信息都要包含在form標籤中，點擊提交後，<form>和</form>裏面包含的數據將被提交到服務器或者電子郵件裏。
    全部的用戶輸入內容的地方都用表單來寫，如登陸註冊、搜索框.從而能採集客戶端信息,使網頁具備交互功能.

表單是由窗體和控件組成.能容納各類各樣的控件.
   (form之間不能相互嵌套,一個頁面能夠有多個form表單)

       

 

二. 一個完整的表單包含三個基本組成部分：表單標籤、表單域、表單按鈕。

1.表單標籤:(指<form>標籤自己，它是一個包含表單元素的區域，使用<form></form>定義)

      <form action＝"url" method="get|post" name="myform" ></form>  
      -name：表單提交時的名稱
      -action：提交到的地址
      -method：提交方式，默認爲get,  post

post和get區別：  (提交項目時用post)

• 數據提交方式，get把提交的數據url能夠看到，post看不到
• get通常用於提交少許數據，post用來提交大量數據
• get最多提交2Kb數據，post理論上沒有限制
•  get提交的數據在瀏覽器歷史記錄中，安全性很差

2.表單按鈕  :(用來提交<form>表單中的全部信息到服務器)
 1)單行文本框    <input type="text" >默認值是type="text"  

  用戶名: <input type="text"  name="userName"/>         (name爲當前input的名稱)                         　　

 

2)密碼框    <input type="password"/>　

密碼：<input type="password" name="psd"/>　

 

 3)單選按鈕    <input type="radio" name=」」/>         

性別：<input type="radio" name="sex"/>男          
     <input type="radio" name="sex"/>女
     <input type="radio" name="sex"/>人妖　

　　　　　　　　　　　　　　  (name屬性名稱相同劃分爲一組)　　

   

4)複選框    <input type="checkbox"/>  

1   愛好：<input type="checkbox"/>唱歌
2           <input type="checkbox"/>睡覺
3           <input type="checkbox"/>看電影
4            <input type="checkbox"/>王者
　

　　　　 (checked設置控件初始狀態是否被選中)

       
 5)隱藏域    <input type="hidden"/>  (不在頁面中展現)

 6)文件上傳    <input type="file"/>
        (當表單提交文件時  method  屬性值要爲  post )
        form要加  enctype="multipart/form-data" 屬性，這個屬性說明了咱們的文件以  二進制方式傳輸文件，由於咱們計算機自己最底層都是以二進制來顯示、傳輸。

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

 

 7)下拉框  <select>  標籤        

下拉框:
    <select>
        <optgroup value="1" name="beijing">北京</optgroup>　　　　　　( value指定控件初始值 )
        <option value="1" name="shanghai">上海</option>　　　　　　　　( size規定下拉列表中可見選項的數目[顯示幾行])
        <option value="1">深圳</option>　　　　　　　　　　　　　　　　　( disabled規定禁用下拉列表框 )
        <option value="1">廣州</option>　　　　　　　　　　　　　　　　　( selected用來指定默認的選項 )
    </select>

下拉列表框續:
<select name="" id="">
    <optgroup label="北京">
    <option value="1">東城區</option>
    <option value="2">西城區</option>
    <option value="3">海淀區</option>
    </optgroup>
    <optgroup label="河北省">
        <option value="4">石家莊</option>
        <option value="5">保定市</option>
        <option value="6">滄州市</option>
    </optgroup>
</select>　　　　　　

 

8)多行文本  <textarea cols="10" row="5"></textarea>  
            (漢字佔10個字節,5個英文字節)

<textarea cols="30" row="10">　　( col:文字區塊的寬度) ( row:文字區塊的行數,即高度 )

 

 9)提交按鈕  <input type="submit"/>
        1)<input type="submit" value="提交"/>　　       <button>提交</button>

 

10)普通按鈕<input type="button"/>   (沒有任何功能)
        1)<input type="button" value="沒有任何功能"/>
        2)<button type="button">沒有任何功能的按鈕</button>

11)重置按鈕<input type="reset"/>

    　1)<input type="reset" value="重置"/>　　
        2)<button type="reset">重置</button>　　

 

12)  <label></label> :(提高用戶體驗度,當點擊內容,對應按鈕生效 .  是input的描述,自己沒有特殊效果)
    性別:<input type="radio" name="sex" id="man"/><label for="man">男</label>
   　　 label的for屬性和input的id屬性名稱一致,綁定,通常配合單選按鈕,多選按鈕使用.
    

13)<fieldset>元素集

   <fieldset>
             <legend>健康信息</legend>
             身高：<input type="text" />
             體重：<input type="text" />
        </fieldset>

 

 
3.表單域屬性：
name=""  表單域的名稱
value=""  當前值
checked   默認被選中，通常配合單選按鈕和多選按鈕使用
disabled  禁用
readonly  只讀
selected   默認顯示，配合option使用

select的屬性：
size="number"  顯示的行數
multiple   能夠多選

*表單域和表單按鈕都屬於表單元素。

 

三.HTML新增type類型:
  1.郵箱

語法：<input type="email"/>　　　　注意：輸入的內容中必須包含"@"，"@"後面必須具備內容

 

  2.網址

語法：<input type="url"/>　　　　注意：輸入的內容中必須包含"http://"，後面必須有內容

  3.搜索

語法：<input type="search"/>　　　　功能描述：輸入搜索關鍵字的文本框,後面多了一個"x"

 
  4.數字
<input type="number"/> 
  屬性：min：當前域能接受的最小值    
   　　 max：當前域能接受的最大值
   　　 step：決定了域所接受值遞增或遞減的步長，默認爲1.

語法:<input type="number" min="0" max="30" step="5"/>　(只能輸入數字,後面有上下箭頭)

   5.顏色類型

語法：<input type="color"/>　　　　功能描述：預約義的顏色拾取控件

   6.電話：

語法：<input type="tel"/>    (pc端沒有樣式顯示,移動端開發顯示打電話界面,iOS就是蘋果電話界面)

   7.範圍(滑塊)

語法：<input type="range" min="0" max="100" step="20" value="20"/> (設置最小值0,最大值100,步長爲20,當前值20)

   8.日期,周,月

語法：<input type="date/week/month" />  

四.HTML新增屬性  (沒有等號"=""屬性等於屬性值)
    1.placeholder :默認提示  (顏色灰色)  

語法：<input type="text" placeholder="請輸入用戶名"/>

    2.multiple    eg:123@qq.com,111@136.com
做用：支持在一個域中輸入多個值，逗號(英文狀態下)隔開，通常配合郵箱和URL使用

語法：<input type="email" multiple/> 

   英文狀態下逗號隔開

    3.autofocus
做用：自動獲取焦點   (通常給表單第一個input獲取焦點)

語法：<input type="text" autofocus/>

    4.required      (必填項)
做用：防止域爲空提交表單時,防止用戶什麼都沒寫就提交

語法：<input type="text" required/>

    5.minlength和 maxlength     (漢字,標點符號都算一個字符,)
做用：定製元素容許的最小字符數和最大字符數,可用於用戶名,密碼.

語法：<input type="text" minlength="6" maxlength="18"/>  
            ( 輸入用戶名,最小長度爲6,最大長度爲18 )

   
     6.min和max
做用：定製元素容許的最小數字和最大數字,通常配合number和range使用.

語法：<input type="number" min=」0」 max=」100」/>