基本表單元素:
<form action="/submit" method="post">
<!-- 文字輸入框 -->
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<!-- 電子郵件輸入框 -->
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required>
<!-- 密碼輸入框 -->
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<!-- 數字輸入框 -->
<label for="age">年齡:</label>
<input type="number" id="age" name="age" min="1" max="120">
<!-- 日期輸入框 -->
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
<!-- 提交按鈕 -->
<input type="submit" value="提交">
</form>
進階表單元素:
<form>
<!-- 單選按鈕 -->
<fieldset>
<legend>性別:</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
</fieldset>
<!-- 複選框 -->
<fieldset>
<legend>興趣:</legend>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">閱讀</label>
<input type="checkbox" id="music" name="hobbies" value="music">
<label for="music">音樂</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">運動</label>
</fieldset>
<!-- 下拉選單 -->
<label for="city">居住城市:</label>
<select id="city" name="city">
<option value="">請選擇</option>
<option value="taipei">台北</option>
<option value="taichung">台中</option>
<option value="kaohsiung">高雄</option>
</select>
<!-- 多行文字區域 -->
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="請輸入您的留言..."></textarea>
<!-- 檔案上傳 -->
<label for="file">上傳檔案:</label>
<input type="file" id="file" name="file" accept=".jpg,.png,.pdf">
<!-- 按鈕 -->
<button type="submit">提交表單</button>
<button type="reset">重設</button>
<button type="button">一般按鈕</button>
</form>
表單屬性說明:
- action:表單提交的目標 URL
- method:提交方式(get 或 post)
- required:必填欄位
- placeholder:輸入提示文字
- min/max:數值範圍限制
- accept:檔案上傳的檔案類型限制
- name:欄位名稱(用於資料傳送)
- id:元素識別碼(用於 label 關聯)
🎉 恭喜完成 HTML 基礎教學!
您已經學會了 HTML 的基本概念和常用標籤。接下來可以學習 CSS 來美化網頁,或是 JavaScript 來增加互動功能!