HTML表單使用方法

定義和用法
<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。
表單能夠包含input 元素,比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend、label元素
表單用于向服務(wù)器傳輸數(shù)據(jù)。

  • 定義:

<form action="提交到服務(wù)器地址" method="get/post"> </form>

  • 單行文本框<input type="text"/>(input 的type 屬性的默認(rèn)值就是"text")
    <input type = “text” name=“名稱”/>
    單行文本框的主要屬性:
    size:指定文本框的寬度,以字符個(gè)數(shù)為單位;在大多數(shù)瀏覽器中,文本框的缺省寬度是20個(gè)字符。
    value:指定文本框的默認(rèn)值,是在瀏覽器第一次顯示表單或者用戶單擊<input type="reset"/>按鈕之后在文本框中顯示的值。
    maxlength:指定用戶輸入的最大字符長(zhǎng)度。
    readonly:只讀屬性,當(dāng)設(shè)置readonly屬性后,文本框可以獲得焦點(diǎn),但用戶不能改變文本框中的value。
    disabled:禁用,當(dāng)文本框被禁用時(shí),不能獲得焦點(diǎn),當(dāng)然,用戶也不能改變文本框的值。并且在提交表單時(shí),瀏覽器不會(huì)將該文本框的值發(fā)送給服務(wù)器。
  • 密碼框<input type="password"/> 
    <input type=“password” name=“名稱”/>
  • 單選按鈕<input type="radio"/>
    使用方式:使用name相同的一組單選按鈕,不同radio設(shè)定不同的value值,這樣通過(guò)取指定name的值就可以知道誰(shuí)被選中了,不用單獨(dú)的判斷。單選按鈕的元素值由value屬性顯式設(shè)置,表單提交時(shí),選中項(xiàng)的value和name被打包發(fā)送,不顯式設(shè)置value。
    <input type=“radio” name=“gender” value=“male”/> <input type=“radio” name=“gender” value=“female”/>
  • 復(fù)選框<input type="checkbox"/>
    復(fù)選框的checked屬性表示是否被選中,<input type="checkbox" checked />
    <label><input type="checkbox" name="" value="dota">dota</label> <label><input type="checkbox" name="" value="旅游" checked>旅游</label> <label><input type="checkbox" name="" value="寵物" checked>寵物</label>

<label></label>標(biāo)簽
在<input type=“”>前可以寫普通的文本來(lái)修飾,但是單擊修飾文本的時(shí)候input并不會(huì)得到焦點(diǎn),而用label則可以,for屬性指定要修飾的控件的id,<label for=“txt1” >內(nèi)容</label>.

  • 隱藏域<input type="hidden"/>
    隱藏域通常用于向服務(wù)器提交不需要顯示給用戶的信息
    <input type=“hidden” name=“隱藏域”/>

  • 文件上傳<input type="file"/>
    <input type="file" name="" accept="定義上傳文件類型">

  • 下拉框<select>標(biāo)簽
    <select>標(biāo)記創(chuàng)建一個(gè)列表框,<option>標(biāo)記創(chuàng)建一個(gè)列表項(xiàng),<select>與嵌套的<option>一起使用,共同提供在一組選項(xiàng)中進(jìn)行選擇的方式。
    <option selected>可以將這個(gè)項(xiàng)設(shè)定為選擇項(xiàng)
    <select> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="hangzhou">杭州</option> </select>

  • 多行文本<textarea></textarea>
    <textarea name="" cols="10" rows="5" > 默認(rèn)顯示的文本 </textarea>

  • 提交按鈕<input type="submit"/>
    當(dāng)用戶單擊<inputt type="submit"/>的提交按鈕時(shí),表單數(shù)據(jù)會(huì)提交給<form>標(biāo)簽的action屬性所指定的服務(wù)器處理程序??梢栽O(shè)置value屬性修改按鈕的顯示文本。
    <input type="submit" value="提交"/>

  • 重置按鈕<input type="reset"/>
    當(dāng)用戶單擊<input type="reset"/>按鈕時(shí),表單中的值被重置為初始值。在用戶提交表單時(shí),重置按鈕的name和value不會(huì)提交給服務(wù)器。
    <input type=“reset” value=“重置按鈕"/>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 表單基礎(chǔ)知識(shí) 在HTML中,表單是由 元素來(lái)表示的,而在JS中,表單對(duì)應(yīng)的則是HTMLFormElement類型。...
    oWSQo閱讀 968評(píng)論 0 1
  • 表單的作用 HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與Web服務(wù)器的...
    柏龍閱讀 200評(píng)論 0 1
  • 什么是FORM表單: 表單是用來(lái)提交資料、意見,規(guī)范流程執(zhí)行過(guò)程的格式。表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。一個(gè)表單...
    PYFang閱讀 1,238評(píng)論 0 0
  • Html中的form表單常用于用戶信息的填寫和提交,在前端開發(fā)中使用較為廣泛。 form對(duì)象 建立一個(gè)form表單...
    CYC_dc68閱讀 394評(píng)論 0 0
  • 我喜歡清晨出門就插上耳機(jī) 聽自己喜歡的曲調(diào) 聽著思念著 我喜歡清晨出門就看到 賣力的老爺爺 投入的打著太極 我喜歡...
    綠蘿悠悠閱讀 188評(píng)論 0 0

友情鏈接更多精彩內(nèi)容