html表單

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="resizenone"></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:將返回信息顯示在指定框架

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章