如何創建HTML表單

本篇為大家介紹一下在瀏覽一些網站時經常會用到的一種網頁元素--表單。如下圖，想必大家已經再熟悉不過了，像這樣允許用戶輸入并使用按鈕提交信息的功能，我們稱之為表單，那么接下來為大家介紹HTML表單相關的一些知識點，希望對大家有所幫助。

1)表單:幫助服務器收集客戶端信息的一種機制

1. <form action="提交到的頁面" method="提交的方法">         
2.     表單控件  
3. form>  

action:數據最后所提交的頁面 絕對路徑/相對路徑

method:數據提交服務器時的提交方法 post get

2)表單控件:表單用于用戶填寫信息的控件

1、文本控件: 用于用戶填寫較少信息，且可以顯示用戶填寫信息的控件

(注冊時，用戶名填寫)

格式:

1. <input type="text" name=""  id=""  value="" size="" placeholder=""/> 

type:設置控件樣式 text

name:用于表單收集信息的一種標示符，也就是控件的名稱

2、密碼框:只是用戶輸入的內容看不到

1. <input type="password" name="" id=""  size=""/> 

3、單選按鈕組:由多個單選按鈕組成的按鈕組，只能選中其中一個，這種按鈕組

1. <input type='radio' name="" value="" checked>標示符 

name:為了保證傳遞服務器數據只有一個，所以name值必須相同

value：是用提交服務器時，該標簽被提交的數據,value不能相同;

checked:默認按鈕組中的那個按鈕被選中

1. 性別:<input type='radio' name="" value="" checked>男 
2.     <input type='radio' name="" value="" checked>女 
3.     <input type='radio' name="" value="" checked>保密 

所有表單控件name值不能相同!!!

4、復選按鈕組: 與單選按鈕組的區別可以選擇多個，為了能將用戶選擇的多項內容傳遞服務器中，要將name名字后面加個[]

格式:

1. <input type='checkbox' name="" id="" value="" checked>標示 

選課:

1. <input type='checkbox' name='classes[]' checked value='1'>語文 
2.     <input type='checkbox' name='classes[]'  value='2'>數學 
3.     <input type='checkbox' name='classes[]'  value='3'>歷史 
4.     <input type='checkbox' name='classes[]'  value='4'>政治 
5.     <input type='checkbox' name='classes[]'  value='5'>物理 
6.     <input type='checkbox' name='classes[]'  value='6'>化學 
7.     <input type='checkbox' name='classes[]' checked value='7'>美術   

注意：一定要在name屬性后面添加[]

[page]

5)下拉列表框:

格式:

1. <select name="" > 
2.             <option value="" selected>下拉列表項option> 
3.             <option value="" >下拉列表項option> 
4.             <option value="" >下拉列表項option> 
5.             <option value="" >下拉列表項option> 
6.             <option value="" >下拉列表項option> 
7.          select> 

multiple:允許用戶選中多個下拉列表項

optgroup: 設置下拉分類標示

6) 文本域：可以輸入多行數據的表單控件

1. <textarea name="" id="" cols="" rows=""> 
2.             內容 
3.  textarea> 

rows:設置文本域可以輸入的行數

cols:設置的文本域輸入的列數(一行可以輸入多少個字符)(不是PX)

個人介紹:

1. <textarea name='descs' cols="50" rows="10"> 
2.             我是個學生 
3.     textarea> 

7)隱藏域：

1. <input type="hidden" name = “”value =””> 

8)上傳控件：

1. <input type="file" name=””> 

9)按鈕標簽:

普通按鈕:為js提供的控件

1. <input type='button' name=”” value=""/> 

value：按鈕中顯示的數據和提交到服務器后該控件提交的值

1. <input type='button' name='clicks' value="點我"/> 

提交按鈕:點擊后可以提交表單

1. <input type='submit' name="add" value='注冊'/> 

重置按鈕:點擊后可以將用戶輸入的數據清空

1. <input type='reset' name='cancel' value='重置'> 

圖片提交按鈕:使用圖片作為提交按鈕

1. <input type='image' src='圖片地址' name=””> 

本文的分享就到這，感興趣的同學可以自己試試看噢!