Yakim shu Hi, 這是我擴充腦內海馬體的地方。
分類文章 全文列表

[第六週] HTML - 表單 form 介紹

相信大家都有填表單的經驗，最常見的應該就是 google form，今天要來簡單實作個表單的 HTML 結構。

不可或缺的標籤 <form>

所有 HTML 表單 都是以 <form> 元素开始，以下為 <form> 的屬性值：

單行輸入 <input>、說明文字 <label>

<input> 沒有關閉標籤，其中輸入類型 type 為最重要的屬性類型，以下是幾種常見的 type 類型：

[ 文字輸入 ]
<form>
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="search" name="search">
    <input type="tel" name="phone">
    <input type="url" name="url">
<form>
[ 選擇框 ]
<form>
    <input type="date" name="date">
    <input type="color" name="color">
    <input type="file" name="upload-file">
    <input type="number" name="sigle-number">
    <input type="range" min="0" max="5" name="range-number">
    <!-- 單選 -->
    <div>
        性別：
        <input type="radio" name="gender" id="male" checked>
        <label for="male">男性</label>
        <input type="radio" name="gender" id="female">
        <label for="female">女性</label>
    </div>
    <!-- 複選 -->
    <div>
        興趣：
        <input type="checkbox" name="interest" id="sport">
        <label for="sport">運動</label>
        <input type="checkbox" name="interest" id="reading">
        <label for="reading">閱讀</label>
    </div>
<form>
[ 按鈕 ]
<form>
    <input type="button" value="按了沒用">
    <input type="submit" value="按了會傳送表單">
    <input type="reset" value="按了會重置表單">
<form>

多行輸入 <textarea>

跟 <input> 標籤不同的是，需要有關閉標籤 </textarea>。

<form>
    <textarea name="message" cols="30" rows="10"></textarea>
</form>

下拉選單 <select>、<option>、<optgroup>

<form>
    <select id="myAddress" name="myAddress">
      <option>台北市</option>
      <option>新北市</option>
      <optgroup label="彰化縣">
        <option selected>彰化市</option>
        <option>花壇鄉</option>
        <option>鹿港鎮</option>
        <option>員林鎮</option>
      </optgroup>
    </select>
</form>

表單屬性

某些屬性是可以共用的，但並不是所有 input 的類型都可以擁有這些屬性，以下列出幾個最常見的屬性：

表單範例

除了加個背景色，內容沒有加上 CSS ，就是很醜的預設樣式。

性別：
興趣：

範例程式碼

<form>
  <div>
    <label for="name">姓名：</label> 
    <input type="text" id="name" value="我是 value 文字">
  </div>
  <div>
    <label for="phone">電話：</label> 
    <input type="tel" id="phone">
  </div>
  <div>
    <label for="email">Email：</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="date">日期：</label>
    <input type="date" id="date">
  </div>
  <div>
    <label for="password">密碼：</label>
    <input type="password" id="password">
  </div>
  <div>
    <label for="color">顏色：</label>
    <input type="color" id="color">
  </div>
  <div>
    <label for="upload-file">上傳檔案：</label>
    <input type="file" id="upload-file">
  </div>
  <div>
    <label for="sige-number">選個整數：</label>
    <input type="number" id="sigle-number">
  </div>
  <div>
    <label for="range-number">選個範圍 0 - 5：</label>
    <input type="range" min="0" max="5" id="range-number">
  </div>
    性別：
    <input type="radio" name="gender" id="male" checked>
    <label for="male">男性</label>
    <input type="radio" name="gender" id="female">
    <label for="female">女性</label>
  <div>
    興趣：
    <input type="checkbox" name="interest" id="sport">
    <label for="sport">運動</label>
    <input type="checkbox" name="interest" id="reading">
    <label for="reading">閱讀</label>
  </div>
  <div>
    <label for="message">給我們的建議：</label>
    <textarea name="message" id="message" cols="30" rows="10" placeholder="我是 placeholder 文字，開始輸入會消失"></textarea>
  </div>
  <div>
    <label for="myAddress">地址</label>
    <select id="myAddress" name="myAddress">
      <option>台北市</option>
      <option>新北市</option>
      <optgroup label="彰化縣">
        <option selected>彰化市</option>
        <option>花壇鄉</option>
        <option>鹿港鎮</option>
        <option>員林鎮</option>
      </optgroup>
    </select>
  </div>
  <div>
    <button type="submit">送出表單</button>
  </div>
</form>

參考資料：

( 以上內容大部分是 程式導師實驗計畫第三期 的學習筆記，如有錯誤歡迎糾正，非常感謝 🤓 )

Written on May 22nd , 2019 by Yakim shu
Feel free to share!

You may also enjoy: