Form表單的簡(jiǎn)單使用

HTML 表單用于搜集不同類型的用戶輸入。表單元素是允許用戶在表單中輸入內(nèi)容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

HTML表單
表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置。action 屬性定義在提交表單時(shí)執(zhí)行的動(dòng)作,就是提交的路徑;method 屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法(GET 或 POST):

<form action="www.baidu.com" method="get/post">
.
input elements
.
</form>```
**輸入元素**
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽(<input>)。
輸入類型是由類型屬性(type)定義的。大多數(shù)經(jīng)常被用到的輸入類型如下:
**單行文本域**
文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定,當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí),就會(huì)用到文本域。

<form>
賬號(hào): <input type="text" name="username">
</form>

**密碼字段**
密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義,密碼字段字符不會(huì)明文顯示,而是以星號(hào)或圓點(diǎn)替代。

<form>
密碼: <input type="password" name="pwd">
</form>

**單選按鈕**
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)。

<form>
<input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女
</form>

**復(fù)選框**
<input type="checkbox"> 定義了復(fù)選框。 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。

<form>
<input type="checkbox" name="vehicle" value="read">讀書(shū)

<input type="checkbox" name="vehicle" value="music">聽(tīng)歌

<input type="checkbox" name="vehicle" value="study">學(xué)習(xí)
</form>

**隱藏域**
<input type="hideen">定義了隱藏域。隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用。

<form>
<input type="hidden" name="hidden" value="hiddenInfo">
</form>

**提交按鈕**
<input type="submit"> 定義了提交按鈕。當(dāng)用戶單擊確認(rèn)按鈕時(shí),表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。

<form >
<input type="submit" value="Submit">
</form>

**下拉列表**
<select> 元素定義下拉列表:

<form >
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
</form>

**多行文本域**
<textarea> 元素定義多行輸入字段(文本域):

<textarea name="message" rows="10" cols="30">
content
</textarea>

**按鈕**
<button> 元素定義可點(diǎn)擊的按鈕:

<form >
<button type="button" >Click Me!</button>
</form>

最后編輯于
?著作權(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)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 本文介紹關(guān)于form表單的一些使用方法網(wǎng)站是如何與用戶進(jìn)行交互的?使用HTML表單。表單用于搜集不同類型的用戶輸入...
    左冬的博客閱讀 1,489評(píng)論 1 3
  • 概述 HTML中 元素被用來(lái)表示一個(gè)區(qū)域,該區(qū)域中的控件,可以用來(lái)向服務(wù)器提交數(shù)據(jù)。 常用屬性 action: 表...
    ShawnRong閱讀 346評(píng)論 0 0
  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中,表單是由form元素來(lái)表示的,但是在jav...
    linfree閱讀 2,331評(píng)論 3 17
  • 表單基礎(chǔ)知識(shí) 在HTML中,表單是由 元素來(lái)表示的,而在JS中,表單對(duì)應(yīng)的則是HTMLFormElement類型。...
    oWSQo閱讀 968評(píng)論 0 1
  • 什么是FORM表單: 表單是用來(lái)提交資料、意見(jiàn),規(guī)范流程執(zhí)行過(guò)程的格式。表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。一個(gè)表單...
    PYFang閱讀 1,238評(píng)論 0 0

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