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