更新日: 2010-11-25 01:09:58

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

著者: handwerk

編集者: handwerk

閲覧数: 195

Okgn btn gudie info favorite

0

関連タグ:

はじめに

Photo by ProtoSpace

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

STEP1

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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 ウェブブラウザ上で確認すれば完了です。

このガイドは役に立ちましたか?ガイドの著者にお礼を伝えよう!

Okgn btn gudie info thunks b

5

関連タグ:

当ガイドは作成日時点での情報です。ガイド内容の実施はご自身の責任の元、ご利用いただきますようお願いいたします。

このガイドを通報する

著者名:
handwerk

さわらどっとじぇーぴー