iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

網頁前端工程探討系列 第 9

認識HTML(七):表單欄位(上)

表單input元素

一般表單中所看到的輸入欄位,可以用 <INPUT> 元件與其屬性type來設定。
只要設定不同的type屬性值,就會出現不同的輸入欄位。<INPUT> 是一個獨立的元件,不需要</INPUT> 來終止它的範圍。

Type的主要屬性如下:

  • <INPUT type="text">
    代表一般的文字輸入欄位,這也是預設值。
    可以利用size屬性來指定顯示的欄位寬度,以及可以用maxlength屬性,指定最多可以輸入多少字元。!
    以下範例表單:包含兩行的文字輸入欄。姓名欄的顯示長度是 6 個字元,資料最大長度也是 6 個字元;地址欄的顯示長度由瀏覽器決定

在HTML文件中其語法格式如下:

https://ithelp.ithome.com.tw/upload/images/20210924/20141905Sa3pPQjvGT.png

執行後的結果如下

https://ithelp.ithome.com.tw/upload/images/20210924/20141905VKuvbqklPM.png

  • <INPUT type="password" >

代表的是密碼輸入欄位。它的用法和一般文字輸入欄位相同,唯一最大的不同是當我們在密碼欄輸入時,所輸入的內容會用『*』或是『●』的方式來顯示,使得旁觀者無法得知輸入內容,以保護資料的隱密性。通常用來輸入需要保密的資料。

在HTML文件中其語法格式如下:

https://ithelp.ithome.com.tw/upload/images/20210924/20141905EH6jaJ36ej.png

執行後的結果如下:

https://ithelp.ithome.com.tw/upload/images/20210924/20141905xQg0H7A48R.png

  • <INPUT type="submit">
    代表的是送出資料的按鈕,當瀏覽者按下傳送的按鈕,表單的資料就會傳給WWW伺服器交由指定的程式來處理。傳送按鈕所預設的名稱是「Submit」。不過也可以用value屬性把它改成其他的名稱,例如「提交」等文字。

    除了type屬性,在Input元素也會用到以下的屬性:

  • Name
    設定欄位名稱,必須明確指定欄位名稱,才能送出表單資料。

  • Value
    預設值或顯示的文字。對於type=”submit”按鈕value屬性則是設定按鈕上的文字。
    例如 value=”登入”則按鈕上則會顯示登入

  • Size
    指定輸入欄位在畫面上的寬度,瀏覽器會以預設字型大小來設定。


上一篇
認識HTML(六):表格與表單
下一篇
認識HTML(八):表單欄位(下)
系列文
網頁前端工程探討30

尚未有邦友留言

立即登入留言