html中form表單的使用方法和介紹

時(shí)間：2023-10-05 00:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-05 00:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

html中form表單的使用方法和介紹：

學(xué)習(xí)目標(biāo)

節(jié)數(shù)	知識(shí)點(diǎn)	要求
第一節(jié) （form）	表單概念	了解
Form	掌握
Get和post的區(qū)別	掌握
第二節(jié)（表單元素）	表單元素1	掌握
表單元素2	了解
第三節(jié)（表單元素的屬性）	表單元素的屬性	掌握
第四節(jié)（HTML5新增）	HTML5新增type類(lèi)型	了解
第五節(jié)（HTML5新增）	HTML5新增屬性	掌握

一、Form表單

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




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

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

<form action＝"url" method=get|post name="myform" ></form> -name：表單提交時(shí)的名稱(chēng) -action：提交到的地址 -method：提交方式，有g(shù)et和post兩種，默認(rèn)為get

<form action＝"url" method=get|post name="myform" ></form> -name：表單提交時(shí)的名稱(chēng) -action：提交到的地址 -method：提交方式，有g(shù)et和post兩種，默認(rèn)為get

<form action＝"url" method=get|post name="myform" ></form> -name：表單提交時(shí)的名稱(chēng) -action：提交到的地址 -method：提交方式，有g(shù)et和post兩種，默認(rèn)為get

<form action＝"url" method=get|post name="myform" ></form> -name：表單提交時(shí)的名稱(chēng) -action：提交到的地址 -method：提交方式，有g(shù)et和post兩種，默認(rèn)為get

post和get區(qū)別：

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

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

二、表單元素

一個(gè)完整的表單包含三個(gè)基本組成部分：表單標(biāo)簽、表單域、表單按鈕。

1.表單標(biāo)簽

是指<form>標(biāo)簽本身，它是一個(gè)包含表單元素的區(qū)域，使用<form></form>定義

2.表單域

是<form>標(biāo)簽中用來(lái)收集用戶輸入的每一項(xiàng)，通常用input標(biāo)簽來(lái)定義，input標(biāo)簽有不同的類(lèi)型，對(duì)應(yīng)用戶不同的數(shù)據(jù)。（比如：文本域、下拉列表、單選框、復(fù)選框等等）

3.表單按鈕

用來(lái)提交<form>表單中的所有信息到服務(wù)器

表單域和表單按鈕都屬于表單元素

2.1文本框

文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。

<form> First name: <input type="text" name="firstname"> <br>Last name: <input type="text" name="lastname"> </form>

<form> First name: <input type="text" name="firstname"> <br>Last name: <input type="text" name="lastname"> </form>

<form> First name: <input type="text" name="firstname"> <br>Last name: <input type="text" name="lastname"> </form>

<form> First name: <input type="text" name="firstname"> <br>Last name: <input type="text" name="lastname"> </form>

<form> First name: <input type="text" name="firstname"> <br>Last name: <input type="text" name="lastname"> </form>

瀏覽器顯示如下：

2.2密碼框

密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義:

<form> Password: <input type="password" name="pwd"> </form>

<form> Password: <input type="password" name="pwd"> </form>

<form> Password: <input type="password" name="pwd"> </form>

瀏覽器顯示效果如下:

注意:密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代。

2.3單選按鈕

<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)

<form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form>

<form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form>

<form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form>

<form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form>

<form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form>

瀏覽器顯示效果如下:

2.4復(fù)選框

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

瀏覽器顯示效果如下:

2.5文件

定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳：

選擇一個(gè)文件: <input type="file" name="img">

2.6隱藏域

定義隱藏字段，隱藏字段對(duì)于用戶是不可見(jiàn)的。隱藏字段常常存儲(chǔ)默認(rèn)值，或者由 JavaScript 改變它們的值：

<input type="hidden" name="country" value="Norway">

2.7提交按鈕

當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。

<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

瀏覽器顯示效果如下:

2.8重置按鈕

定義重置按鈕（重置所有表單值為默認(rèn)值）：

<input type="reset">

提示：請(qǐng)謹(jǐn)慎使用重置按鈕！對(duì)于用戶來(lái)說(shuō)，不慎點(diǎn)擊了重置按鈕是件很惱火的事情。

2.9按鈕

沒(méi)有任何功能的按鈕

<input type="button" value="點(diǎn)我"/>

2.10圖像圖片按鈕

定義圖像作為提交按鈕：

<input type="image" src="img_submit.gif" />

2.11按鈕

<button> 標(biāo)簽定義一個(gè)按鈕。

在 <button> 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 <input> 元素創(chuàng)建的按鈕之間的不同之處。

提示：請(qǐng)始終為 <button> 元素規(guī)定 type 屬性。不同的瀏覽器對(duì) <button> 元素的 type 屬性使用不同的默認(rèn)值。

2.12下拉列表

<select> 元素用來(lái)創(chuàng)建下拉列表。

<option> 標(biāo)簽定義下拉列表中的一個(gè)選項(xiàng)（一個(gè)條目）。

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

<optgroup> 標(biāo)簽經(jīng)常用于把相關(guān)的選項(xiàng)組合在一起。

如果你有很多的選項(xiàng)組合, 你可以使用<optgroup> 標(biāo)簽?zāi)軌蚝芎?jiǎn)單的將相關(guān)選項(xiàng)組合在一起。

2.13多行文本框

<textarea> 標(biāo)簽定義一個(gè)多行的文本輸入控件。文本區(qū)域中可容納無(wú)限數(shù)量的文本。

可以通過(guò) cols 和 rows 屬性來(lái)規(guī)定 textarea 的尺寸大小，不過(guò)更好的辦法是使用 CSS 的 height 和 width 屬性。

<textarea rows="10" cols="30"> 我是一個(gè)文本框。 </textarea>

<textarea rows="10" cols="30"> 我是一個(gè)文本框。 </textarea>

<textarea rows="10" cols="30"> 我是一個(gè)文本框。 </textarea>

2.14labe

<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。

提示:"for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

三、HTML5新增type類(lèi)型

3.1email

定義用于 e-mail 地址的字段（當(dāng)提交表單時(shí)會(huì)自動(dòng)對(duì) email 字段的值進(jìn)行驗(yàn)證）

E-mail: <input type="email" name="usremail">

3.2url

定義用于輸入 URL 的字段：

添加你的主頁(yè): <input type="url" name="homepage">

3.3search

定義搜索字段（比如站內(nèi)搜索或谷歌搜索等）：

Search Google: <input type="search" name="googlesearch">

3.4tel

定義用于輸入電話號(hào)碼的字段：

電話號(hào)碼: <input type="tel" name="usrtel">

3.5color

從拾色器中選取顏色：

選擇你喜歡的顏色: <input type="color" name="favcolor">

3.6number

定義用于輸入數(shù)字的字段（您可以設(shè)置可接受數(shù)字的限制）：

數(shù)量 ( 1 到 5 之間): <input type="number" name="quantity" min="1" max="5">

請(qǐng)使用下面的屬性來(lái)規(guī)定限制：

max - 規(guī)定允許的最大值。

min - 規(guī)定允許的最小值。

step - 規(guī)定合法數(shù)字間隔。

value - 規(guī)定默認(rèn)值。

3.7range

定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。您也可以設(shè)置可接受數(shù)字的限制：

<input type="range" name="points" min="1" max="10">

請(qǐng)使用下面的屬性來(lái)規(guī)定限制：

max - 規(guī)定允許的最大值。

min - 規(guī)定允許的最小值。

step - 規(guī)定合法數(shù)字間隔。

value - 規(guī)定默認(rèn)值。




3.8date

定義 date 控件：

生日: <input type="date" name="bday">

3.9month

定義 month 和 year 控件（不帶時(shí)區(qū)）：

生日 ( 月和年 ): <input type="month" name="bdaymonth">

3.10week

定義 week 和 year 控件（不帶時(shí)區(qū)）：

選擇周: <input type="week" name="week_year">

四、HTML5新增屬性

4.1autofocus 屬性

autofocus 屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。

注釋?zhuān)篴utofocus 屬性適用于所有 <input> 標(biāo)簽的類(lèi)型。

User name: <input type="text" name="user_name" autofocus />

4.2multiple 屬性

multiple 屬性規(guī)定輸入域中可選擇多個(gè)值。

注釋?zhuān)簃ultiple 屬性適用于以下類(lèi)型的 <input> 標(biāo)簽：email 和 file。

Email: <input type="email" multiple />

4.3placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。

<input type="search" name="user_search" placeholder="Search W3School" />

4.4required 屬性

required 屬性規(guī)定必須在提交之前填寫(xiě)輸入域（不能為空）。

Name: <input type="text" name="usr_name" required />