HTML+CSS 輕松入門之表單
一：表單
表單是由<form></form>構(gòu)成
表單用于收集信息，例如注冊：需要輸入用戶名，密碼，郵箱，手機號，驗證碼等，這些數(shù)據(jù)都是通過表單提交，在另外的頁面去接收這些信息
如何寫表單如下代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歡迎學(xué)習(xí)表單</title> </head> <body> <form></form> </body> </html>
這樣我們就已經(jīng)把一個簡單的表單寫好了，大家看下下面的屬性參數(shù)：
接下來我們看表單標簽的幾個常用的屬性
1. action
2.method
3.enctype="multipart/form- data"
action
action 屬性定義在提交表單時執(zhí)行的動作。
向服務(wù)器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 服務(wù)器上的網(wǎ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 這個文件中，我們可以獲取表單的信息，從而進行處理，進行判斷或者添加到數(shù)據(jù)庫等
method
method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）：
<form action="" method="GET"></form>
<form action="" method="POST"></form>
后面我們會講到倆者之間的區(qū)別
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="hid" id=2>
3.文本域 <textarea name="content"></textarea>
4.單選按鈕 <input type="radio" name="radio" value="radio" />
5.復(fù)選框 <input type="checkbox" name="checkbox" value="checkbox" />
6.下拉框 <select name="select"></select>
7.上傳文件 <input type="file">
8.按鈕 提交：submit 重置：reset 提交：button
接下來我們把這些表單元素整合到一個實例中，如下代碼：
<!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"> <!--隱藏域默認是不顯示的--> 簡介：<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重置 當我們表單內(nèi)有信息的時候，點擊，會把內(nèi)容清空
Submit 與 button 的區(qū)別
當我們點擊submit按鈕 表單會提交到一個頁面，點擊button 時，沒有實現(xiàn)跳轉(zhuǎ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會把表單提交的內(nèi)容展示在地址欄上，使用post 方式就不會展示表單提交的信息，
總體來說，大部分表單提交都會使用post 方式，安全性高
1.Post傳輸數(shù)據(jù)時，不需要在URL中顯示出來，而Get方法要在URL中顯示。
2.Post傳輸?shù)臄?shù)據(jù)量大，可以達到2M，而Get方法由于受到URL長度的限制,只能傳遞大約1024字節(jié).
3.Post顧名思義,就是為了將數(shù)據(jù)傳送到服務(wù)器段,Get就是為了從服務(wù)器段取得數(shù)據(jù).而Get之所以也能傳送數(shù)據(jù),只是用來設(shè)計告訴服務(wù)器,你到底需要什么樣的數(shù)據(jù).Post的信息作為http請求的內(nèi)容，而Get是在Http頭部傳輸?shù)?/p>
