HTML+CSS 輕鬆入門之表單
一：表單
? ? 表單是由<form></form>構(gòu)成
? ? 表單用於收集資訊，例如註冊(cè)：需要輸入使用者名，密碼，郵箱，手機(jī)號(hào)，驗(yàn)證碼等，這些資料都是透過表單提交，在另外的頁(yè)面去接收這些資訊
? ? 如何寫表單如下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎學(xué)習(xí)表單</title> </head> <body> <form></form> </body> </html>
這樣我們就已經(jīng)把一個(gè)簡(jiǎn)單的表單寫好了，大家看下下面的屬性參數(shù)：
接下來我們看表單標(biāo)籤的幾個(gè)常用的屬性
1. action
2.method
?3.enctype="multipart/form- data"
action
action 屬性定義在提交表單時(shí)執(zhí)行的動(dòng)作。
向伺服器提交表單的常見做法是使用提交按鈕。
通常，表單會(huì)被提交到 web 伺服器上的網(wǎng)頁(yè)。
請(qǐng)看以下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎學(xué)習(xí)表單</title> </head> <body> <form action="login.php"> <!-- 表單元素等 --> </form> </body> </html>
看以上程式碼，我們的表單是提交到login.php，在login.php 這個(gè)檔案中，我們可以取得表單的信息，從而進(jìn)行處理，進(jìn)行判斷或新增至資料庫(kù)等
method
method 屬性規(guī)定在提交表單時(shí)所使用的HTTP 方法（GET 或POST）：
##<form action=" " method="GET"></form><form action="" method="POST"></form>#後面我們會(huì)講到倆者之間的差異enctype="multipart/form- data"#當(dāng)我們要上傳檔案時(shí)，這句話就必須放進(jìn)表單中< ;form action="" method="POST" enctype="multipart/form- data"></form>表單元素（重點(diǎn)）
1.文字方塊 ? ??????<input type="text" name="name" id=1>##2.隱藏域? ? ? ? ?<input type="hidden" name="hidden" id=2>
3.文字領(lǐng)域"radio" value="radio" />
5.複選框? ????? ?<input type="checkbox" name="checkbox" value="checkbox" />
##66 .下拉方塊?????????<select name="select"></select>7.上傳檔案? ? <input type="file">重置：reset ? ?提交：button接下來我們把這些表單元素整合到一個(gè)實(shí)例中，如下程式碼：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎學(xué)習(xí)表單</title> </head> <body> <form action="login.php" method="post" enctype="multipart/form- data"> 姓名：<input type="text" name="name" id=1><br><br> <input type="hidden" name="hidd"> <!--隱藏域默認(rèn)是不顯示的--> 簡(jiǎn)介：<textarea name="text" rows="10" cols=""></textarea> <br><br> <!--rows是要寫多少行 cols每行要寫多少個(gè)字符--> 國(guó)籍：<input type="radio" name="radio" value="radio" checked/>中國(guó) <input type="radio" name="radio" value="radio" />美國(guó) <input type="radio" name="radio" value="radio" />日本 <!--注：當(dāng)使用單選按鈕時(shí)，必須要有一個(gè)相同的name屬性--> <br><br> 愛好：<input type="checkbox" name="checkbox" value="checkbox" checked/>籃球 <input type="checkbox" name="checkbox" value="checkbox" />足球 <input type="checkbox" name="checkbox" value="checkbox" />音樂 <br><br> 來自： <select> <option selected>安徽</option> <option>上海</option> <option>北京</option> <option>浙江</option> </select> <br><br> <input type="file"> <!--上傳文件--> <br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="添加"> </form> </body> </html>
單選和多選，預(yù)設(shè)選取是checked ??可以直接在input中寫入
也可寫成chechked=”checked”
#下拉框，預(yù)設(shè)選取selected
按鈕
reset重置?當(dāng)我們表單內(nèi)有資訊的時(shí)候，點(diǎn)擊，會(huì)把內(nèi)容清空
Submit ?與button 的區(qū)別
當(dāng)我們點(diǎn)擊submit按鈕表單會(huì)提交到一個(gè)頁(yè)面，點(diǎn)擊button 時(shí)，沒有實(shí)現(xiàn)跳轉(zhuǎn)
Button需要綁定事件來觸發(fā)，當(dāng)觸發(fā)事件時(shí)，表單也會(huì)提交
POST與GET 的兩個(gè)物種提交方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>post</title> </head> <body> <form action="index.php" method="post"> 姓名：<input type="text" name="name"><br><br> 密碼：<input type="password" name="pwd"><br><br> <input type="submit" value="登錄"> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>post</title> </head> <body> <form action="index.php" method="get"> 姓名：<input type="text" name="name"><br><br> 密碼：<input type="password" name="pwd"><br><br> <input type="submit" value="登錄"> </form> </body> </html>
使用get會(huì)把表單提交的內(nèi)容展示在地址欄上，使用post 方式就不會(huì)展示表單提交的信息，
總體來說，大部分錶單提交都會(huì)使用post 方式，安全性高
1.Post傳輸資料時(shí)，不需要在URL中顯示出來，而Get方法要在URL中顯示。
2.Post傳輸?shù)馁Y料量大，可以達(dá)到2M，而Get方法由於受到URL長(zhǎng)度的限制,只能傳遞大約1024位元組.
3.Post顧名思義,就是為了將資料傳送到伺服器段,Get就是為了從伺服器段取得資料.而Get之所以也能傳送資料,只是用來設(shè)計(jì)告訴伺服器,你到底需要什麼樣的資料.Post的資訊作為http請(qǐng)求的內(nèi)容，而Get是在Http頭部傳輸?shù)?/p>
