HTML-input 輸入框-type類型

2019 年 6 月 24 日

HTML 基本 –https://timshyue.com/%e5%9f%ba%e6%9c%achtml/

TYPE 類型

HTML5的出现，節省掉眾多的JS進行判斷。

各種HTM-INPUT常用到的Type類型

可以用在使用者前端過濾與防止使用者輸入錯誤，並有效地增加使用者體驗

也可以防止使用者輸入錯誤資訊

但像是type=”tel”這種的，每個國家不一樣，所以很容易產生誤判

  • 按鈕<input type="button">
  • 複選框<input type="checkbox">
  • 顏色選擇<input type="color">
  • 日期選擇<input type="date">
  • 日期+時間選擇 <input type="datetime-local">
  • email<input type="email">
  • 檔案<input type="file">
  • 隱藏<input type="hidden">
  • 月份選擇<input type="month">
  • 數字<input type="number">
  • 密碼<input type="password">
  • 單選<input type="radio">
  • 滑動桿 <input type="range">
  • 變回預設值<input type="reset">
  • 搜索查詢 <input type="search">
  • 送出表單<input type="submit">
  • 電話<input type="tel">
  • 文字<input type="text">
  • 時間<input type="time">
  • 網址<input type="url">
  • 第幾個星期<input type="week">
按鈕
複選框
顏色選擇
日期選擇
日期+時間選擇
email
檔案
隱藏
月份選擇
數字
密碼
單選
滑動桿
變回預設值
搜索查詢
送出表單
電話
文字
時間
網址
第幾個星期

參考:
https://www.w3school.com.cn/tags/tag_input.asp
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input