HTML textarea 表單多行文字輸入欄位內文字大小設計

HTML textarea 表單多行文字輸入欄位內文字大小設計可採用 CSS 內建的 font-size 屬性來設計,建議不要採用 HTML 內建的 font size,因為那只有 1~7 的範圍,能調整的文字大小有限,不夠精緻,而 CSSfont-size 屬性可接受的文字大小設定相對比較豐富,也比較容易調整出最適合閱讀的文字大小,提升 HTML textarea 表單多行文字輸入欄位的使用體驗。

基礎關鍵語法

HTML textarea 表單多行文字輸入欄位語法(詳細參閱:表單文字輸入欄位 textarea
<textarea name="欄位名稱" style="欄位樣式">這裡是內容</textarea>
CSS font-size 屬性語法(詳細參閱:CSS 透過 font-size 屬性設定文字大小
font-size: 文字大小;
當你熟悉了以上兩個關鍵語法,咱們就可以進入套用至範例的步驟,我們會將 CSSfont-size 套用在 textarea 語法中 style 的地方,讓瀏覽器知道我們要用 CSS 的語法來設定欄位的文字大小,請看範例。

HTML textarea 表單多行文字輸入欄位內文字大小設計範例
<textarea style="font-size:12px;width:250px;height:100px;">這是 12px 的文字</textarea>
<textarea style="font-size:17px;width:250px;height:100px;">這是 17px 的文字</textarea>
範例的實際效果
為了讓效果顯著一點,我們在範例中準備了兩個 textarea 多行文字欄位並分別設定了 12px 與 17px 的文字大小,可以很清楚的看到兩者的差異,另外,width 是設定欄位的寬度,height 則是設定欄位的高度,讓兩個欄位的大小固定用,各位如果有需要其它的文字大小,可以自己設定 font-size 的值,數字越大代表顯示的字體越大。

更多 HTML textarea 設計
© Copyright webtech.tw Since 2010