HTML中表單的示例分析

本文將為大家詳細(xì)介紹“HTML中表單的示例分析”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點，希望這篇“HTML中表單的示例分析”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

表單標(biāo)簽form:<form></form>//相當(dāng)于一張記錄用戶信息的單子
   常用屬性：method:表單的提交方式，常用的值有兩個
                  （1）post:安全提交方式
                  （2）get:非安全提交方式
   舉例：<form method="post"></from>
                    action:設(shè)置表單提交到哪
   舉例:<form method="post" action="提交到的頁面地址"></form>
表單中包含表單元素inout標(biāo)簽，用來讓用戶輸入內(nèi)容
需要注意表單元素要寫在form標(biāo)簽之間，不要寫在form外面
常用的表單元素：
  （1）<input type="text"/>:文本框，可以輸入內(nèi)容
           表單元素還可以設(shè)置默認(rèn)值value屬性：value="123"
  （2） <input type="password"/>:密碼框，輸入的內(nèi)容會隱藏
           每個表單元素一定要設(shè)置name屬性，name屬性用來標(biāo)識表單元素的名字
  （3）<input type="subimt" value="提交"/>:提交按鈕，點擊后會提交表單
           表單元素通過type設(shè)置是什么類型的輸入框或按鈕
  （4）<input type="reset"value="重置"/>：重置按鈕， 點擊會讓表單中的輸入框回到初始狀態(tài)
  （5）<input type="radio" name="sex" value="男"/>:單選按鈕，
           同一組單選按鈕只能選擇一個，使用name來分組，比如性別：name都是sex，如果name值不同，說明不是同組。提交的時候提交的是value值，
  （6） <input type="checkbox" name="like"value="swim"/>多選框，使用name分組，可以多選，提交的時候提交的是value值
           ps: 單選按鈕和多選按鈕可以通過設(shè)置checked屬性來設(shè)置默認(rèn)選中項

（7）<select name="year">
             <option value="1">列表項1</option>
             <option value="2">列表項2</option>
             <option value="3">列表項3</option>
           </select>年
          列表框，通過下拉框選擇列表項，提交的時候提交的是value值， 通過設(shè)置列表項的selected屬性來設(shè)置默認(rèn)選中項

（8）<input type="image" src="圖片路徑"/>圖片按鈕
     讓按鈕變成圖片的樣子，點擊會提交表單
  （9）<input type="button" value="顯示文字"/>普通按鈕
     一個沒有任何作用的按鈕，以后會很常用
     注意：不設(shè)置type屬性的話，默認(rèn)type屬性為text
  （10）<textarea rows="顯示的行數(shù)" cols="顯示的列數(shù)"/></textarea>文本域，可以顯示多行內(nèi)容或者輸入
  （11）<input type="file"/>文件域，可以選擇一個文件上傳
      上傳文件還需要設(shè)置form標(biāo)簽中的enctype屬性為multipary/form-data.
  （12）<input type-"email"/>郵箱框，必須輸入一個正確的郵箱格式才可以提交表單
      錯誤會有提示

（13）<input type="url"/>網(wǎng)址框，必須輸入一個完整的網(wǎng)址，列如:http://www.baidu.com  
  （14）<input type="number" max="最大數(shù)字" min="最小數(shù)字"step="合法倍數(shù)"/>數(shù)字框，只能輸入數(shù)字，
      輸入其他字符就提交不了表單。
  （15）<input type="range" max="最大值"min="最小值" setp="增量"/>滑塊，可以左右滑動
  （16）<input type="search"/>搜索框，不同瀏覽器會有你不同的樣式顯示
  （17）<input type="color"/>可以選擇顏色
  （18）<input type="datetime"/>格式為時間格式的輸入框
表單初級驗證：placehoder提示內(nèi)容,require非空判斷
                        pattern正則表達(dá)式驗證
        栗子：<input type="text" placehoder="請輸入姓名"/>
                  <input type="text" require/>//這個輸入框提交時不能為空

表單的高級應(yīng)用：
      隱藏域：<input type="hidden" name="hid" value=""/>
                 隱藏域是用戶看不到的內(nèi)容,可以用來區(qū)分表單，
      只讀：<input type="text" readonly/>
                 設(shè)置只讀屬性之后,輸入框內(nèi)容不能被更改
                 但是會獲取光標(biāo),也可以被選中
      禁用：<input type="text" disabled/>
                 設(shè)置禁用屬性之后，元素不能使用，變灰不能獲取光標(biāo)，不可選中
     表單標(biāo)注：點擊文字時，相對應(yīng)的表單元素獲取焦點，增強鼠標(biāo)的可用性
            栗子：<label for="pwd"></lable>
           <inout type="password" id="pwdl"/>
          注意：for屬性里面要寫相對應(yīng)元素的id值

如果你能讀到這里，小編希望你對“HTML中表單的示例分析”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！