HTML——表單

表單的作用,常用的input屬性

type 作用
checkbox 復(fù)選框,通過name來分組,通過value提供值
radio 單選框,通過name來分組,通過value提供值
button 可點擊按鈕
hidden 隱藏的輸入字段
image 圖像形式的提交按鈕
file 輸入字段和“瀏覽”按鈕,供文件上傳
password 密碼字段,輸入時自動變?yōu)?號
reset 重置按鈕,會清空表單中所有數(shù)據(jù)
submit 提交按鈕,會將表單中的數(shù)據(jù)發(fā)送到服務(wù)器
text 單行的輸入字段,可在其中輸入文本,默認20個字符寬度

還可以用下拉菜單——select。如下。
它將形成一個下拉菜單,通過value提供值。

<select name="beans">
    <option valve="a">A</option>
    <option valve="b">B</option>
    <option valve="c">C</option>
    <option valve="d">D</option>
</select>

當需要輸入大段文字時??梢杂?code>textarea。

<textarea name="article">
 
</textarea>

我們可以通過CSS設(shè)置它的大小、是否可拖動、內(nèi)部padding等屬性。

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

** get **是將要上傳的參數(shù)列隊加到提交表單的action屬性所指的URL中,其中的值和表單內(nèi)各個字段一一對應(yīng),在URL中可以看到。
** post **是通過HTTP post機制,將表單內(nèi)各個字段與內(nèi)容放置在HTML HEADER內(nèi)一起傳送到action屬性所指的URL中,在URL中用戶看不到其中的值。

在input里,name有什么作用

當input屬性或者select和textarea中沒有name屬性時。提交表單的時候這個沒有name的值將不會提交。
并且,checkboxradio都會通過name來分組。相同的name值將劃分為同一組,不同的name值將劃分為不同的值。

radio如何分組

radio通過name分組。

placeholder屬性有什么作用

在文本輸入框中預(yù)先顯示內(nèi)容。如

<textarea name="Comments" rows="10" cols="50" placeholder="STH"></textarea>

在上面代碼顯示出來的文本框中。將顯示"STH"文字。當用戶點擊文本框且輸入內(nèi)容時,"STH"將消失,并且"STH"并不會在提交表單時傳輸給后臺,即便用戶沒有在文本框中輸入任何內(nèi)容。

type=hidden隱藏域有什么作用

  1. 暫存一些值。
  2. 安全,在提交后,后端可以通過hidden中的的value在校驗用戶發(fā)來的數(shù)據(jù)是否是被允許的。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • <input>標簽 標簽用于搜集用戶信息,根據(jù)不同的type屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段...
    _空空閱讀 4,186評論 0 3
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,525評論 19 139
  • 1 表單是如何工作的? 用戶在網(wǎng)頁上填寫表單并提交所填信息,瀏覽器將用戶提交的數(shù)據(jù)發(fā)送至 Web 服務(wù)器, Web...
    饑人谷_Mily閱讀 1,258評論 0 1
  • 常見問題 form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? HTML 表單用于搜集不同類型的...
    JohnHank閱讀 470評論 0 0
  • 畫的是一頭藍鯨,但不要與(藍鯨yx)想到一起,沒有看明白的就認為我是個抽象派的吧!還有一些朋友說是鯤,我只好說“鯤...
    小_崔閱讀 599評論 2 3

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