iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

網頁前端設計系列 第 16

Day16-HTML(十四):表單-input type

  • 分享至 

  • xImage
  •  

上次簡單介紹了讓使用者輸入資料的input標籤基礎常用的屬性,今天我們來繼續介紹,其中最常用的type屬性。那麼就開始吧~
(๑•̀ㅂ•́)و✧

<input>type屬性

用來建立不同功能的元件,大部分的type都可以再加上value屬性,設定一個初始值。

1. <input type="text"> 輸入文字

可以輸入字母、數字、中文等內容。<input>type預設上就是text,所以也可以省略不寫。

  • 例如:
    <input type="text">
    <input>
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992htng5kH5qx.png
    -> 結果(都是可以輸入文字的框框):
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992DWKobDAzne.png

輸入的文字框還有其他相關屬性可以運用:

1. placeholder:輸入的提示訊息

  • 例如:
    <input placeholder="請輸入帳號">
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992RK09yGuCYC.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992VciVIezehn.png
    -> 是提示訊息而不是初始值,只要一打字就會消失
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992DFGlXS9lBw.png

2. maxlength:指定最多能輸入多少個字

3. minlength:指定最少需輸入多少個字

4. size:指定欄位顯示的寬度

  • 例如:
    姓:<input type="text" maxlength="5" minlength="2" size="5" />
    <br />
    名:<input type="text" maxlength="5" minlength="2" size="10" />
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992Bc9yebQA5K.png
    -> 結果(可以設定輸入的字數限制和框框的長度寬度):
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992bBpQ9a4Yy3.png

2. <input type="password"> 輸入密碼

密碼輸入欄位和一般的text差別是,不會直接顯示輸入的內容,而是以星號或小黑點代替明碼,這樣才叫做密碼。

  • 例如:
    <input type="password">
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992naWTZusq97.png
    -> 結果(就是常見的登入帳戶時輸入的密碼樣式):
    https://ithelp.ithome.com.tw/upload/images/20220916/20151992Lesvjvk4DK.png

上一篇
Day15-HTML(十三):表單-input
下一篇
Day17-HTML(十五):表單-input type
系列文
網頁前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言