注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時在頭部記得加上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、表單的使用

1.1 表單基礎

🐶1_bit：這一節咱們開始表單的學習。

👸小媛：表單是啥？

🐶1_bit：表單其實咱們平常都用過，例如你在一個網頁中輸入一些內容，然后用過注冊，信息上傳，其實在很多網頁之中這都是使用表單進行制作的。

👸小媛：哇，意思說這一節說到核心內容了？

🐶1_bit：哈哈哈，其實每一節的內容都很核心，所以需要認真學習呢。那咱們現在就開始學習表單吧。

👸小媛：好勒。

🐶1_bit：在 HTML 中，表單的標簽是 form 標簽，例如如下代碼示例就是一個表單。

<form></form>

👸小媛：那他們之間要寫什么內容呢？

🐶1_bit：先不急，咱們需要先搞懂的還有一個重要的屬性，那就是 action，action 屬性表示當前表單需要提交到的一個地址。

👸小媛：這個地址是什么意思呢？

🐶1_bit：在咱們的 web 開發中，網頁只是給予用戶呈現的一個頁面，例如一個注冊頁面，在這個頁面之中，用戶需要填寫對應的信息點擊提交完成注冊，當點擊提交之后，這個頁面的將會把信息給予到 action 屬性所對應的一個 url（鏈接）之中。

👸小媛：所以說 action 后面就是填寫一個鏈接咯？

🐶1_bit：對的，由于咱們目前沒有一個地址給予測試，咱們可以寫成如下示例。

<form action=""></form>

👸小媛：明白了。

🐶1_bit：現在咱們還需要給予這個表單一個 name 屬性，例如如下示例。

<form name="register" action=""></form>

👸小媛：如果不給這個 name 屬性呢？

🐶1_bit：當然你可以給或者不給，但是建議給，因為你所提交到后臺（action 中的 url 地址 ）時，你的信息會有一定的標記，當然有些時候不給也沒事，但是為了標準，防止弄錯，所以需要給一個name，這樣就可以通過你給的name 值區分你這個表單提交的是什么了；像在如上示例，給予了一個 register 作為名稱，那么就知道這個表單中的信息是用于注冊的。

👸小媛：明白了。

🐶1_bit：表單還需要給予一個屬性，那就是 method 屬性，這個屬性表示了這個表單提交數據到后臺時所采用的方式，可以選擇 get 或者 post。

👸小媛：get 和 post 是啥？

🐶1_bit：這是兩種數據提交的方式，你也可以認為一種數據提交的方式是 get，另外一種數據提交的方式是 post，這兩種數據提交方式默認為 get，但是 get 相比 post 提交方式來說并沒有 post 那么安全；當然，使用哪種數據提交的方式一般是后端程序員會告訴你，這個你不用著急。

👸小媛：那怎么寫呢？

🐶1_bit：如下就是使用 method 數據提交的示例。

<form name="register" action="" method="post"></form>

🐶1_bit：表單還可以用于上傳文件，這個時候就需要有一個屬性叫做 enctype，如果你需要上傳文件（包括圖片），必須設置 enctype 屬性為 enctype=“multipart/form-data”，例如如下示例。

<form name="register" action="" method="post" enctype="multipart/form-data"></form>

👸小媛：明白了，那這個 enctype 還有別的屬性嗎？這個屬性是自己隨便寫的還是？

🐶1_bit：enctype 自帶了 3 種屬性，分別是 text/plain 、 multipart/form-data 、application/x-www-form-urlencoded ，默認是 application/x-www-form-urlencoded；其中 text/plain 是表示純文本數據提交、multipart/form-data就是表示有文件數據上傳 、 application/x-www-form-urlencoded 默認。

👸小媛：意思說我正常情況下默認就可以不用動了對吧。

🐶1_bit：是這樣的。其中 from 表單還可以添加一個 target 屬性，點擊提交按鈕后可以選擇新窗口打開還是當前頁面打開，這個前幾節已經講過，在此就不再進行贅述了。

👸小媛：好，明白了。

二、表單控件

2.1 文本輸入框

🐶1_bit：那么接下來咱們就看看咱們表單之中有哪些控件。

👸小媛：啥是控件？

🐶1_bit：你可以理解為表單之中的元素，當然理解有點片面，不過也沒啥問題。

👸小媛：哈哈哈，你意思就是說“現在說了我也不明白的意思”。

🐶1_bit：哈哈，先這樣解釋后面你就懂了。表單中的元素有多種，例如文本輸入框、選項、圖片上傳等。一個簡單的文本輸入的表單示例如下。

<form name="register" action="" method="post" enctype="application/x-www-form-urlencoded"><input name="username" type="text" />
</form>

👸小媛：咦？其中的 input 就是控件嗎？

🐶1_bit：對的，input 就是控件，在網頁中顯示如下。

👸小媛：哈哈哈，這陣的是一個文本框呀。

🐶1_bit：對的，還有一個需要注意，input 標簽中的 name 建議一定要給予，當你在這個 input 標簽所顯示在頁面的輸入框中輸入內容后，點擊提交的內容進入后臺時，需要通過你輸入的name 值進行值的判斷，也就是說，你輸入的 name 值用于標識當前數據是什么內容。在當前示例中，我所示例的 name 值為 username，也就是說當前的 username 這個名稱與這個輸入框的值進行標記。

👸小媛：原來如此，明白了。

🐶1_bit：還有一個也需要注意，其中的 type 屬性表示當前控件的類型，你寫成 text 那么就對應的是文本輸入框類型。

👸小媛：明白了，那還可以選擇什么類型的控件呢？

🐶1_bit：先別急，咱們還可以為這個文本設置對應的屬性值，例如。

<form name="register" action="" method="post" enctype="application/x-www-form-urlencoded"><input size="30" placeholder="請輸入內容" name="text1" type="text" /><input value="默認值" placeholder="請輸入不大于3位的內容" name="text2" type="text" /><input placeholder="請輸入不大于6位的密碼" maxlength="6" name="pw" type="password" />
</form>

👸小媛：哇，這些都有什么用呢？

🐶1_bit：以上示例中，size 屬性表示了當前這個 input 的長度、 placeholder 表示提示語、maxlenght 表示了當前所能填寫內容的最大長度、value 表示了表單的默認值、type=“password” 表示了當前表單輸入為密碼。

👸小媛：明白了，輸入值也是看不見的樣子。

2.2 radio 單選項

🐶1_bit：那咱們接下來再看看 radio 類型，也就是單選項。

<form name="register" action="" method="post" enctype="application/x-www-form-urlencoded"><input size="30" placeholder="請輸入內容" name="text1" type="text" /><input value="默認值" placeholder="請輸入不大于3位的內容" name="text2" type="text" /><input placeholder="請輸入不大于6位的密碼" maxlength="6" name="pw" type="password" /><br/><input name="radio1" type="radio" value="mianbao" /> 面包 <br/><input name="radiox1" type="radio" value="baozi" /> 包子 <br/><input name="radio1" type="radio" value="shengjianbao" /> 生煎包 <br/><input name="radio2" type="radio" value="xigua" /> 西瓜 <br/><input name="radio2" type="radio" value="yumi" /> 玉米 <br/><input name="radio2" type="radio" value="danbaizhi" /> 蛋白質 <br/>
</form>

🐶1_bit：以上內容中使用 name 值用于區分不同的單選項組，其中相同的name 值 name="radio1"為一組，另一組為 name="radio2"，沒組內容為單選項。

👸小媛：真的耶，選了一下確實只能選擇一個。

👸小媛：那那個vaule 是啥呢？

🐶1_bit：這個 value 就表示你選擇的每一項的值，當表單提交后就會提交你選中的 value 值。

👸小媛：原來如此。

2.3 復選項

🐶1_bit：既然有了單選項那么必然會有復選項，例如如下示例。

<form name="register" action="" method="post" enctype="application/x-www-form-urlencoded"><input size="30" placeholder="請輸入內容" name="text1" type="text" /><input value="默認值" placeholder="請輸入不大于3位的內容" name="text2" type="text" /><input placeholder="請輸入不大于6位的密碼" maxlength="6" name="pw" type="password" /><br/><input name="radio1" type="radio" value="mianbao" /> 面包 <br/><input name="radio1" type="radio" value="baozi" /> 包子 <br/><input name="radio1" type="radio" value="shengjianbao" /> 生煎包 <br/><input name="radio2" type="radio" value="xigua" /> 西瓜 <br/><input name="radio2" type="radio" value="yumi" /> 玉米 <br/><input name="radio2" type="radio" value="danbaizhi" /> 蛋白質 <br/><input name="checkbox1" type="checkbox" value="chdd" /> 成華大道 <br/><input name="checkbox1" type="checkbox" value="erxq" /> 二仙橋 <br/><input name="checkbox1" type="checkbox" value="jiji" /> 大爺 <br/>
</form>

👸小媛：復選框就是 checkbox，明白了，并且還可以進行復選。

🐶1_bit：是的，這些標簽如果你要用做 form 表單標簽你就必須放在 form 表單之內，這樣提交后才有效，如果你不用做表單也可以直接添加在 html 文檔之中。

👸小媛：明白了。

2.4 file 文件上傳

🐶1_bit：接下來咱們了解一下上傳文件的 input 類型 file，如下所示。

<input name="file" type="file" /> 

👸小媛：此時在頁面中如下顯示。

🐶1_bit：只需要選擇瀏覽，就可以選擇文件了。

👸小媛：奧耶，不錯不錯。

2.5 多行文本輸入框

🐶1_bit：你就負責喊 666 就好了。接下來咱們再來看一個 textarea，你可以理解為多行文本。

<textarea name="textarea" cols="20" rows="10">

👸小媛：其中 cols 屬性為列、rows為行吧？

🐶1_bit：是的，這是在頁面中的顯示情況。

👸小媛：但是我發現點擊右下角可以拖動這個多行文本框耶。

🐶1_bit：這個你可以使用一個樣式，就可以禁止拖動了。

<textarea style="resize: none;"  name="textarea" cols="20" rows="10">

👸小媛：明白了，右下角的拖動按鍵消失了。

2.6 重置按鈕

🐶1_bit：接下來咱們再看一個重置按鈕 rest。

<input type="reset" value="重置">

🐶1_bit：點擊后即可重置輸入的內容。

👸小媛：真方便。

2.7 按鈕

🐶1_bit：那現在咱們就介紹一下提交按鈕了，只需要把 input 的類型提交成 submit 就可以了。

<input type="submit" value="提交按鈕">

👸小媛：點擊這個按鈕就可以直接提交表單了嗎？

🐶1_bit：是的，也有普通的按鈕，叫做 button，如下所示。

<button>普通按鈕</button>

👸小媛：這兩個按鈕還有什么別的區別嗎？

🐶1_bit：應該說相對于 input 的 submit 按鈕，button 按鈕更加靈活，在 button 按鈕之中還可以嵌入一些圖片，并且讓圖片具有按鈕特性，例如如下所示。

<button><img src="./img/1.png"></button>

🐶1_bit：此時這個圖片就有按鈕的特性了。

👸小媛：哇，我喜歡用button。

🐶1_bit：哈哈哈，我也喜歡。其實對于表單來說，只要咱們將一些有信息內容的標簽丟到其中，給予name 標簽，那么這些對應的標簽所對應的值都將隨著表單進行提交。

👸小媛：原來是這么回事，所以這些標簽就像剛剛你說的那樣，不一定需要寫在 form 之中。

🐶1_bit：對的。所以這一節的內容大致就學完了，你可以自己按照想法做一個問卷，用表單來做試一下。

2.8 下拉列表

👸小媛：可是我學的內容還沒那么多呀，下拉列表我就不會。

🐶1_bit：那我就教你吧，下拉列表使用 select 標簽，每一個選項在其內部使用 option 標簽，如下所示。

<select name="ccc"><option value="xc">小吃</option><option value="ls">零食</option><option value="kqs">礦泉水</option><option value="gz">瓜子</option><option value="hs">花生</option><option value="bbz">八寶粥</option>
</select>

👸小媛：select 就是下拉選項標簽？然后 option 放在里面就是選項？

🐶1_bit：是的，然后你要放在表單內的話你需要給 select 一個name 值，然后每個 option 一個 value 值屬性。

👸小媛：明白了，看見效果了。

👸小媛：歐了。

目錄

【前端就業課 第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課 第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課 第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課 第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課 第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解