1. html表單用于搜集不同類型的用戶輸入。

2. <form>標(biāo)簽

2.1. <form>標(biāo)簽用于為用戶輸入創(chuàng)建html表單。

2.2. form元素是塊級元素, 其前后會產(chǎn)生折行。

2.3. 表單用于向服務(wù)器傳輸數(shù)據(jù)。

2.4. 可能的屬性

2.5. enctype屬性可能的值:

?2.5.1. application/x-www-form-urlencoded

?2.5.2. multipart/form-data

2.6. action屬性

?2.6.1. action屬性定義在提交表單時執(zhí)行的動作。

?2.6.2. 通常, 表單會被提交到web服務(wù)器上的網(wǎng)頁。

?2.6.3. 在下面的例子中, 指定了某個服務(wù)器腳本來處理被提交表單:

<form action="register.action">

?2.6.4. 如果省略action屬性, 則action會被設(shè)置為當(dāng)前頁面。

2.7. method屬性

?2.7.1. method屬性規(guī)定在提交表單時所用的http方法(get或post)：

<form action="register.action" method="get">

或:

<form action="register.action" method="post">

3. <input>標(biāo)簽

3.1. <input>元素是最重要的表單元素。

3.2. <input>標(biāo)簽有很多形態(tài), 根據(jù)不同的type屬性。

3.3. input屬性

4. <input>標(biāo)簽type屬性

4.1.?文本輸入

?4.1.1. <input type="text" />定義用于文本輸入的單行輸入字段。

?4.1.2. 還要注意文本字段的默認(rèn)寬度是20個字符。

4.2. 密碼輸入

?4.2.1. <input type="password" />定義密碼字段。

4.3. 單選按鈕輸入

?4.3.1. <input type="radio" />定義單選按鈕。

?4.3.2. 單選按鈕允許用戶在有限數(shù)量的選項中選擇其中之一。

4.4. 復(fù)選框

?4.4.1. <input type="checkbox" /> 定義復(fù)選框。

?4.4.2. 復(fù)選框允許用戶在有限數(shù)量的選項中選擇零個或多個選項。

4.5. 按鈕

?4.5.1. <input type="button />定義按鈕。

4.6. 提交按鈕

?4.6.1. <input type="submit" />定義用于向表單處理程序(form-handler)提交表單的按鈕。

4.7. 文件上傳

?4.7.1. <input type="file" />定義輸入字段和"瀏覽"按鈕, 供文件上傳。

4.8. 隱藏字段

?4.8.1. <input type="hidden" /> 定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認(rèn)值, 它們的值也可以由 JavaScript 進(jìn)行修改。

4.9. 重置按鈕

?4.9.1. <input type="reset" /> 定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。

4.10. 圖像形式的提交按鈕

?4.10.1. <input type="image" /> 定義圖像形式的提交按鈕。必須把src屬性和alt屬性與<input type="image" />結(jié)合使用。

<input type="image" src="submit.png" alt="submit" />

5. <input>標(biāo)簽value屬性

5.1. value屬性為input元素設(shè)定值。

5.2. 對于不同的輸入類型, value屬性的用法也不同:

?5.2.1. type="button", "reset", "submit": 定義按鈕上的顯示的文本

?5.2.2. type="text", "password", "hidden": 定義輸入字段的初始值

?5.2.3. type="checkbox", "radio", "image": 定義與輸入相關(guān)聯(lián)的值

5.3. <input type="checkbox" />和<input type="radio" />中必須設(shè)置value屬性。

5.4. value屬性無法與<input type="file" />一同使用。

6. <input>標(biāo)簽name屬性

6.1. name屬性規(guī)定input元素的名稱。

6.2. name屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識, 或者在客戶端通過JavaScript引用表單數(shù)據(jù)。

6.3. 只有設(shè)置了name屬性的表單元素才能在提交表單時傳遞它們的值。

6.4. 語法

<input name="value" />

7. <input>標(biāo)簽readonly屬性

7.1.?readonly屬性規(guī)定輸入字段為只讀(不能修改)。

7.2. 語法

<input readonly="readonly" />

8. <input>標(biāo)簽checked屬性

8.1. checked屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的input元素。

8.2. checked屬性與<input type="checkbox" />或<input type="radio" />配合使用。

8.3. checked屬性也可以在頁面加載后, 通過JavaScript代碼進(jìn)行設(shè)置。

8.4. 語法

<input checked="checked" />

9. <select>標(biāo)簽和<option>標(biāo)簽

9.1. <select>元素定義下拉列表。

9.2. option元素定義下拉列表中的一個選項(一個條目)。

9.3. 瀏覽器將<option>標(biāo)簽中的內(nèi)容作為<select>標(biāo)簽的菜單或是滾動列表中的一個元素顯示。

9.4. option元素位于select元素內(nèi)部。

9.5.?<select>可選屬性?

9.6.?<option>可選屬性

9.7. 語法

<select name="address"><option value="洛陽" selected ="selected ">洛陽</option><option value="濮陽">濮陽</option><option value="南陽">南陽</option><option value="信陽">信陽</option><option value="安陽">安陽</option><option value="鄭州">鄭州</option> </select>

10. <textarea>標(biāo)簽

10.1. <textarea>標(biāo)簽定義多行的文本輸入控件。

10.2. 文本區(qū)中可容納無限數(shù)量的文本, 其中的文本的默認(rèn)字體是等寬字體。

10.3. 可以通過cols和rows屬性來規(guī)定textarea的尺寸, 不過更好的辦法是使用CSS的height和width屬性。

10.4. 在文本輸入?yún)^(qū)內(nèi)的文本行間, 用"%0D%0A"(回車/換行)進(jìn)行分隔。

10.5. 可以通過<textarea>標(biāo)簽的wrap屬性設(shè)置文本輸入?yún)^(qū)內(nèi)的換行模式。

10.6. 可能屬性

11. <button>標(biāo)簽

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

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

11.3. <button>控件與<input type="button" />相比, 提供了更為強大的功能和更豐富的內(nèi)容。<button>與</button>標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容, 其中包括任何可接受的正文內(nèi)容, 比如文本或多媒體內(nèi)容。

11.4. 請始終為按鈕規(guī)定type屬性。Internet Explorer的默認(rèn)類型是"button", 而其他瀏覽器中(包括W3C規(guī)范)的默認(rèn)值是"submit"。

11.5. 可能屬性

12. <fieldset>標(biāo)簽和<legend>標(biāo)簽

12.1. fieldset元素可將表單內(nèi)的相關(guān)元素分組。

12.2. <fieldset>標(biāo)簽將表單內(nèi)容的一部分打包, 生成一組相關(guān)表單的字段。

12.3. 當(dāng)一組表單元素放到<fieldset>標(biāo)簽內(nèi)時, 瀏覽器會以特殊方式來顯示它們, 它們可能有特殊的邊界、3D效果, 或者甚至可創(chuàng)建一個子表單來處理這些元素。

12.4. <legend>元素為<fieldset>元素定義標(biāo)題。

12.5.?<fieldset>可選屬性

12.6.?<legend>可選屬性

13. 例子

13.1. 代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>表單</title></head><body><form action="form.html" method="post"><fieldset><legend>基本信息</legend>用戶名:<input type="text" name="name" value="請輸入用戶名" /> <br />密碼:<input type="password" name="pwd" /> <br />姓別:<input type="radio" name="sex" checked="checked" value="男" />男 <input type="radio" name="sex" value="女" />女 <br />生日:<input type="text" name="birthday" value="2003-06-09" readonly="readonly" /><input type="button" name="birthday" value="日歷插件" /> <br />愛好:<input type="checkbox" name="hobby" value="讀書" />讀書 <input type="checkbox" name="hobby" value="跳舞" />跳舞 <input type="checkbox" name="hobby" value="游泳" />游泳 <br />戶籍:<select name="address"><option value="洛陽" selected ="selected ">洛陽</option><option value="濮陽">濮陽</option><option value="南陽">南陽</option><option value="信陽">信陽</option><option value="安陽">安陽</option><option value="鄭州">鄭州</option></select> <br />簡介:<textarea name="info" rows="10" cols="30"></textarea> <br /><input type="hidden" name="formInfo" value="baseInfo" /><input type="reset" value="重置" /> <input type="submit" value="提交" /></fieldset></form><br /><br /><form action="form.html" method="get"><fieldset><legend>附加信息</legend>頭像: <input type="file" name="photo" /> <br /><input type="hidden" name="formInfo" value="otherInfo" /> <input type="image" src="submit.png" alt="submit" /></fieldset></form></body> </html>

13.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的026_html表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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