html表單
一、HTML 表單作用:用於蒐集不同類型的用戶輸入,用戶提交表單時向服務器傳送數據,從而實現用戶與web服務器的交互。
二、<form> 元素定義 HTML 表單:
<form>
Form elements
</form>
三、HTML 表單包含的表單元素:
<input> 元素
<input> 元素是最重要的表單元素。
<input> 元素有很多形態,根據不同的 type 屬性,如:
1.文本框類:
(1)單行文本框:text
<input type="text" name="name" value="your name">
(2)密碼框:password
<input type="password" value="密碼">
2.選擇類:
(1)單選:radio
<input
type="radio"
name="sex"
value="男"/>男
<input
type="radio"
name="sex"
value="女"/>女
注意:單選時,name值相同時爲一組值,每次只能選一個
(2)多選:checkbox
<input
type="checkbox"
value="籃球" name="like">籃球
<input
type="checkbox"
value="足球" name="like">足球
<input
type="checkbox"
value="排球" name="like">排球
3.提交(按鈕)類:
(1)普通按鈕:button
<input type="button" value="確定">
(2)提交按鈕:submit
<input
type="submit"
value="發送">
(3)重置按鈕:reset
<input
type="reset"
value="重置">
(4)圖片按鈕:
<input
type="image"
value="圖片"
src="1.jpg"
style="width:
35px;height:
30px;">
4.特殊:
(1)文件上傳:file
<input type="file">
(2)隱藏:hidden
<input type="hidden" value="隱藏">
注意:hidden時,該元素不再在頁面出現
<textarea>元素----多行文本框:
<textarea style="resize:none"></textarea>
注意:1.textarea默認 可以拉動框右下角改變文本域的大小;
2.可設置 style="resize: none"禁止改變大小,一般情況下要禁
止改變大小,因爲大小改變時會影響佈局;
3.textarea可以設置寬高,當改變大小時,有最小值,即爲設置的大小;
4.不設置寬高時,默認文本域的寬高分別是:163和36(包括padding=2,border=1)
<select>元素---下拉框元素:
<select
name="province">
<option>--請選擇--</option>
<option
selected="selected">西安</option>
<option>北京</option>
</select>
注意:selected="selected" 默認選中,不設置時默認選中第一個
<fieldset>---帶標題的框:
<fieldset>
<legend>愛好</legend>
<h1>喜歡</h1>
</fieldset>
注意:<legend>是標題,默認時在框的左上方,給其設置margin: 0 auto
讓標題處於框的中間位置。
四、表單FORM的5個屬性(name,method,action,enctype,target)
1.name:表單的名稱(通過爲表單命名可以控制表單與後臺程序之間的關係。)
2.method:定義表單結果從瀏覽器傳送到服務器的方法,一般有兩種方
法get和post
注意:method方法中
(1)GET方法::將表單內容附在URL地址後面,所以對提交信息的長度進行了限制,不可以超過8192個字符。如果信息太長,將被截去,從而導致意想不到的處理結果;同時GET方法不具有保密性,不適合處理如信用卡卡號等要求保密的內容,而且不能傳送非ASCII碼的字符。
(2)POST方法::將用戶在表單中填寫的數據包含在表單的主體中,一起傳送到服務器上的處理程序中,該方法沒有字符的限制,它包含了ISO10646的字符集,是一種郵寄的方式,在瀏覽器的地址欄不顯示提交的信息(保密性好),這種方式傳送的數據是沒有限制的。
當不指明是哪種方式時,默認爲GET方式。
3.action:用來定義表單處理程序(一個ASP,CGI等程序)的位置( 相對地址或絕對地址)
4.enctype:設置表單資料的編碼方式(設置表單信息提交的編碼方式)
有以下幾種:
(1)TEXT/plain:以純文本形式傳送信息;
(2)Application/x-www-Form-urlencoded:默認的編碼形式;
(3)Multipart/Form-data:使用MINE編碼。
5.target:設置返回信息的顯示方式(設置表單信息返回的窗口)
target的值有以下幾種:
(1)_blank:將返回信息顯示在新開的瀏覽器窗口中
(2)_parent:將返回信息顯示在父級瀏覽器窗口中
(3)_self:將返回信息顯示在當前瀏覽器窗口中
(4)_top:將返回信息顯示在頂級瀏覽器窗口中
(5)framename:將返回信息顯示在指定框架中