HTML input type text 表單文字欄位

HTML input type text 表單文字欄位是屬於單行的文字輸入欄位,常見的搜尋框就是這種欄位,與 textarea 的多行文字欄位不一樣,input type text 不允許填表者換行,預設的文字輸入是由左至右,輸入字數長度可以超過 input type text 的長度。

HTML input type text 表單文字欄位語法
網頁表單 input type text 有好幾個參數可以使用,最重要的兩個參數就是 name 與 value,其中 name 用來規定欄位的名稱,請使用英文或數字,不要使用中文字,以免部分的瀏覽器判斷錯誤,value 則是欄位的內容,可以空著,讓網友自己填寫內容,若有預設內容,可以寫在 value 裡,這樣網友一打開網頁看到文字輸入欄位就是已經有內容的。

第三個參數 style 是用來設計欄位 CSS 樣式用的,也就是美化用的。

HTML input type text 表單文字欄位範例一、空欄位
範例的效果
姓名:
我們在範例中使用了網頁表單的 form 標籤,而本篇介紹的主角 input type text 就是要放在 form 標籤內使用的表單元素,當然要放在網頁的其他地方使用也是可以,不過我們還是把重點放在它原本的功能上。在表單內使用 input type text 的效果就像範例這樣,會出現一個文字輸入的框框,那就是要讓網友填寫資料的欄位,很簡單吧!?那如果想要有預設內容呢?使用 value 來設定即可,請看範例二的解答。

如果想進一步了解網頁表單的設計規則,請參閱:HTML Form 表單設計

HTML input type text 表單文字欄位範例一、有預設內容
範例的效果
姓名:
我們使用了 value 屬性的效果,直接把預設值寫在 value 裡,這樣當網友打開網頁的時候,就會看到文字輸入欄位有預設內容囉!當然,網友還是可以自己修改內容。

更多網頁表單設計
分享於 2014-10-03