(補足)
まずは、入力フォームって何?って事ですが、入力フォームとは、文字を入力する為の枠です。こんな感じの物です。
これが、入力フォームです。→
本来は、メールなどのデータ送信として使う物ですが、ここでは、入力フォームの装飾についてのみ説明します。
*参考までに、本来は次の様に使います。
<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> |