WEBページにフォームを設置する方法2

WEBページにフォームを設置する方法1のつづきで、フォームの設置方法についての説明です。

チェックボックス

複数の選択肢の中から、複数を選択してもらいたいような時はチェックボックスを使います。チェックボックスは、inputタグのtypeをcheckboxにすれば設置できます。

<form action="form.php" method="POST">
<p>チェックボックス：
<input type="checkbox" name="check" value="1">HTML
<input type="checkbox" name="check" value="2">CSS
<input type="checkbox" name="check" value="3">PHP
</p>
</form>

これをブラウザで開くと以下のように表示されますので、選択したい項目をクリックしてチェックを入れます。

チェックボックスを設置する場合、inputタグの後ろに選択してもらいたい項目を書き込みます。valueオプションには、どの項目がチェックされたか識別できるように異なる値を入れておきます。例えば「HTML」がチェックされてフォームが送信されると、”nameがcheckの1がチェックされた”と送信されることになります。

チェックボックスを設置する時、初めからチェックさせておきたい項目もあるかと思います。その場合、inputタグにcheckedを追加すると、初めからチェックされた状態で表示されます。例えば、「HTML」に初めからチェックを入れておきたい場合、以下のように記述します。

<form action=”form.php” method=”POST”>
<p>チェックボックス：
<input type=”checkbox” name=”check” value=”1″ checked>HTML
<input type=”checkbox” name=”check” value=”2″>CSS
<input type=”checkbox” name=”check” value=”3″>PHP
</p>
</form>

これをブラウザで開くと、初めから「HTML」にチェックが入った状態で表示されます。

ラジオボタン

複数の選択肢の中から、1つだけを選択してもらいたい場合は、ラジオボタンを使用します。ラジオボタンの設置方法は、チェックボックスと似ていて、typeがradioになるだけです。チェックボックスを同じように、初めからチェックをつけておきたい項目にはcheckedを入れておきます。

<form action="form.php" method="POST">
<p>ラジオボタン：
<input type="radio" name="radio" value="1" checked>HTML
<input type="radio" name="radio" value="2">CSS
<input type="radio" name="radio" value="3">PHP
</p>
</form>

これをブラウザで開くと、以下のようにラジオボタンが表示され、どれか1つだけが選択可能になります。

選択リスト

リストの中からいずれかを選択してほしい時は、選択リストを使います。選択リストはinputタグではなく、selectタグを使います。

<form action="form.php" method="POST">
<p>選択リスト：
<select name="select">
<option value="1" selected>HTML</option>
<option value="2">CSS</option>
<option value="3">PHP</option>
</select>
</p>
</form>

各リストは<option>～</option>の中に記述していき、初期値を設定したい場合はselectedを追加しておきます。
これをブラウザで開くと、以下のように選択リストが表示され、「HTML」「CSS」「PHP」の中からいずれかを選択できるようになります。

selectタグには、他にもオプションをつけることができますので、他のオプションも覚えておきましょう。

<form action="form.php" method="POST">
<p>選択リスト：
<select name="content" size="3" multiple>
<option value="1" selected>HTML</option>
<option value="2">CSS</option>
<option value="3">PHP</option>
</select>
</p>
</form>

sizeオプションで表示する行数を指定することができ、multipleを追加すると複数の項目が選択できるようになります。Windowsはctrl+クリック、Macはコマンドキー+クリックで複数選択が可能です。ブラウザで表示すると以下のようになります。

ファイルのアップロード

ファイルをアップロードする場合もWEBフォームを使用します。

<form action="form.php" method="POST" enctype="multipart/form-data">
<p>ファイルのアップロード：
<input type="file" name="data">
</p>
</form>

ファイルをアップロードするフォームを作る場合、気をつけるのはformタグにenctypeオプションを追加することです。enctypeオプションはファイルをアップロードする場合に必要なオプションなので、おまじないと思って追記してください。

アップロードするファイルを選択するフォームは、inputタグのtypeをfileにして設置します。

これをブラウザで開くと以下のように表示されます。”選択されていません”と表示されている部分には、ファイルを選択した後はファイル名が表示されます。

隠しデータの送信

「ブラウザ上には表示させずにデータを送りたい」というような時は、隠しデータを使います。inputタグでtypeをhiddenにすることで、そのフォームはブラウザ上には表示されなくなります。

上記で記述したファイルのアップロードフォームに隠しデータを追加しています。

<form action="form.php" method="POST" enctype="multipart/form-data">
ファイルのアップロード：<input type="file" name="data">
<input type="hidden" name="hidden_data" value="12345">
</form>

隠しデータにも他のフォームと同じようにnameに名前を入れておきます。送信したい内容はvalueで指定します。この場合、hidden_dataという名前の12345という値が送信されることになります。

これをブラウザで表示してもファイルのアップロードフォームの下には何も表示されないと思います。ソースコードを表示すると、隠しデータが入っていることはわかりますが、ブラウザで表示しただけでは見えません。

このようにユーザーには見えない方がいいデータを送信する場合は、隠しデータを使って送信するようにしましょう。

ラベルを付ける

ラベル付けというのは、チェックボックスやラジオボタンとその横のテキスト部分を関連付けることをいいます。
ラベルを付けるには、むすびつけたい部分を<label>～</label>で囲います。

<form action="form.php" method="POST">
ラベル付け：
<label><input type="checkbox" name="check" value="1">HTML</label>
<label><input type="checkbox" name="check" value="2">CSS</label>
<label><input type="checkbox" name="check" value="3">PHP</label>
</form>

これをブラウザで開いた時、見た目上は普通にチェックボックスを設置した場合と変わらないと思います。実際にチェックボックスにチェックを入れてみてください。違いがわかりましたか？

そうなんです。普通にチェックボックスを設置した場合、チェックボックスにチェックを入れるにはチェックボックスをクリックしなｋればいけませんが、ラベルを付けるとテキスト部分をクリックしてもチェックができてしまうのです。なんだそんな細かいことかと思ったかもしれませんが、これが実は結構重要なんです。色んなWEBサイトでフォームを入力して比べるとわかりますが、チェックボックスやラジオボタンは、明らかにラベル付けされている方がチェックしやすいと思います。せっかく自分のWEBサイトに訪問してくれた方には、フォームを入力する時も気持ちよく操作してほしいものです。なので、ラベル付けをして細かい気配りをしましょう。

送信ボタンの設置

長々とフォームの設置方法をやってきましたが、やっと送信ボタンの設置方法です。
送信ボタンを設置するのは非常に簡単で、inputタグを使います。

<form action="form.php" method="POST">
ラジオボタン：
<input type="radio" name="radio" value="1" id="html" checked><label for="html">HTML</label>
<input type="radio" name="radio" value="2" id="css"><label for="css">CSS</label>
<input type="radio" name="radio" value="3" id="php"><label for="php">PHP</label>
<input type="submit" value="送信">
</form>

inputタグのtypeにsubmitを入れ、valueには送信ボタン上に表示させたい文字を入れます。
これをブラウザで開くと以下のように送信ボタンが表示されます。送信ボタンをクリックすると、フォーム内で入力された内容が送信されます。

それから、送信用のボタンとは別にボタンを表示したいこともあるかと思います。そういった時は、以下のようにHTMLを記述することで汎用ボタンを配置できます。

<input type="button" value="ボタン">

この汎用ボタンは、送信ボタンとは違って、そのままだとクリックしても何も反応しません。ボタンをクリックした際に何らかの動作をさせたい場合は、Javascriptと結びつけて動作を制御したりします。
フォームを設置する場合、送信ボタンは必須のものになりますので、確実に覚えるようにしましょう。また、汎用ボタンも使い方によっては非常に便利なのでぜひ覚えておきましょう。

2回にわたって長々と書いてきましたが、これらのことを覚えればWEBフォームの設置が可能になりますので、ぜひ覚えてください。