HTML第三章:表單

是蘿蔔啊發表於2018-07-27

第三章:表單

表單標籤form:<form></form>//相當於一張記錄使用者資訊的單子
    常用屬性:method:表單的提交方式,常用的值有兩個
                   (1)post:安全提交方式
                   (2)get:非安全提交方式
    舉例:<form method=”post”></from>
 
                     action:設定表單提交到哪
    舉例:<form method=”post” action=”提交到的頁面地址”></form>

表單中包含表單元素inout標籤,用來讓使用者輸入內容
需要注意表單元素要寫在form標籤之間,不要寫在form外面

常用的表單元素:
   (1)<input type=”text”/>:文字框,可以輸入內容
            表單元素還可以設定預設值value屬性:value=”123″

   (2) <input type=”password”/>:密碼框,輸入的內容會隱藏
            每個表單元素一定要設定name屬性,name屬性用來標識表單元素的名字

   (3)<input type=”subimt” value=”提交”/>:提交按鈕,點選後會提交表單
            表單元素通過type設定是什麼型別的輸入框或按鈕

   (4)<input type=”reset”value=”重置”/>:重置按鈕, 點選會讓表單中的輸入框回到初始狀態

   (5)<input type=”radio” name=”sex” value=”男”/>:單選按鈕,
            同一組單選按鈕只能選擇一個,使用name來分組,比如性別:name都是sex,如果name值不同,說明不是同組。提交的時候提交的是value值,

   (6) <input type=”checkbox” name=”like”value=”swim”/>多選框,使用name分組,可以多選,提交的時候提交的是value值

            ps: 單選按鈕和多選按鈕可以通過設定checked屬性來設定預設選中項

 

   (7)<select name=”year”>
              <option value=”1″>列表項1</option>
              <option value=”2″>列表項2</option>
              <option value=”3″>列表項3</option>
            </select>年
           列表框,通過下拉框選擇列表項,提交的時候提交的是value值, 通過設定列表項的selected屬性來設定預設選中項

   (8)<input type=”image” src=”圖片路徑”/>圖片按鈕
      讓按鈕變成圖片的樣子,點選會提交表單

   (9)<input type=”button” value=”顯示文字”/>普通按鈕
      一個沒有任何作用的按鈕,以後會很常用
      注意:不設定type屬性的話,預設type屬性為text

   (10)<textarea rows=”顯示的行數” cols=”顯示的列數”/></textarea>文字域,可以顯示多行內容或者輸入

   (11)<input type=”file”/>檔案域,可以選擇一個檔案上傳
       上傳檔案還需要設定form標籤中的enctype屬性為multipary/form-data.

   (12)<input type-“email”/>郵箱框,必須輸入一個正確的郵箱格式才可以提交表單
       錯誤會有提示

   (13)<input type=”url”/>網址框,必須輸入一個完整的網址,列如:http://www.baidu.com
   
   (14)<input type=”number” max=”最大數字” min=”最小數字”step=”合法倍數”/>數字框,只能輸入數字,
       輸入其他字元就提交不了表單。
   
   (15)<input type=”range” max=”最大值”min=”最小值” setp=”增量”/>滑塊,可以左右滑動
 
   (16)<input type=”search”/>搜尋框,不同瀏覽器會有你不同的樣式顯示

   (17)<input type=”color”/>可以選擇顏色

   (18)<input type=”datetime”/>格式為時間格式的輸入框

表單初級驗證:placehoder提示內容,require非空判斷
                         pattern正規表示式驗證
         栗子:<input type=”text” placehoder=”請輸入姓名”/>
                   <input type=”text” require/>//這個輸入框提交時不能為空
 

表單的高階應用:
       隱藏域:<input type=”hidden” name=”hid” value=””/>
                  隱藏域是使用者看不到的內容,可以用來區分表單,

       只讀:<input type=”text” readonly/>
                  設定只讀屬性之後,輸入框內容不能被更改
                  但是會獲取游標,也可以被選中

       禁用:<input type=”text” disabled/>
                  設定禁用屬性之後,元素不能使用,變灰不能獲取游標,不可選中

      表單標註:點選文字時,相對應的表單元素獲取焦點,增強滑鼠的可用性
             栗子:<label for=”pwd”></lable>
            <inout type=”password” id=”pwdl”/>
           注意:for屬性裡面要寫相對應元素的id值

相關文章