iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
1
Modern Web

HTML 與 CSS 學習筆記系列 第 22

Day22 - HTML 與 CSS (6) - Form 表單

Form 表單

  • <form>:有 action 來確定要送出的地方,method 則是送出的方法
  • <input>:用來輸入資料
    • type:依需求修改總類,如 text 就是輸入文字, submit 則是送出鈕
    • name:則是用定義好的名稱來與接收資料端溝通
    • placeholder:未輸入時之顯示內容
  • <label>:可用來說明,並且在點擊時可關聯到對應的 id
    • for:for id,點了可到指定的 id 位置,如指定的 <input>
<form action="送出的地方" method="送出資料的方法">
    表單內容
    <input type="text" name="mail">
    <input type="text" name="phone">
    <input type="submit" value="next">
</form>

呈現結果並試著輸入一些內容

按下 submit 按鈕,觀察網址列
會在最後面出現剛剛輸入的資料,從 ? 開始

index.html?mail=xxx%40mail&phone=0900

增加說明文字等資料

    <form action="">
        <label for="mail">電子郵件:</label>
        <input id="mail" type="text" placeholder="請輸入電子郵件"  name="mail">
        <br>
        <label for="phone">電話:</label>
        <input id="phone" type="text" placeholder="請輸入電話" name="phone">
        <br>
        <input type="submit" value="next">
    </form>

參考資料

次回

繼續說明 HTML 的表單


上一篇
Day21 - HTML 與 CSS (5) - Table 表格
下一篇
Day23 - HTML 與 CSS (7) - Form 表單
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言