入力ボックスをHTMLに表示させる方法

  • ガイド ( How to )
  • 閲覧数:308
  • ありがとう数:0

はじめに

HTMLはページのコントロール部分や表示部分を定義するテキストで成り立っています。
その中でもHTML入力ボックスはよく使用されるもののひとつです。
これはユーザーからのフィードバックを回収したりするのに使用します。
この入力ボックスはフォーム内に表示させることも別のページで表示さえることもできます。
CSSの値を変更すれば色や動きサイズなども変更することができます。
これらの技術を習得することによりWebサイトとしての魅力やユーザービリティの向上が見込まれます。

STEP1

Step:1 ノートパッドを開き以下のHTMLコードを入力します。



Input Box Test


Input Boxes



Name:
Password:


Comments:







これによりテキストボックス、パスワードボックス、コメント欄が作成されます。
にてテキストボックスのプロパティ
Password にてパスワード
textareaにてCSSの id の設定も行っています。

STEP2

Step:2 以下の CSSのコードを 内に挿入します。

textBox {color: #FFFFFF; background-color: #0000FF; border-width:2px;
border-style: solid;}
passwordBox {color: #000000; background-color: #FF0000; border-width: 2px;
border-style: dotted;}
textareaBox {color: #000000; background-color: #00FF00; border-width: 2px;
border-style: dashed;}


これらのCSSはボックスの表示形式を定義しています。
background-color は背景色
border-lineは 線
Colorでは 色
などを設定しています。

STEP3

Step:3 編集したファイルを保存します。 その際に拡張子を 「.html」にします。

STEP4

Step:4 ウェブブラウザ上で確認すれば完了です。

特集


感謝指数をマイページで確認!

ピックアップ

ページ先頭へ