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>

參考資料:


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