入力エリアを綺麗にしよう <input>は標準だとあじけが無い。色をつけて綺麗にしちゃおう。 そして最後に応用技を紹介する。 〓特集〓 ホームページデザインのプロになってみない？！

掲示板などでよく使われる入力フォーム。そのままだとモノクロのつまらないデザインだね。
ここれはその入力系の代表として<inout>タグの表示例をまじえて解説しよう。

*ここでは解説の便利上、インラインCSSとなっている。

・ノーマル表示

<input type="text" name="test" size="40">

・ 文字の色を変える

<input type="text" name="test" size="40" style="color: red;">

・背景色を変える

<input type="text" name="test" size="40" style="background-color: aqua;">

・線を変える

<input type="text" name="test" size="40" style="border-color: black; border-width: 1;">

<input type="text" name="test" size="40" style="border-color: black; border-width: 2; border-style: dotted">

以上のように好きなようにかえられる。これらは一例であって、もっといろんな変化をさせることも可能だ。
たとえば・・・・・

<input type="text" name="test2" size="40" style="border-color: black; border-width: 2; border-left: navy 20pt solid;">

次に、応用として入力以外の使い道を紹介する。
これは <input> ではなく <textareat> である。 <input> を複数行を入力できるようにしたものだ。

<textarea name="textarea" cols="40" rows="5" readonly> </textarea>
書き込みを禁止にすれば。 更新履歴や 独り言 などのちょっとした窓を埋め込める。 中身をスクロースさせられるので 場所を取らずに非常に便利だ。
これを実際に使う時は、ボーダーをなくして画像で綺麗にレイアウトするのも良い。