2023-04-09

HTML基礎標籤 -- input

開場

上一篇的文章中,我們介紹到了<!DOCTYPE html>、<b>、<strong>以及<br/>,這次,我們要來介紹更多種類的標籤!

範例程式

今天要討論的,是HTML的input與input的類型(type)!下面,來跟各位介紹一下吧!

如果今天要輸入的只是一般文字,那麼你可以輸入以下的程式碼:
<input type="text">

而如果,今天的欄位是要用於輸入密碼的,則可以使用
<input type="password">

一份表單總是會需要一個「提交」按鈕,如果今天你需要「提交」按鈕,你可以使用以下的程式碼
<input type="submit">

有時我們會需要一個勾選框,用來讓使用者標示像是「我已詳閱隱私權政策」等等的內容,那麼你可以使用

<input type="checkbox">

客製的衣服要以什麼顏色為底色呢?挑一個吧!
<input type="color">

需要一個「單選題」的勾選框嗎?試試這個!

<input type="radio">

「請選擇住宿起訖日」......(日期
<input type="time">

當然~我們總是會有需要上傳檔案的需求,用以下的程式碼,你就可以選擇要上傳的檔案了喔!
<input type="file">

以下,我們來實際讓大家體驗一下各程式碼的作用如何!

實際操演

text演示:


password演示:


submit演示:


checkbox演示:


color演示:


radio演示:


time演示:


file演示:


結語

以上就是今天的教學啦!如果有疑問,歡迎在下方留言詢問!今天的內容就到這邊告一段落!下次見,掰掰!

沒有留言:

張貼留言

留言注意事項:

勾選「通知我」可在後續有回覆時寄信給您!

使用Safari恐無法登入留言(只能以匿名方式留言)!

敬請詳細描述問題,以方便站方迅速判斷與解答!

依據本站免責聲明,本站得逕行刪除含有不適合存在於本站的言論與字詞的發言,敬請謹慎留言!