iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
自我挑戰組

小白網頁設計練成記系列 第 10

小白網頁設計練成記-DAY10-淺談HTML-<input>

  • 分享至 

  • xImage
  •  

HTML 表單 (form) 是用來讓使用者輸入資料,這些資料可以用來和使用者互動,例如表單內容填完後可以傳回遠端伺服器 (web server),像常見的連絡表單。

沒有關閉標籤,其中輸入類型 type 為最重要的屬性類型,以下是幾種常見的 type 類型:

文字輸入
<input type="text" name="text">
純文字
<input type="password" name="password">
顯示會以符號代替文字
<input type="email" name="email">
會自動做簡單驗證
<input type="search" name="search">
搜尋框
<input type="tel" name="phone">
電話
<input type="url" name="url">
網址

選擇框
<input type="date" name="date">
日期或是簡單的日曆工具
<input type="color" name="color">
選擇顏色
<input type="number" name="single-number">
整數數字
<input type="file" name="upload-file">
上傳檔案
<input type="range" min="0" max="5" name="range-number">
一個範圍的數字
<input type="radio" name="gender" id="male" checked> <label for="male>男性</label>
單選框,要設定同樣的 name做選取文字,要搭配標籤 < label > 做選取文字
<input type="checkbox" name="interest" id="sport"><label for="sport">運動</label>
複選框,要設定同樣的 name,搭配標籤 做選取文字

按鈕

<input type="button" value="無動作按鈕">
<input type="submit" value="傳送表單">
<input type="reset" value="重置表單">

參考出處:https://yakimhsu.com/project/project_w6_HTML_form.html


上一篇
小白網頁設計練成記-DAY9-時間<time>與縮寫<abbr>的用法
下一篇
小白網頁設計練成記-DAY11-淺談form表單2
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言