HTML/CSS基礎 第11回 『フォーム②』

今回は前回に引き続き、フォームの作成方法について解説します。「フォームって何？」という方は、第10回を先にご覧ください。

チェックボックス

チェックボックスはラジオボタンと似ていますが、複数の項目を同時に選択することが可能です。次のようなコードを書くことで、Sampleのようなチェックボックスを作成することができます。

好きな色：
<input type="checkbox" name="color" value="赤">赤
<input type="checkbox" name="color" value="青">青
<input type="checkbox" name="color" value="黄">黄
<input type="checkbox" name="color" value="レインボー" checked>レインボー

name属性：チェックボックスの名前を記入します。

value属性：送信される選択肢の名前を入力します。

checked：初めからチェックされている項目を指定します。

セレクトボックス

セレクトボックスはクリックすると選択肢をプルダウンで表示することのできるパーツです。

<select name="blood-type">
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="O">O</option>
     <option value="AB">AB</option>
     <option value="不明" selected>不明</option>
</select>

サンプルのコードのように<select>タグで全体を囲み、<option>タグで選択項目の設定を行っていきます。<option>と</option>の間には、セレクトボックスをクリックしたときにプルダウンで出てくる選択項目を記入します。

name属性：セレクトボックスの名前。

multiple属性：shiftキーやctrlキーで複数の項目を選択可能にすることができます。

value属性：送信される選択肢の値を入力します。

selected：あらかじめ選択されている状態にするときに指定する。

複数行テキスト入力欄

複数行のテキスト入力欄を作成する際は、<textarea>タグを使用します。

<textarea name="message" placeholder="メッセージを入力"></textarea>

name属性：テキスト入力欄の名前を指定します。

placeholder属性：テキスト入力欄に入力をする前に表示しておくテキストを指定します。

決定ボタン

<form>タグで囲んだ内容一式を送信するためのボタンを作成するには<input type=”submit”>を使用します。value属性で指定した内容がそのまま送信ボタンに反映されます。

<input type="submit" value="送信">

また、src属性を指定することで、画像を送信ボタンに使用することができます。

<input type="submit" src="../submit.jpg" value="送信">

まとめ

いかがだったでしょうか？フォームを使用することで、Webサイトでできることの幅はぐんと広がります。バックエンドの知識も必要となりますが、是非幅広く学習して思い通りのWebサイトを制作していただければと思います。

次回はHTMLの最終回、グループ化について学習します。