【原】3、Form 表單

夜貓速讀 2022-05-05 發(fā)布于湖北

展開全文

之前學(xué)習(xí)的標(biāo)簽更多的是向用戶展示信息，假如服務(wù)器端需要驗證用戶是否存在，這時就需要有一個用戶輸入內(nèi)容的標(biāo)簽。表單在網(wǎng)頁中主要負責(zé)數(shù)據(jù)采集功能，它用<form>標(biāo)簽定義。用戶輸入的信息都要包含在form標(biāo)簽中，點擊提交后，<form>和</form>里面包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件里。

所有的用戶輸入內(nèi)容的地方都用表單來寫，如登錄注冊、搜索框。

表單在 Web 網(wǎng)頁中用來給訪問者填寫信息，從而能采集客戶端信息，使網(wǎng)頁具有交互的功能。一般是將表單設(shè)計在一個Html文檔中，當(dāng)用戶填寫完信息后做提交(submit)操作，于是表單的內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過服務(wù)器上的 ASP 或 PHP等處理程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網(wǎng)頁就具有了交互性。這里我們只講怎樣使用Html 標(biāo)志來設(shè)計表單。

表單是由窗體和控件組成的,一個表單一般應(yīng)該包含用戶填寫信息的輸入框,提交按鈕等，這些輸入框,按鈕叫做控件,表單很像容器,它能夠容納各種各樣的控件。

表單標(biāo)簽的格式:

-name：表單提交時的名稱

-action：提交到的地址

-method：提交方式，默認為get

post和get區(qū)別：

1.數(shù)據(jù)提交方式，get把提交的數(shù)據(jù)url可以看到，post看不到

2.get一般用于提交少量數(shù)據(jù)，post用來提交大量數(shù)據(jù)

3.get最多提交1K數(shù)據(jù)，post理論上沒有限制

4.get提交的數(shù)據(jù)在瀏覽器歷史記錄中，安全性不好


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>文本框和密碼框</title></head><body>    <!--    表單的組成：  表單標(biāo)簽（控件）、表單域、表單按鈕    表單的目的：  收集用戶的信息并提交。    表單域：       存放表單的區(qū)域    表單按鈕：    把表單域中收集的信息提交    表單標(biāo)簽（控件）： input        注意：            1.input是單標(biāo)簽            2.input通過type屬性來更改它的形狀    -->    <h5>用戶名和密碼</h5>    <p>用戶名：<input type="text"  name="username"  value="admin"/></p>    <p>密  碼：<input type="password" value="123456"  /></p></body></html>

·單行文本框<inputtype="text" >默認值是type="text"

·密碼框<inputtype="password"/>

·單選按鈕<inputtype="radio" name=””/>

·復(fù)選框<inputtype="checkbox"/>

·隱藏域<inputtype="hidden"/>

·文件上傳<inputtype="file"/>

下拉框<select>標(biāo)簽

·多行文本<textarea></textarea>

·提交按鈕<inputtype="submit"/>

·普通按鈕<inputtype="button"/>

·重置按鈕<inputtype="reset"/>

文本框

<inputtype="text" />

屬性：

name:定義控件名稱

value：指定控件初始值

密碼框

<inputtype="password" />

屬性：

name:定義控件名稱

value：指定控件初始值

單選按鈕

<inputtype="radio" />

屬性：

name:定義控件名稱

value：指定控件初始值

checked：設(shè)置控件初始狀態(tài)是否被選中

性別：

<inputtype="radio" name="sex"/>男

<inputtype="radio" name="sex"/>女

復(fù)選框

<inputtype="checkbox" />

屬性：

name:定義控件名稱

value：指定控件初始值

checked：設(shè)置控件初始狀態(tài)是否被選中

例如：愛好:

<input type="checkbox"checked/>游戲

<inputtype="checkbox"/>唱歌

<inputtype="checkbox"/>跳舞

文件

<inputtype="file"/>

屬性：

name:定義控件名稱

使用file類型的input時要注意以下幾點

1.form表單的method屬性值要為post

1.form要加enctype="multipart/form-data"屬性，這個屬性說明了我們的文件以二進制方式傳輸文件，因為我們計算機本身最底層都是以二進制來顯示、傳輸。

默認地，表單數(shù)據(jù)會編碼為"application/x-www-form-urlencoded"，不能用于文件上傳

</form>


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>單選按鈕和復(fù)選框</title></head><body>    <!--      單選按鈕: 必須通過相同的name屬性值來達到單選的效果     復(fù)選框    -->    <p>性別：<input type="radio" name="sex" checked value="男"/>男 <input name="sex" value="女" type="radio"/>女</p>    <p>愛好：<input type="checkbox" checked/>吃飯飯 <input checked type="checkbox"/>睡覺覺        <input type="checkbox"/>打代碼    </p></body></html>

隱西藏域

<inputtype="hidden" />

屬性：

name:定義控件名稱

value：指定控件初始值

按鈕

<inputtype="button" />

屬性：

name:定義控件名稱

value：指定控件初始值

提交按鈕

<inputtype="submit" />

屬性：

name:定義控件名稱

value：指定按鈕表面顯示文字

重置按鈕

<inputtype="reset" />

屬性：

name:定義控件名稱

value：指定按鈕表面顯示文字

圖像圖片按鈕

<inputtype="image" src="URL"/>

屬性：

name:定義控件名稱

src：指定圖像地址

按鈕

屬性:

type:button/submit/reset,默認值為submit

下拉列表框續(xù)

<selectname="" id="">

<optionvalue="1">東城區(qū)</option>

<optionvalue="2">西城區(qū)</option>

<optionvalue="3">海淀區(qū)</option>

</optgroup>

</optgroup>

</select>

多行文本框

屬性：

?cols：這文字區(qū)塊的寬度

?rows：這文字區(qū)塊的行數(shù)，即其高度

</textarea>

標(biāo)簽為 input 元素定義標(biāo)注。

label是input的描述，它本身不會有特殊效果，但它和其它input標(biāo)簽使用可以提升用戶的使用體驗，用戶不用非得點擊到按鈕，而是點擊文字即可選中，如“記住密碼”

<inputtype="checkbox" name="pwd" id="pwd"/>

*通過label的for指向按鈕的id來綁定，for和id屬性的值要相同

<form>

</form>

<label>標(biāo)簽一般和radio、checkbox類型一起使用。

<fieldset>元素集

fieldset 元素可將表單內(nèi)的相關(guān)元素分組，通常和legend標(biāo)簽一起用，legend標(biāo)簽定義了fieldset的提示信息，fieldset是塊級元素。

身高：<input type="text" />

體重：<input type="text" />

</fieldset>

HTML5新增input類型

1.在其他版本的HTML中，表單包含的元素非常有限，并且屬性也不多，尤其是在數(shù)據(jù)交互過程中數(shù)據(jù)的驗證需要編寫大量的JavaScript代碼

2.以上的不足都已經(jīng)在HTML5中被克服，HTML5在以上的基礎(chǔ)上增加了許多標(biāo)簽和屬性，為開發(fā)人員帶來了極大的方便。

電子郵件類型

功能描述：輸入E-mail地址的文本框

語法：<inputtype="email"/>

注意：輸入的內(nèi)容中必須包含"@"，"@"后面必須具有內(nèi)容


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>表單域</title></head><body>    <!--        三個域：            1.文本域：  textarea    個人介紹/留言            2.文件域：  <input type="file"/>  上傳文件            3.表單域：  form    收集控件信息并提交        補充：get提交的速度快但是不安全，post速度慢但是安全    -->    <form action="20多行文本和lable.html" method="post" name="login">        <p>用戶名：<input  type="text" name="username"/></p>        <p>密碼：<input  type="password"  name="pwd"/></p>        <input type="submit"  value="提交"/>        <input type="reset"/>    </form>    <form action="20多行文本和lable.html" method="post" name="regiter">        <p>用戶名：<input  type="text" name="username"/></p>        <p>密碼：<input  type="password"  name="pwd"/></p>        <input type="submit"  value="提交"/>        <input type="reset"/>    </form></body></html>

搜索類型

功能描述：輸入搜索關(guān)鍵字的文本框

語法：<inputtype="search"/>

URL類型

功能描述：輸入WEB站點的文本框

語法：<inputtype="url"/>

注意：輸入的內(nèi)容中必須包含"http://"，后面必須有內(nèi)容

顏色類型

功能描述：預(yù)定義的顏色拾取控件

語法：<inputtype="color"/>


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>多行文本和lable</title></head><body>    <textarea cols="30"  rows="10">個人介紹</textarea><hr/>    <!--    lable使用方法：        1.直接使用lable標(biāo)簽包裹input        2.通過label的for指向按鈕的id來綁定，for和id屬性的值要相同    -->    <p> <label>用戶名：<input  type="text"/></label></p>    <p> <label>密碼：<input  type="password"/></label></p>    <hr/>    <label for="pwd">記住密碼</label>    <input type="checkbox" name="pwd" id="pwd" />    <fieldset>        <legend>健康信息</legend>        身高：<input type="text" /><br>        體重：<input type="text" />    </fieldset>
</body></html>

數(shù)字類型

功能描述：只能接受數(shù)字

語法：<inputtype="number"/>

屬性：min：當(dāng)前域能接受的最小值

max：當(dāng)前域能接受的最大值

step：決定了域所接受值遞增或遞減的步長，默認為1

范圍類型

功能描述：允許用戶選擇一個范圍內(nèi)的值

語法：<inputtype="range" min="0" max="100"value="80"/>

屬性：min：范圍的下限值

max：范圍的上限值

step：聲明該值遞增或遞減的步長

value：設(shè)置初始值

日期類型

功能描述：創(chuàng)建一個日期輸入域

語法：<inputtype="date"/>

周類型

功能描述：與date類型相似，但只能選擇周

語法：<inputtype="week"/>

月份類型

功能描述：與date類型相似，但只能選擇月份

語法：<inputtype="month"/>


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>文件上傳和按鈕組</title></head><body>    <p>上傳頭像： <input type="file"/></p>    <p>隱藏域：<input type="hidden" value="11"/></p>    <p>普通按鈕：<input type="button"  value="注冊"/></p>    <p>提交按鈕：<input type="submit"  value="登陸"/></p>    <p>重置按鈕：<input type="reset"/></p>    <p>圖像圖片按鈕：<input type="image" src="images/anniu.jpg"  width="20px"/></p>    <p>  <button>下一步</button>        </p></body></html>

placeholder

作用：默認提示

語法：<inputtype="text" placeholder="請輸入用戶名"/>

multiple

作用：支持在一個域中輸入多個值，逗號隔開，一般配合郵箱和URL使用

語法：<inputtype="email" multiple/>

autofocus

作用：自動獲取焦點

語法：<inputtype="text" autofocus/>

required

作用：防止域為空提交表單時

語法：<inputtype="text" required/>

minlength和maxlength

作用：定制元素允許的最小字符數(shù)和最大字符數(shù)

語法：<inputtype="text" minlength="6" maxlength="18"/>

min和max

作用：定制元素允許的最小數(shù)字和最大數(shù)字

語法：<inputtype="number" min=”0”max=”100”/>


<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>下拉列表框</title></head><body>    籍貫：    <select name="sel"  >        <option >請選擇省份</option>        <option selected value="山西省">山西省</option>        <option value="山東省">山東省</option>        <option >陜西省</option>    </select>    <select>        <option value="" >太原市</option>        <option value="" selected>晉中市</option>        <option value="">陽泉市</option>    </select>    <hr/>    <select name="" id="">        <optgroup label="北京">            <option>海淀區(qū)</option>            <option>朝陽區(qū)</option>            <option>西城區(qū)</option>        </optgroup>        <optgroup label="河北省">            <option>石家莊</option>            <option>保定市</option>        </optgroup>    </select></body></html>