HTML input type text 表單文字欄位 - HTML 網頁設計筆記

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 裡，這樣當網友打開網頁的時候，就會看到文字輸入欄位有預設內容囉！當然，網友還是可以自己修改內容。

更多網頁表單設計