12.入力フォームの装飾

(補足)
まずは、入力フォームって何?って事ですが、入力フォームとは、文字を入力する為の枠です。こんな感じの物です。 これが、入力フォームです。→
本来は、メールなどのデータ送信として使う物ですが、ここでは、入力フォームの装飾についてのみ説明します。
*参考までに、本来は次の様に使います。
<form action="実行プログラムなど"><入力フォーム><input type="submit" value="ボタンの文字"></form>
<入力フォーム>の部分を以下のタグで装飾できます。

それぞれ、必要に応じて、付け加えたり、削ったりしてみてね。
実は、style="〜〜"で、文字の、色・背景色などを装飾しているので、ボタンの色・形の部分も参考にすると、もっとアレンジできます。(フォームの枠なんかも装飾できます)
(注1)これは、半角文字何個分か、と言う事です。例えば、「5」と指定した場合は、半角5文字分の横幅になります。
(注2)これは、表示されるフォームの縦幅で、文字が一杯になったら、文字が入らないと言う訳ではありません。・・・スクロールバーが付いていますのでね。
(注3)文字色を指定しないと、文字が黒になる為、背景色を黒にすると、文字の色と同化して文字が見えなくなります。
(注4)「px」の代わりに「%」を指定する事も出来ます。100%を指定すると、指定しない場合と同じ間隔になります。100%以上を指定すると、間隔が広く、以下だと狭くなります。
(注5)複数行の場合、Netscapeでは、「style="〜〜"」の設定部分が、変わらない事があります。

↓枠の形をここから選んでね。
実線    :solid
二重線   :double
丸い点線  :dotted
四角い点線 :dashed
内沈み線  :inset
内浮き出し線:outset
山線    :ridge
谷線    :groove


赤い文字の部分を変更してコピー貼り付けで使ってね
普通のフォーム<input type="text">
文字を初めから入れておく<input type="text" value="初期入力の文字">
フォームの横幅を半角文字数で指定(注1)<input type="text" size="横幅">
フォームの最大入力文字数を半角文字数で指定<input type="text" maxlength="限界半角文字数">
上記の応用編(注1)<input type="text" value="初期入力の文字" size="横幅" maxlength="限界半角文字数">
フォームの背景色を変える(注3)<input type="text" style="background-color:#背景色">
フォームの文字の大きさも変える(注3)<input type="text" value="初期入力の文字" style="background-color:#背景色;font-size:大きさ">
フォームの文字の色も変える(注3)<input type="text" value="初期入力の文字" style="background-color:#背景色;font-size:大きさ;color:#文字色">
普通のフォーム(応用編)(注1)<input type="text" value="初期入力の文字" size="横幅" style="background-color:#背景色;font-size:大きさ;color:#文字色;border-color:#枠の色;border-width:枠の太さpx;border-style:枠の形;font-family:文字の書体">
複数行のフォーム(注2)<textarea rows="行数"></textarea>
横幅も指定(複数行編)(注1.2)<textarea rows="行数" cols="横幅"></textarea>
初期入力の文字も指定(複数行編)(注1.2)<textarea rows="行数" cols="横幅">初期入力の文字</textarea>
フォーム内の行間隔も指定(複数行編)(注1.2.4.5)<textarea rows="行数" cols="横幅" style="line-height:数字px">初期入力の文字</textarea>
フォームの背景色を変える(複数行編)(注2.3.5)<textarea rows="行数" style="background-color:#背景色"></textarea>
フォームの文字の大きさも変える(複数行編)(注2.3.5)<textarea rows="行数" style="background-color:#背景色;font-size:大きさ">初期入力の文字</textarea>
フォームの文字の色も変える(複数行編)(注2.3.5)<textarea rows="行数" style="background-color:#背景色;font-size:大きさ;color:#文字色">初期入力の文字</textarea>
フォームのスクロールバーの色も変える(複数行編)(注2.3.5)<textarea rows="行数" style="background-color:#背景色;font-size:大きさ;color:#文字色;scrollbar-face-color:#バー色;scrollbar-highlight-color:#バーの背景色;scrollbar-shadow-color:#バーの枠色;scrollbar-arrow-color:#矢印色">初期入力の文字</textarea>
複数行のフォーム(応用編)(注1.2.3.5)<textarea rows="行数" cols="横幅" style="background-color:#背景色;font-size:大きさ;color:#文字色;border-color:#枠の色;border-width:枠の太さpx;border-style:枠の形;font-family:文字の書体">初期入力の文字</textarea>



HTMLタグに戻る