表單：表單主要用來(lái)制作動(dòng)態(tài)網(wǎng)頁(yè)，方便和用戶進(jìn)行交互

表單語(yǔ)法：

<form method=" " action=" " enctype="multipart/form-data"></form>

enctype在表單中使用文件域時(shí)，必須設(shè)置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數(shù)據(jù)分為多部分提交。

method值可以為：get/post（實(shí)際開(kāi)發(fā)中用post傳遞給服務(wù)器）

action表示向何處發(fā)送表單數(shù)據(jù)（地址）

表單元素：

語(yǔ)法：

<input? type="text"(input元素類型) name="fname" value="text">

type	指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認(rèn)為 text
name	指定表單元素的名稱
value	元素的初始值。type 為 radio時(shí)必須指定一個(gè)值
size	指定表單元素的初始寬度。當(dāng)type 為 text 或 password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位
maxlength	type為text或password 時(shí)，輸入的最大字符數(shù)
checked	type為radio或checkbox時(shí)，指定按鈕是否是被選中

文本框：text

<input type="text" name="text" value="文本框" size="30" maxlength="10"/>

size:文本框長(zhǎng)度

maxlength:文本框輸入最多字符

密碼框：password

<input type="password" name="password" size="30"/>

單選按鈕：

<input checked name="gender" type="radio" value="男" />男 <input name="gender" type="radio" value="女" />女 <input name="gender" type="radio" value="組合" />組合

checked:選中狀態(tài)

復(fù)選按鈕：

<input checked name="sport" type="checkbox" value="籃球" />籃球 <input name="sport" type="checkbox" value="足球" />足球 <input name="sport" type="checkbox" value="棒球" />棒球

按鈕:

<input type="submit" value="提交按鈕" /> <input type="reset" value="重置按鈕" / > <input type="button" value="一般按鈕" /> 圖片按鈕 <input type="image" src="./renren.gif" />

下拉列表：

<select name="列表名稱" size="行數(shù)"> <option value="選項(xiàng)的值" selected>…</option> <option value=選項(xiàng)的值>…</option > </select>

selected:默認(rèn)選中項(xiàng)

size:下拉列表顯示的行數(shù)

多行文本域：

<textarea? name="text " cols="x"? rows="y">文本內(nèi)容 </textarea? >

cols:顯示的列數(shù)

rows:顯示的行數(shù)

文件域：

<p><input type= "file" name="files" /><input type="submit" name="upload" value="上傳"/> </p>

郵箱：會(huì)自動(dòng)驗(yàn)證Email地址格式是否正確

<input type="email" name="email" id="box" required/>

網(wǎng)址：會(huì)自動(dòng)驗(yàn)證URL地址格式是否正確

<p>請(qǐng)輸入你的網(wǎng)址:<input type="url"? name= "url "/></p> <input type=submit/>

數(shù)字：number數(shù)字

<input type="number" name="number" value="數(shù)字" min="0"max="100" step="10" />

min:允許最小值

max:允許最大值

step:合法數(shù)字間隔

滑塊：效果圖

<input type="range" name="range" min="0" max="10000000" />

range(滑塊）? ? ? ? ? ?min:允許最小值? ? ? ? ? ? ? ? ? ?max:允許最大值?

搜索框：search

<input type="search" name="search" />

隱藏域：hidden

<input type="hidden" value="隱藏內(nèi)容" name="info" />

只讀和禁用：

<input name="text " type= "text" readonly/> <input type= "submit" disabled ??value="保存"/>

表單元素的標(biāo)注：

<label for="box">確認(rèn)密碼 </label><input type="password" name="password" id= "box" required />

表單初級(jí)驗(yàn)證方法：

placeholder:

input類型的文本框提供一種提示可以描述文本框期待用戶輸入何種內(nèi)容，提示語(yǔ)默認(rèn)顯示，當(dāng)文本框中輸入內(nèi)容時(shí)提示語(yǔ)消失。

適合于input標(biāo)簽：text、search、url、email和password等類型

required:

規(guī)定文本框填寫(xiě)內(nèi)容不能為空，否則不允許用戶提交表單

適合于input標(biāo)簽：text、search、url、email、password、number、checkbox、radio、file等類型

pattern:

用戶輸入的內(nèi)容必須符合正則表達(dá)式所指的規(guī)則，否則就不能提交表單

<input type="text" id="text " required pattern="[-\w\u4E00-\u9FA5]{4,10}" placeholder="昵稱"/>

總結(jié)

以上是生活随笔為你收集整理的HTML- 表单(简单易懂）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。