表單：表單主要用來制作動態網頁，方便和用戶進行交互

表單語法：

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

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

method值可以為：get/post（實際開發中用post傳遞給服務器）

action表示向何處發送表單數據（地址）

表單元素：

語法：

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

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

文本框：text

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

size:文本框長度

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:選中狀態

復選按鈕：

<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="行數"> <option value="選項的值" selected>…</option> <option value=選項的值>…</option > </select>

selected:默認選中項

size:下拉列表顯示的行數

多行文本域：

<textarea? name="text " cols="x"? rows="y">文本內容 </textarea? >

cols:顯示的列數

rows:顯示的行數

文件域：

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

郵箱：會自動驗證Email地址格式是否正確

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

網址：會自動驗證URL地址格式是否正確

<p>請輸入你的網址:<input type="url"? name= "url "/></p> <input type=submit/>

數字：number數字

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

min:允許最小值

max:允許最大值

step:合法數字間隔

滑塊：效果圖

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

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

搜索框：search

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

隱藏域：hidden

<input type="hidden" value="隱藏內容" name="info" />

只讀和禁用：

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

表單元素的標注：

<label for="box">確認密碼 </label><input type="password" name="password" id= "box" required />

表單初級驗證方法：

placeholder:

input類型的文本框提供一種提示可以描述文本框期待用戶輸入何種內容，提示語默認顯示，當文本框中輸入內容時提示語消失。

適合于input標簽：text、search、url、email和password等類型

required:

規定文本框填寫內容不能為空，否則不允許用戶提交表單

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

pattern:

用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。