html基本標籤表單實現交互原理，單選框，複選框，下拉框介紹

時間 2020-02-15

標籤 html 基本標籤表單實現交互原理單選複選框下拉介紹欄目 HTML 简体版

原文原文鏈接

表單是什麼？表單是前端和服務器作交互的一種機制，表單收集用戶輸入信息，以後發送或者提交給服務器。用戶在輸入的信息稱之爲內容，內容的文本分爲普通和密碼型，用戶經過單選框、複選框、下拉框（也就是下拉菜單）完成內容信息輸入，最後經過提交按鈕發送給服務器！這裏要講到瀏覽器怎麼發送給服務器？涉及到http協議，也就是超文本傳輸協議，它是瀏覽器和服務器通信的一種機制。模式爲：請求——應答，瀏覽器發送請求=>服務器接收=>自身處理=>結果返回瀏覽器=>瀏覽器根據結果展現頁面給用戶，請求分爲GET和POST。下面用代碼依次展現說明：html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>html基本標籤表單實現交互原理，單選框，複選框，下拉框介紹</title>
 7 </head>
 8 <body>
 9     <form action="" method="POST">
10         <!-- <input type="text">  --><!--若是沒有name值，提交不成功，導航網址會顯示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?-->
11         用戶：<input type="text" name="ueser"><!--文本輸入類型text-->
12         <!--添加name值，提交後，導航網址會顯示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=111-->
13         <br>
14         密碼：<input type="password" name="password"><!--密碼是password--><!--若是輸入用戶是11，密碼是abc展現爲這樣file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=11&password=abc-->
15         <p>這裏涉及到加密問題，瀏覽器傳輸服務器加密的密文用JS操做處理，後面學習中會聊到的</p>
16         <br>
17         性別：<input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="womnen">女<input type="radio" name="sex" value="weizhi">中性
18         <!--radio是單選框,這裏的name值都是同樣的，若是是不同的，選擇就是多個了-->
19         <!-- 性別: <input type="radio" name="sex1">男<input type="radio" name="sex">女<input type="radio" name="sex">中性 -->
20         <br>
21         <!-- <input type="checkbox">是這個複選框,能夠選擇多個 -->
22         愛好：<input type="checkbox" name="like" value="meinv">美女<input type="checkbox" name="like" value="car">汽車<input type="checkbox" name="like" value="power">權利
23         <br>
24         <!-- 下拉框select 裏面有選項是option -->
25         城市: 
26         <select name="city">
27             <option name="beijing" value="bj">北京</option>
28             <option name="shanghai" value="sh">上海</option>
29             <option name="guangzhou" value="gz">廣州</option>
30             <option name="shenzhen" value="sz">深圳</option>
31         </select>  
32         <br>
33         <input type="submit"><!--文本提交按鈕submit-->
34         <!--若是這樣就點擊提交，導航欄會出現file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=1&sex=on&like=on&city=%E5%8C%97%E4%BA%AC-->
35     </form>
36 </body>
37 </html>

而後你會驚訝的發現你的愛好和性別展現都是on，沒出來，這是什麼緣由了？由於前端瀏覽器給用戶看，會涉及到一個默認值，用value表示,就是說只要和選擇相關就須要有默認值提交給服務器,這樣咱們添加下value值，以前是沒有的，如今在從新輸入下:
瀏覽器的窗口網址就會展現以下：file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=abc&sex=boy&like=meinv&city=bj前端

固然這樣你提交的內容，服務器仍是沒辦法接收到，那怎麼辦了?在<form action="">中action=""是一個提交動做，填寫你提交的地址，比方說http://www.dhnblog.com/，注意了這裏須要用到method=""，咱們的請求分爲GET和POST，只須要修改form表單開始標籤瀏覽器

<form action="" method="GET">GET請求<form action="" method="POST">POST請求,它們的區別是GET請求內容展現在導航欄網址中，POST請求在控制檯裏面，以下圖所示：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。