iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
自我挑戰組

大學 50 萬貸款的交代系列 第 2

Day 2 _ 關於 HTML 標籤語言 - 2

同學幫我填一下問卷好嗎 (・ω´・ )

不一定是問卷,舉凡註冊、登入、上傳檔案、錯誤回報、甚至是打LOL檢舉中離仔使用的都是 HTML 的表單標籤。表單是一個很大的學問,也有人做過很多相關的研究。所以會把表單標籤的內容分兩天,沒什麼興趣看表單怎麼做的朋友們,也可以看 Day4 設計表單的一些訣竅。(ゝ∀・)

表單起手式

Day 2 的目標,我們嘗試來做一個簡單的註冊頁面。首先,我們應該要先知道需要哪些欄位。一般來說,註冊需要的就是帳號、密碼、信箱。

<!--表單的內容需要使用form的成對標籤框起來-->
<form>

    <!--input標籤表示該區塊提供使用者輸入,也是沒有成對的標籤之一-->
    <input type="text" name="account" placeholder="帳號"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="email" name="email" placeholder="電子信箱">
    <input type="submit" name="submit" value="送出">
    
</form>

input 裡面的元素 type,是要告訴瀏覽器該表格欄位的內容為何種形式。如果瀏覽器大大人好一點,還會幫你檢查使用者輸入的內容是不是符合該種 type 的樣子。d(`・∀・)b
例如:
type=password 就會在輸入內容時變成一堆黑點
type=email 就會檢查該欄位是否有 @ 的符號
type=submit 就會變成一個按鈕,讓使用者可以把表單送出
...
想要了解 HTML 所有的 type 我把它放在這裡,這個連結是 w3schools 的網頁,裡面有很多網頁的教學與實作,有需要可以搭配服用。

input 裡面的元素 name,則是要給使用者輸入的資料一個名字。以上面的程式為例,使用者輸入的帳號,會使用 account 這個名稱來代表使用者打的帳號資訊,在後端(伺服器端)的程式要取用使用者輸入的帳號內容,就要以這個名字呼叫。

input 裡面的元素 placeholder,是給使用者的提示,告知使用者此欄位要輸入的內容,或是提示輸入的格式。但還是有天真可愛的使用者不按牌理出牌就是了 (#`Д´)ノ

更多表單內容

表單中也很常看到選取方塊與下拉式選單。我們先來做兩個選取方塊的範例吧

<!--表單的內容需要使用form的成對標籤框起來-->
<form>

    
    <input type="text" name="account" placeholder="帳號"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="email" name="email" placeholder="電子信箱"><br>
    
    <!-- type=radio 做出來有單選的效果-->
    <input type="radio" name="gender" value="male">
    <label for="male">男孩子</label>
    <input type="radio" name="gender" value="female">
    <label for="female">女孩子</label>
    <input type="radio" name="gender" value="others">
    <label for="others">其他</label><br>
    
    <!-- type=checkbox 做出來有複選的效果-->
    <input type="checkbox" name="provision" value="yes">
    <label for="provision"> 我同意上述使用者條款</label><br>
    <input type="checkbox" name="newspaper" value="yes">
    <label for="newspaper"> 我要訂閱 OOXX 電子報</label><br>
    
    <input type="submit" name="submit" value="送出">
    
</form>

type=radio 這個參數告訴瀏覽器這個input是一個單選方塊。以上面的程式為例,三個 radio 的 name 都屬於 gender 。也就是說,不管使用者選了什麼,最後 gender 只會是 male 、 female 或others 其中一個選項。

而 type=checkbox 就比較好理解。如果使用者有勾選,送出表單時,才會送出該選取方塊的name和value。所以與其說是多選,不如說這些選項都是獨立的個體,不像 radio 使用相同的 name 把多個選取方塊群組在一起。

最後我們再加上一個下拉式選單。
Day 2 篇幅好長_(:3 」∠ )_

<form>

    
    <input type="text" name="account" placeholder="帳號"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="email" name="email" placeholder="電子信箱"><br>
    <input type="radio" name="gender" value="male">
    <label for="male">男孩子</label>
    <input type="radio" name="gender" value="female">
    <label for="female">女孩子</label>
    <input type="radio" name="gender" value="other">
    <label for="other">其他</label><br>
    
    <!--下拉式選單需要先用一對 select 標籤標示選項-->
    <select name="position">
    
      <!--每個選項需要用一對 option 標籤標示選項的文字-->
      <option> --- 請選擇職業 --- </option>
	  <option value="student">學生</option>
	  <option value="teacher">老師</option>
	</select><br>

    <input type="checkbox" name="provision" value="yes">
    <label for="provision"> 我同意上述使用者條款</label><br>
    <input type="checkbox" name="newspaper" value="yes">
    <label for="newspaper"> 我要訂閱 OOXX 電子報</label><br>
    <input type="submit" name="submit" value="送出">


</form>

最簡單的頁面這樣就完成了,可以使用記事本貼上範例程式碼,再用瀏覽器打開來就會看到這個表單呈現的樣子了,完成的樣子如下圖。

Day 3 會介紹如何把做好的表單送回伺服器


上一篇
Day 1 _ 關於 HTML 標籤語言 - 1
下一篇
Day 3 _ 關於 HTML 標籤語言 - 3
系列文
大學 50 萬貸款的交代30

尚未有邦友留言

立即登入留言