Form 用法超簡單!新手也能快速上手 ( 表單製作教學 )

哈囉，大家今天要來跟大家分享一下我最近在搞的一個東西，就是網頁上常見的那個 ফর্ম，對，就是讓你們填資料的那個東西。

一開始，我還真不知道從哪裡下手咧。想說，這玩意兒不就一堆框框，然後一個按鈕送出去就好嗎？結果，代誌不是憨人想的那麼簡單！

我先去弄一個最基本的 ফর্ম 框架。這就像蓋房子一樣，要先打好地基嘛我用 <form> 這個標籤，把它包起來。裡面放一些 <input>，就是讓使用者輸入文字的框框。然後，還加一個 <button>，就是那個送出的按鈕。

初步的表單

就像這樣：

<form>
<input type="text" placeholder="請輸入你的名字">
<button type="submit">送出</button>
</form>

弄好之後，我發現，咦？怎麼送出去都沒反應？原來，我還沒告訴它要送去哪裡！這就像寄信，你總得寫個地址？我就在 <form> 標籤裡面加一個 action 屬性，填上後端的網址。

重點來!

接著，我又想，除輸入文字，應該還要可以選東西？像是選性別、選喜歡的水果之類的。這時候，我就用 <select> 和 <option> 這兩個標籤。<select> 就像一個下拉式選單，<option> 就是裡面的選項。

弄完這些，我還想，能不能讓使用者一次選很多個東西？像是選喜歡的顏色，可能不只一個嘛這時候，我就發現 <input type="checkbox"> 這個好東西，它就是一個小方框，可以讓你打勾勾。然後，我還用 <label> 標籤，把文字和框框包在一起，這樣點文字也可以選到框框，比較方便。

最後，我還學到一個叫做「表單驗證」的東西。就是說，在資料送出去之前，先檢查一下使用者有沒有填錯。像是名字不能空白、Email 要有 @ 符號之類的。這部分，我還在慢慢摸索，之後再跟大家分享心得囉！

總之，這次搞這個 ফর্ম，讓我學到不少東西。原來，一個小小的表單，背後還藏著這麼多學問！希望今天的分享對大家有幫助，下次見！