026_html表单
1. html表單用于搜集不同類型的用戶輸入。
2. <form>標簽
2.1. <form>標簽用于為用戶輸入創建html表單。
2.2. form元素是塊級元素, 其前后會產生折行。
2.3. 表單用于向服務器傳輸數據。
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屬性定義在提交表單時執行的動作。
?2.6.2. 通常, 表單會被提交到web服務器上的網頁。
?2.6.3. 在下面的例子中, 指定了某個服務器腳本來處理被提交表單:
<form action="register.action">?2.6.4. 如果省略action屬性, 則action會被設置為當前頁面。
2.7. method屬性
?2.7.1. method屬性規定在提交表單時所用的http方法(get或post)：
<form action="register.action" method="get">或:
<form action="register.action" method="post">3. <input>標簽
3.1. <input>元素是最重要的表單元素。
3.2. <input>標簽有很多形態, 根據不同的type屬性。
3.3. input屬性
4. <input>標簽type屬性
4.1.?文本輸入
?4.1.1. <input type="text" />定義用于文本輸入的單行輸入字段。
?4.1.2. 還要注意文本字段的默認寬度是20個字符。
4.2. 密碼輸入
?4.2.1. <input type="password" />定義密碼字段。
4.3. 單選按鈕輸入
?4.3.1. <input type="radio" />定義單選按鈕。
?4.3.2. 單選按鈕允許用戶在有限數量的選項中選擇其中之一。
4.4. 復選框
?4.4.1. <input type="checkbox" /> 定義復選框。
?4.4.2. 復選框允許用戶在有限數量的選項中選擇零個或多個選項。
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" /> 定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值, 它們的值也可以由 JavaScript 進行修改。
4.9. 重置按鈕
?4.9.1. <input type="reset" /> 定義重置按鈕。重置按鈕會清除表單中的所有數據。
4.10. 圖像形式的提交按鈕
?4.10.1. <input type="image" /> 定義圖像形式的提交按鈕。必須把src屬性和alt屬性與<input type="image" />結合使用。
<input type="image" src="submit.png" alt="submit" />5. <input>標簽value屬性
5.1. value屬性為input元素設定值。
5.2. 對于不同的輸入類型, value屬性的用法也不同:
?5.2.1. type="button", "reset", "submit": 定義按鈕上的顯示的文本
?5.2.2. type="text", "password", "hidden": 定義輸入字段的初始值
?5.2.3. type="checkbox", "radio", "image": 定義與輸入相關聯的值
5.3. <input type="checkbox" />和<input type="radio" />中必須設置value屬性。
5.4. value屬性無法與<input type="file" />一同使用。
6. <input>標簽name屬性
6.1. name屬性規定input元素的名稱。
6.2. name屬性用于對提交到服務器后的表單數據進行標識, 或者在客戶端通過JavaScript引用表單數據。
6.3. 只有設置了name屬性的表單元素才能在提交表單時傳遞它們的值。
6.4. 語法
<input name="value" />7. <input>標簽readonly屬性
7.1.?readonly屬性規定輸入字段為只讀(不能修改)。
7.2. 語法
<input readonly="readonly" />8. <input>標簽checked屬性
8.1. checked屬性規定在頁面加載時應該被預先選定的input元素。
8.2. checked屬性與<input type="checkbox" />或<input type="radio" />配合使用。
8.3. checked屬性也可以在頁面加載后, 通過JavaScript代碼進行設置。
8.4. 語法
<input checked="checked" />9. <select>標簽和<option>標簽
9.1. <select>元素定義下拉列表。
9.2. option元素定義下拉列表中的一個選項(一個條目)。
9.3. 瀏覽器將<option>標簽中的內容作為<select>標簽的菜單或是滾動列表中的一個元素顯示。
9.4. option元素位于select元素內部。
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>標簽
10.1. <textarea>標簽定義多行的文本輸入控件。
10.2. 文本區中可容納無限數量的文本, 其中的文本的默認字體是等寬字體。
10.3. 可以通過cols和rows屬性來規定textarea的尺寸, 不過更好的辦法是使用CSS的height和width屬性。
10.4. 在文本輸入區內的文本行間, 用"%0D%0A"(回車/換行)進行分隔。
10.5. 可以通過<textarea>標簽的wrap屬性設置文本輸入區內的換行模式。
10.6. 可能屬性
11. <button>標簽
11.1. <button>標簽定義一個按鈕。
11.2. 在button元素內部, 您可以放置內容, 比如文本或圖像。這是該元素與使用input元素創建的按鈕之間的不同之處。
11.3. <button>控件與<input type="button" />相比, 提供了更為強大的功能和更豐富的內容。<button>與</button>標簽之間的所有內容都是按鈕的內容, 其中包括任何可接受的正文內容, 比如文本或多媒體內容。
11.4. 請始終為按鈕規定type屬性。Internet Explorer的默認類型是"button", 而其他瀏覽器中(包括W3C規范)的默認值是"submit"。
11.5. 可能屬性
12. <fieldset>標簽和<legend>標簽
12.1. fieldset元素可將表單內的相關元素分組。
12.2. <fieldset>標簽將表單內容的一部分打包, 生成一組相關表單的字段。
12.3. 當一組表單元素放到<fieldset>標簽內時, 瀏覽器會以特殊方式來顯示它們, 它們可能有特殊的邊界、3D效果, 或者甚至可創建一個子表單來處理這些元素。
12.4. <legend>元素為<fieldset>元素定義標題。
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. 效果圖
總結
以上是生活随笔為你收集整理的026_html表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 006-BS架构
- 下一篇： 027_html框架