表單form與input常用標(biāo)簽

關(guān)鍵字:
form表單作用;
常用input標(biāo)簽;
post 和 get 區(qū)別;
radio分組;
placeholder作用;
type-hidden;


form表單有什么作用?

我們平時(shí)填寫(xiě)的紙質(zhì)表單一樣,HTML 表單用于搜集不同類型的用戶輸入
表單是一個(gè)包含表單元素的區(qū)域 表單元素是允許用戶在表單中(比如:文本域、下拉列表、單選框、復(fù)選框等等)輸入信息的元素

有哪些常用的input 標(biāo)簽,分別有什么作用?

<input> 標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。
<input> 元素在 <form> 元素中使用,用來(lái)聲明允許用戶輸入數(shù)據(jù)的 input 控件。
輸入字段可通過(guò)多種方式改變,取決于 type 屬性。

常用的input 標(biāo)簽:

  • accept 屬性 :規(guī)定了可通過(guò)文件上傳提交的服務(wù)器接受的文件類型。
    注意:accept 屬性僅適用于 <input type="file">。

  • alt 屬性: 為用戶由于某些原因(比如網(wǎng)速太慢、src 屬性中的錯(cuò)誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器)無(wú)法查看圖像時(shí)提供了替代文本。
    注意:alt 屬性只能與 <input type="image"> 配合使用。

  • checked 屬性是一個(gè)布爾屬性。
    checked 屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素。
    checked 屬性適用于 <input type="checkbox"> 和 <input type="radio">。
    checked 屬性也可以在頁(yè)面加載后,通過(guò) JavaScript 代碼進(jìn)行設(shè)置。

  • disabled 屬性是一個(gè)布爾屬性。
    disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。
    被禁用的 input 元素是無(wú)法使用和無(wú)法點(diǎn)擊的。
    表單中被禁用的 <input> 元素不會(huì)被提交

  • name 屬性規(guī)定 <input> 元素的名稱。
    name 屬性用于在 JavaScript 中引用元素,或者在表單提交后引用表單數(shù)據(jù)。
    注意:只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。

  • size 屬性規(guī)定以字符數(shù)計(jì)的 <input> 元素的可見(jiàn)寬度。
    注意:size 屬性適用于下面的 input 類型:text、search、tel、url、email 和 password。

  • src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。
    注意:src 屬性對(duì)于 <input type="image"> 是必需的屬性,且只能與 <input type="image"> 配合使用。

  • type 屬性規(guī)定要顯示的 <input> 元素的類型。
    默認(rèn)類型是:text。
    提示:該屬性不是必需的,但是我們認(rèn)為您應(yīng)該始終使用它。

  • value 屬性規(guī)定 <input> 元素的值。
    value 屬性對(duì)于不同 input 類型,用法也不同:
    對(duì)于 "button"、"reset"、"submit" 類型 - 定義按鈕上的文本
    對(duì)于 "text"、"password"、"hidden" 類型 - 定義輸入字段的初始(默認(rèn))值
    對(duì)于 "checkbox"、"radio"、"image" 類型 - 定義與 input 元素相關(guān)的值,當(dāng)提交表單時(shí)該值會(huì)發(fā)送到表單的 action URL。
    注意:value 屬性對(duì)于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
    注意:value 屬性不適用于 <input type="file">。

  • 以上的參考地址

post 和 get 方式的區(qū)別?

兩種 HTTP 請(qǐng)求方法:GET 和 POST
在客戶機(jī)和服務(wù)器之間進(jìn)行請(qǐng)求-響應(yīng)時(shí),兩種最常被用到的方法是:GET 和 POST。
GET - 從指定的資源請(qǐng)求數(shù)據(jù)。
POST - 向指定的資源提交要被處理的數(shù)據(jù)。

GET 方法

請(qǐng)注意,查詢字符串(名稱/值對(duì))是在 GET 請(qǐng)求的 URL 中發(fā)送的:
/test/demo_form.php?name1=value1&name2=value2
有關(guān) GET 請(qǐng)求的其他一些注釋:
GET 請(qǐng)求可被緩存
GET 請(qǐng)求保留在瀏覽器歷史記錄中
GET 請(qǐng)求可被收藏為書(shū)簽
GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
GET 請(qǐng)求有長(zhǎng)度限制
GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)

POST 方法

請(qǐng)注意,查詢字符串(名稱/值對(duì))是在 POST 請(qǐng)求的 HTTP 消息主體中發(fā)送的:
POST /test/demo_form.php HTTP/1.1
Host: w3cschool.cc
name1=value1&name2=value2
有關(guān) POST 請(qǐng)求的其他一些注釋:
POST 請(qǐng)求不會(huì)被緩存
POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
POST 不能被收藏為書(shū)簽
POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒(méi)有要求

POST和GET區(qū)別

Paste_Image.png

在input里,name 有什么作用?

只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。
網(wǎng)頁(yè)檢查元素的請(qǐng)求數(shù)據(jù)格式為name:xxx

radio 如何 分組?

radio通過(guò)對(duì)name的定義來(lái)進(jìn)行分組,同一個(gè)name的radio只能單選。

placeholder 屬性有什么作用?

為輸入框提供提示功能的占位文字,比如:請(qǐng)輸入密碼
placeholder 屬性規(guī)定可描述輸入字段預(yù)期值的簡(jiǎn)短的提示信息(比如:一個(gè)樣本值或者預(yù)期格式的短描述)。
該提示會(huì)在用戶輸入值之前顯示在輸入字段中。
注意:placeholder 屬性適用于下面的 input 類型:text、search、url、tel、email 和 password。

type=hidden隱藏域有什么作用? 舉例說(shuō)明

Hidden 對(duì)象代表一個(gè) HTML 表單中的某個(gè)隱藏輸入域。

這種類型的輸入元素實(shí)際上是隱藏的。這個(gè)不可見(jiàn)的表單元素的** value 屬性**保存了一個(gè)要提交給 Web 服務(wù)器的任意字符串。如果想要提交并非用戶直接輸入的數(shù)據(jù)的話,就是用這種類型的元素。
在 HTML 表單中 <input type="hidden"> 標(biāo)簽每出現(xiàn)一次,一個(gè) Hidden 對(duì)象就會(huì)被創(chuàng)建。

Paste_Image.png

表單驗(yàn)證

JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
數(shù)據(jù)是否為空.
email地址
驗(yàn)證日期是否輸入正確?
表單輸入內(nèi)容是否為數(shù)字型?

最后編輯于
?著作權(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)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,618評(píng)論 19 139
  • <input>標(biāo)簽 標(biāo)簽用于搜集用戶信息,根據(jù)不同的type屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段...
    _空空閱讀 4,193評(píng)論 0 3
  • 1.動(dòng)手 form 表單table 表格 2. <form>表單元素 1) 簡(jiǎn)述: 元素是塊級(jí)元素,其開(kāi)始標(biāo)簽和結(jié)...
    _Dot912閱讀 2,138評(píng)論 2 8
  • 1.form表單有什么作用?有哪些常用的input 標(biāo)簽,分別有什么作用? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 979評(píng)論 0 1
  • 無(wú)數(shù)的錯(cuò)誤不可細(xì)數(shù),關(guān)鍵是重復(fù)犯錯(cuò),又畫(huà)了爛水果。相對(duì)而言,梨和南瓜就好些了。下次試試水多些表現(xiàn)后面的層次可以不。
    月出流云閱讀 154評(píng)論 0 0

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