おすすめページ

Transcription

1 第 6 章 フォーム コントロールを 作 成 する 作 成 した<form> 内 に お 名 前 や ご 意 見 ご 要 望 などの 入 力 フォームを 作 成 していきま す 最 後 に 送 信 ボタンを 設 置 します テキストフィールドを 作 成 する 名 前 を 入 力 できる 欄 をテキストフィールドで 作 成 します テキストフィールドを 作 成 すると 同 時 にラベ ルのテキストも 記 述 します ラベルのテキストとテキストフィールドの 間 は 改 行 します 1 <form> 内 に HTML を 記 述 する <form> 内 に 次 の HTML を 記 述 します <p>お 名 前 <br> <input type="text" name="name" class="textfield"></p> 2 opinion.html をブラウザーで 開 きます ラベルのテキストとテキストフィールドが 表 示 されています テキストフィー ルドに 入 力 できることも 確 認 してください 156

2 解 説 <input>タグ <input> は テキストフィールドや 送 信 ボタンなど 多 くのコントロールを 表 示 させるためのタグです type 属 性 の 値 を 変 えるといろいろなコントロールを 表 示 させることができます なお <input> は 終 了 タグのない 空 要 素 です type 属 性 の 代 表 的 な 値 属 性 値 説 明 text submit image 1 行 のテキスト 入 力 フィールド 送 信 ボタン 画 像 を 使 用 した 送 信 ボタン 使 用 する 画 像 のパスを src 属 性 で 指 定 する <input type="text"> の 属 性 <input> タグは type 属 性 の 値 によって 追 加 できるその 他 の 属 性 が 変 わります <input type= "text"> の 場 合 に 追 加 することができる 属 性 は 次 のとおりです type="text" のときに 追 加 できる 代 表 的 な 属 性 属 性 属 性 値 説 明 name 文 字 列 入 力 されたデータに 付 ける 名 前 Web サーバーにデータを 送 信 するときに 使 われる value 文 字 列 なにも 入 力 されなかったときの 初 期 値 を 設 定 する 6 ラベルテキストとコントロールを 関 連 づける <label> タグを 使 用 して お 名 前 というテキストと 追 加 したテキストフィールドを 関 連 付 けます フ ォ ー ム <label> を 追 加 する 1 お 名 前 の 前 に <label> 開 始 タグを テキストフィールドの <input> タグの 後 ろに </label> 終 了 タグを 挿 入 します <p><label>お 名 前 <br> <input type="text" name="name" class="textfield"></label></p> 157

3 2 opinion.html をブラウザーで 開 きます <label> を 追 加 しても 表 示 上 の 違 いはありません 解 説 <label>タグ <label> は ラベルテキストとコントロールを 関 連 付 けるためのタグです <label> タグによってラ ベルテキストとコントロールが 関 連 付 けられると ラベルテキストをクリックしてコントロールを 選 択 できるようになり ユーザビリティ( 閲 覧 者 の 操 作 のしやすさ)が 向 上 します <label> の 記 述 方 法 には 2 種 類 あります 1 つは 今 回 のようにラベルテキストと 関 連 するコントロー ルを <label> タグで 囲 む 方 法 もう1つは <label> の for 属 性 を 使 う 方 法 です ラベルテキストとコントロールを 関 連 づける 方 法 その 1 ~ <label> タグで 囲 む~ ラベルテキストとコントロールを <label> タグで 囲 むシンプルな 方 法 です <label> タグで 囲 む 書 式 例 <label>ラベルテキスト<input type="text" name="name" class="textfield"></label> ラベルテキストとコントロールを 関 連 づける 方 法 その 2 ~ for 属 性 を 使 う~ <label> ~ </label> の 中 にはラベルテキストだけ 入 れておき コントロールは 囲 まない 方 法 です この 場 合 <input> などコントロールのタグには id 属 性 を 付 けておきます <label> には for 属 性 を 追 加 し その 値 を 関 連 するコントロールの id 名 にします <label> の for 属 性 を 使 う 書 式 例 <label for="control_id">ラベルテキスト</label> <input type="text" name="name" id="control_id"> <input> の id 属 性 と <label> の for 属 性 の 値 を 同 じにする 158

4 テキストエリアを 作 成 する 意 見 要 望 などを 自 由 記 述 で 複 数 行 入 力 できるテキストエリアを 作 成 します <textarea> を 追 加 する 1 お 名 前 のテキストフィールド 全 体 を 囲 む <p> の 次 の 行 から ご 意 見 ご 要 望 のラベルテキストとテキストエリ アを 記 述 します <p><label>お 名 前 <br> <input type="text" name="name" class="textfield"></label></p> <p><label>ご 意 見 ご 要 望 <br> <textarea name="comment"></textarea></label></p> 2 opinion.html をブラウザーで 開 きます ご 意 見 ご 要 望 というテキストと テキストエリアが 表 示 されます 159

5 解 説 <textarea>タグ <textarea> は 複 数 行 のテキスト 入 力 コントロールを 表 示 するタグです <input> タグ 同 様 <textarea> にも name 属 性 が 必 要 です また <textarea> ~ </textarea> の 間 にテキストを 含 めると テキストエリアにその 内 容 が 表 示 されるようになります <textarea> の 書 式 例 <textarea name="テキストエリアの 名 前 ">デフォルトテキスト</textarea> <textarea> ~ </textarea> にテキストを 含 めておくと テキストエリアにその 内 容 が 表 示 される HTML <textarea name="comment">ご 意 見 ご 要 望 をご 記 入 ください </textarea> テキストフィールドとテキストエリア <input type="text"> で 作 成 する 単 一 行 のテキスト 入 力 コントロールは 一 般 的 に テキストフィールド と 呼 ばれます また <textarea> で 作 成 する 複 数 行 の 入 力 が 可 能 なコントロールは テキストエリア と 呼 ばれています テキストフィールドは enter キーを 押 して 改 行 をすることもできません そのため 名 前 や アド レス 電 話 番 号 など 定 型 的 で 短 いテキストの 入 力 に 適 しています 一 方 のテキストエリアは ご 意 見 や お 問 い 合 わせ 内 容 など ある 程 度 の 長 さがあり 自 由 な 形 式 の 文 章 を 入 力 するのに 適 しています 160

6 送 信 ボタンを 作 成 する テキストエリアの 下 に 送 信 ボタンを 作 成 します 送 信 ボタンを 作 成 する 1 ご 意 見 ご 要 望 全 体 を 囲 む <p> の 次 の 行 に 新 たに <p> と 確 認 する と 書 かれた 送 信 ボタンを 追 加 します <p><label>ご 意 見 ご 要 望 <br> <textarea name="comment"></textarea></label></p> <p><input type="submit" value=" 確 認 する"></p> 2 opinion.html をブラウザーで 開 きます 送 信 ボタンが 追 加 されます 161

7 解 説 <input type="submit"> <input type="submit"> は 送 信 ボタン です 入 力 されたデータをサーバーに 送 信 する 場 合 でも 送 信 ボタンに name 属 性 は 必 要 ありません また 送 信 ボタンの 場 合 value 属 性 はボタンの 上 に 表 示 されるテキストを 定 義 します 送 信 ボタン <input type="submit" value="ボタンに 表 示 されるテキスト"> 送 信 ボタンに 画 像 を 使 う 送 信 ボタンはブラウザーが 提 供 する 一 般 的 なボタンの 代 わりに 画 像 を 使 用 することができます 画 像 を 使 う 場 合 は type 属 性 の 値 を image にします また src 属 性 で 使 用 する 画 像 のパスを alt 属 性 で 代 替 テキストを 指 定 します そのほか オプションとして 画 像 のサイズを 指 定 する width 属 性 height 属 性 を 追 加 することもできます 第 4 章 <img> タグ (P.106) 送 信 ボタンを 画 像 にする 場 合 の 例 (サンプル:c06-imgbtn/index.html) <p><label>お 名 前 <br><input type="text"></label></p> <p><input type="image" src="images/imgbtn.jpg " alt=" 送 信 " width="120" height="30"></p> 162