如何創(chuàng)建HTML表單

本篇為大家介紹一下在瀏覽一些網(wǎng)站時(shí)經(jīng)常會(huì)用到的一種網(wǎng)頁(yè)元素--表單。如下圖，想必大家已經(jīng)再熟悉不過(guò)了，像這樣允許用戶輸入并使用按鈕提交信息的功能，我們稱之為表單，那么接下來(lái)為大家介紹HTML表單相關(guān)的一些知識(shí)點(diǎn)，希望對(duì)大家有所幫助。

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

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

action:數(shù)據(jù)最后所提交的頁(yè)面 絕對(duì)路徑/相對(duì)路徑

method:數(shù)據(jù)提交服務(wù)器時(shí)的提交方法 post get

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

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

(注冊(cè)時(shí)，用戶名填寫)

格式:

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

type:設(shè)置控件樣式 text

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

2、密碼框:只是用戶輸入的內(nèi)容看不到

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

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

1. <input type='radio' name="" value="" checked>標(biāo)示符 

name:為了保證傳遞服務(wù)器數(shù)據(jù)只有一個(gè)，所以name值必須相同

value：是用提交服務(wù)器時(shí)，該標(biāo)簽被提交的數(shù)據(jù),value不能相同;

checked:默認(rèn)按鈕組中的那個(gè)按鈕被選中

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

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

4、復(fù)選按鈕組: 與單選按鈕組的區(qū)別可以選擇多個(gè)，為了能將用戶選擇的多項(xiàng)內(nèi)容傳遞服務(wù)器中，要將name名字后面加個(gè)[]

格式:

1. <input type='checkbox' name="" id="" value="" checked>標(biāo)示 

選課:

1. <input type='checkbox' name='classes[]' checked value='1'>語(yǔ)文 
2.     <input type='checkbox' name='classes[]'  value='2'>數(shù)學(xué) 
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'>化學(xué) 
7.     <input type='checkbox' name='classes[]' checked value='7'>美術(shù)   

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

[page]

5)下拉列表框:

格式:

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

multiple:允許用戶選中多個(gè)下拉列表項(xiàng)

optgroup: 設(shè)置下拉分類標(biāo)示

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

1. <textarea name="" id="" cols="" rows=""> 
2.             內(nèi)容 
3.  textarea> 

rows:設(shè)置文本域可以輸入的行數(shù)

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

個(gè)人介紹:

1. <textarea name='descs' cols="50" rows="10"> 
2.             我是個(gè)學(xué)生 
3.     textarea> 

7)隱藏域：

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

8)上傳控件：

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

9)按鈕標(biāo)簽:

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

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

value：按鈕中顯示的數(shù)據(jù)和提交到服務(wù)器后該控件提交的值

1. <input type='button' name='clicks' value="點(diǎn)我"/> 

提交按鈕:點(diǎn)擊后可以提交表單

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

重置按鈕:點(diǎn)擊后可以將用戶輸入的數(shù)據(jù)清空

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

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

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

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