HTML表單應用

標籤：複製   設定   隱藏   文本   屬性   tar   多個   multiple   pass   

A、表單元素都是放在<form></form>標籤內的。來看看錶單的屬性

　　  屬性　　　　　　　　　　　　值　　　　　　　　　　　　描述

　　accept　　　　　　　　　　MIME_type　　　　　　規定通過檔案上傳來提交的檔案的類型

　　accept-charset　　　　　　charset　　　　　　　 伺服器處理表單資料所接受的字元集

　　enctype　　　　　　　　　MIME_type　　　　　　規定表單資料在發送到伺服器之前應該如何編碼

　　method　　　　　　　　　get/post　　　　　　　 規定表單資料發送的方式，get方法和post方法

　　name　　　　　　　　　　 name　　　　　　　　　規定表單的名稱

　　target　　　　_blank/_parent/_self/_top　　　　 規定在何處開啟action URL

三個重要的屬性說明：

　　1、action指定該表單發送時接受操作的地址

　　2、method指定表單資料發送的方法。可選值:get、post。get發送則表單內的資料將附加到url後發送。post則是在HTTP請求中發送。

　　3、enctype指定表單資料在發送的伺服器之前如何編碼，特別注意的是，當含有上傳域時要設定編碼方式為enctype="multipart/form-data"，否則後台無法擷取到瀏覽器發送的檔案資料。是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，form裡面的input的值以2進位的方式傳過去。才能完整的傳遞檔案資料。FTP上傳大檔案的時候，也有個選項是以二進位方式上傳。

　　　　enctype的三個選項

　　　　　　　　值　　　　　　　　　　　　　　　　　　　描述

　　application/x-www-form-urlencoded　　　　在發送前編碼所有字元（預設）

　　multipart/form-data　　　　　　　　　　　　不對字元編碼。以二進位的方式發送資料，當表單含有上傳域時，必須使用後台才能擷取上傳的檔案。

　　text/plain　　　　　　　　　　　　　　　　　空格轉換為 "+" 加號，但不對特殊字元編碼。

其他常用說明

屬性	值	描述	DTD
accept	mime_type	規定通過檔案上傳來提交的檔案的類型。	STF
align	left right top middle bottom	不贊成使用。規定映像輸入的對齊。	TF
alt	text	定義映像輸入的替代文本。	STF
checked	checked	規定此 input 元素首次載入時應當被選中。	STF
disabled	disabled	當 input 元素載入時禁用此元素。	STF
maxlength	number	規定輸入欄位中的字元的最大長度。	STF
name	field_name	定義 input 元素的名稱。	STF
readonly	readonly	規定輸入欄位為唯讀。	STF
size	number_of_char	定義輸入欄位的寬度。	STF
src	URL	定義以提交按鈕形式顯示的映像的 URL。	STF
type	button checkbox file hidden image password radio reset submit text	規定 input 元素的類型。	STF
value	value	規定 input 元素的值。	STF

B、input

 

一、文本域

<input type="text" name="text" value="" />

二、密碼域

　　密碼跟文字框類似，但是在裡面輸入的內容顯示為圓點。

<input type="password" name="text" value="" />

三、選項按鈕

男人:<input type="radio" name="sex" value="male" /> Male<br />女人：<input type="radio" name="sex" value="female" /> Female

四、複選框

<input type="checkbox" name="check1" value="" />

五、按鈕

<input type="button" value="確認" />

六、重設按鈕

　　當點擊重設按鈕時，重設按鈕所在的表單將全部清空，而其他表單不受影響。

<input type="reset" value="重設" />

七、提交按鈕

　　當點擊提交按鈕時，瀏覽器將自動認可表單。

<input type="submit" value="提交" />

八、隱藏欄位

　　隱藏欄位在瀏覽器中並不顯示，僅僅為儲存一些不太重要的資料而存在。

<input type="hidden" value="我是一個隱藏欄位" />

九、上傳域

<input type="file" value="" />

十、圖片按鈕

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

十一、下拉式清單

<select>   <option value="0">0</option>   <option value="1">1</option>   <option value="2">2</option></select>     

　　

屬性	可選值	說明
disabled	disabled	規定禁用該下拉式清單。
multiple	multiple	規定可選擇多個選項。
name	name	規定下拉式清單的名稱。
size	number	規定下拉式清單中可見選項的數目。

十二、label

 　　label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。就是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。例如，當將選項按鈕放在label內。則點擊label內的文字也會觸發選項按鈕，而不必只是點中小圓點。

<p><label><input type="radio" name="male" />男人</label></p><p><label><input type="radio" name="male" />女人</label></p>

　　男人  女人

也可以寫成這樣

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

十三、disabled與readonly

　　　禁用和唯讀屬性。readonly只針對input(text / password)和textarea有效，而disabled對於所有的表單元素都有效，包括select, radio, checkbox, button等。但是表單元素在使用了disabled後，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去。

　　可以在使用者按了提交按鈕後，利用javascript將提交按鈕disabled掉，這樣可以防止網路條件比較差的環境下，使用者反覆點提交按鈕導致資料冗餘地存入資料庫。

        <form id="form1" action="/home/index" method="post">            禁用文字框：<input type="text" disabled="disabled" />            唯讀文字框: <input type="text" readonly="readonly" />        </form>

 十四、TextArea

屬性	值	描述	DTD
cols	number	規定文本區內的可見寬度。	STF
rows	number	規定文本區內的可見行數。	STF

        <form id="form1" action="/home/index" method="post">            <textarea cols="10" rows="10">我是一個兵，來自老百姓。</textarea>        </form>

十五、fieldset　　定義域

　　　　fieldset用於給表單元素分組，legend用於設定分組標題

          <fieldset>            <legend>你的資訊？</legend>            身高: <input type="text" value="180" />            體重: <input type="text" value="200" />          </fieldset>

顯示效果如下所示：

以下是一個簡單的例子：

        <form id="form1" action="/home/index" method="post">                  <input type="hidden" value="隱藏資訊" />            帳號: <input type="text" maxlength="8" /><br/>            密碼：<input type="password" /><br/>            姓名：<input type="text" name="Name" /><br/>            性別: <input type="radio" name="male" />男人                  <input type="radio" name="male" />女人<br/>            是否單身: <input type="checkbox" name="single" /> <br/>            年齡：<select name="age">                      <option value="0">0-30</option>                      <option value="1">31-60</option>                      <option value="2">60-100</option>                  </select><br/>            喜歡的花:<select multiple="multiple" name="flower">                        <option value="0">玫瑰花</option>                        <option value="1">百合花</option>                        <option value="2">仙人掌</option>                        <option value="3">鬱金香</option>                        <option value="4">萬壽菊</option>                     </select> <br/>            上傳照片：<input type="file" /> <br/>            <input type="image" src="brt_btn.png" /> <br/>            <input type="button" value="確認" />&nbsp;&nbsp;<input type="submit" value="提交" /> &nbsp;&nbsp;<input type="reset" value="重設" /><br/>        </form>

顯示效果如下:

　　　　

 

HTML表單應用