第3天【form表單】

主要內容

Form表單

表單元素

表單元素的屬性

HTML5新增type類型

HTML新增屬性

學習目標

一、Form表單

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

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

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

<form action＝"url" method=get|post name="myform" ></form> -name：表單提交時的名稱 -action：提交到的地址 -method：提交方式，有get和post兩種，默認為get

post和get區別：

1、數據提交方式，get把提交的數據url可以看到，post看不到

2、get一般用于提交少量數據，post用來提交大量數據

計算機中的位：二進制數系統中，每個0或1就是一個位(bit)，位是數據存儲的最小單位。其中8 bit就稱為一個字節（Byte）。計算機中的CPU位數指的是CPU一次能處理的最大位數。例如32位計算機的CPU一次最多能處理32位數據。

二、表單元素

一個完整的表單包含三個基本組成部分：表單標簽、表單域、表單按鈕。

1.表單標簽

是指<form>標簽本身，它是一個包含表單元素的區域，使用<form></form>定義

2.表單域

是<form>標簽中用來收集用戶輸入的每一項，通常用input標簽來定義，input標簽有不同的類型，對應用戶不同的數據。（比如：文本域、下拉列表、單選框、復選框等等）

3.表單按鈕

用來提交<form>表單中的所有信息到服務器

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

2.1文本框

文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

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

瀏覽器顯示如下：

2.2密碼框

密碼字段通過標簽<input type="password"> 來定義:

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

瀏覽器顯示效果如下:

注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。

2.3單選按鈕

<input type="radio"> 標簽定義了表單單選框選項

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

瀏覽器顯示效果如下:

2.4復選框

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<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文件

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

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

2.6隱藏域

定義隱藏字段，隱藏字段對于用戶是不可見的。隱藏字段常常存儲默認值，或者由 JavaScript 改變它們的值：

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

2.7提交按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

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

瀏覽器顯示效果如下:

2.8重置按鈕

定義重置按鈕（重置所有表單值為默認值）：

<input type="reset">

提示：請謹慎使用重置按鈕！對于用戶來說，不慎點擊了重置按鈕是件很惱火的事情。

2.9按鈕

沒有任何功能的按鈕

<input type="button" value="點我"/>

2.10圖像圖片按鈕

定義圖像作為提交按鈕：

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

2.11按鈕

<button> 標簽定義一個按鈕。

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

提示：請始終為 <button> 元素規定 type 屬性。不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值。

2.12下拉列表

<select> 元素用來創建下拉列表。

<option> 標簽定義下拉列表中的一個選項（一個條目）。

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

<optgroup> 標簽經常用于把相關的選項組合在一起。

如果你有很多的選項組合, 你可以使用<optgroup> 標簽能夠很簡單的將相關選項組合在一起。

<select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup> </select>

2.13多行文本框

<textarea> 標簽定義一個多行的文本輸入控件。文本區域中可容納無限數量的文本。

可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

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

2.14labe

<label> 標簽為 input 元素定義標注（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

提示:"for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 id 屬性的值。

<form action="demo_form.php"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> <br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"> <br> <input type="submit" value="提交"> </form>

三、HTML5新增type類型

3.1email

定義用于 e-mail 地址的字段（當提交表單時會自動對 email 字段的值進行驗證）

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

3.2url

定義用于輸入 URL 的字段：

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

3.3search

定義搜索字段（比如站內搜索或谷歌搜索等）：

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

3.4tel

定義用于輸入電話號碼的字段：

電話號碼: <input type="tel" name="usrtel">

3.5color

從拾色器中選取顏色：

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

3.6number

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

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

請使用下面的屬性來規定限制：

max - 規定允許的最大值。

min - 規定允許的最小值。

step - 規定合法數字間隔。

value - 規定默認值。

3.7range

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

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

請使用下面的屬性來規定限制：

max - 規定允許的最大值。

min - 規定允許的最小值。

step - 規定合法數字間隔。

value - 規定默認值。

3.8date

定義 date 控件：

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

3.9month

定義 month 和 year 控件（不帶時區）：

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

3.10week

定義 week 和 year 控件（不帶時區）：

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

四、HTML5新增屬性

4.1autofocus 屬性

autofocus 屬性規定在頁面加載時，域自動地獲得焦點。

注釋：autofocus 屬性適用于所有 <input> 標簽的類型。

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

4.2multiple 屬性

multiple 屬性規定輸入域中可選擇多個值。

注釋：multiple 屬性適用于以下類型的 <input> 標簽：email 和 file。

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

4.3placeholder 屬性

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

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

4.4required 屬性

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

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

五、作業

總結

以上是生活随笔為你收集整理的如何在input输入框中加一个搜索的小图片_前端开发困难重重，如何把握机会学习？...的全部內容，希望文章能夠幫你解決所遇到的問題。

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