form 標籤初學筆記

01-31

寫在前面：本文為本人的學習筆記，供自己複習參考，順便記錄自己成長過程，出錯的地方還請不吝賜教，另：本人平時學習搜索一些前輩的博客參考，故本文如有雷同，請留言，我立即刪除.

form標籤：

<form action="/userdata" method="get"> </form>n

1. 作用：為用戶的輸入創建html表單

輸入表單必須被form標籤包裹住，不然不能被提交

2.action屬性：

用戶點擊sumbit後會把表單信息按照action的地址提交

比如，我寫了下面一個簡單的表單：

<form action="/userdata" method="get">n <div id="username">n <label for="name">用戶名</label>n <input type="text" name="name" id="name">n </div>n <div id="userpassword">n <label for="password">密碼</label>n <input type="password" name="password" id="password">n </div>n <input type="submit" value="提交">n </form>n

會有如下預覽：

當我點擊體提交的時候，頁面會跳轉到

這裡的userdata正是我們action的值，那麼後面的 ？name=xie55 &password=123456是什麼呢？

就是我們的下一點：

3.method屬性：

用戶點擊sumbit，向action的地址提交了信息，是通過什麼方式提交的呢？這個就是method屬性的作用了

首先：method有兩個值：get和post，也就是我們數據提交有兩個方法：

get方法：瀏覽器與處理伺服器建立連接，然後直接在一個傳輸步驟中發送所有的表單數據：瀏覽器會將數據直接附在表單的 action URL 之後。這兩者之間用問號進行分隔，數據與數據之間用&符號分隔

那麼我們可以明顯的看到get方法不讓人滿意的地方：首先，這裡我們數據只要有兩個，那如果我們數據非常大呢？我們的URL豈不是大的恐怖？要知道，我們用chrom的時候url的最大長度為8182個字元。然後這裡我們可以看到get方法會把一切的數據都連接到url裡面，這些數據可能是一些非常重要的數據，比如這裡 password=123456就是非常致命的一點，在url裡面甚至會把用戶的密碼錶現出來

post方法：表單數據會包含在表單體內然後發送給伺服器.

當我們把上面例子的method改為post後我們可以看到：

這時候我們的url裡面就不包含用戶的信息了，這樣我們傳輸的數據可以更大，也可以更安全.

如有問題，歡迎指導，我的郵箱：xiesongwu55@outlook.com