Webサイト制作で覚えておいた方がいいHTMLテクニック【フォーム編】

こんにちは、Jeannieです。

『ゼロから自力でWebサイトを作ってみる』というコンセプトで、備忘録も兼ねてちょっとしたテクニックを載せておこうと思います。

テキストボックス

基本的な書き方

テキストボックスの基本的な書き方はとても簡単。

<input type="text">

実際の見え方はこうなります。

placeholder

テキストボックス内に入力例として薄い文字で表示したい場合は、placeholder属性を使うことで実現できます。

ユーザーに対して『こんな感じで入力してくださいね』ということを示すときに使います。
入力例として表示しているだけなので、実際に文字が入力された時には消えてくれます。

<input type="text" placeholder="山田 太郎">

ラジオボタン

基本的な書き方

<input type="radio" value="1">
<label>選択肢1</label>

<input type="radio" value="2">
<label>選択肢2</label>

<label>タグを使わずに以下のように書くことも出来ますが、次で説明するグループ化のために<label>タグを使うように慣れるようにしましょう。

<input type="radio" value="1">選択肢1
<input type="radio" value="2">選択肢2

選択肢のグループ化

上で書いた基本的な書き方を使った場合、『選択肢1』と『選択肢2』を選択すると両方とも選択された状態となってしまいます。

ラジオボタンを使う場合は、基本的にどれか一つを選択してもらうことが多いので、そういう場合はグループ化を使います。

グループ化をする場合は、inputタグにそれぞれname属性で同じ名前をつけます。

<input type="radio" name="sample" value="1">
<label>選択肢1</label>

<input type="radio" name="sample" value="2">
<label>選択肢2</label>

初期値の設定

予め選択肢2を選択状態にしておきたい場合などは、初期値を設定しておく必要があります。

初期値を設定する場合は、checked属性を使います。
以下は『選択肢2』を初期値として設定する例です。

<input type="radio" name="sample" value="1">
<label>選択肢1</label>

<input type="radio" name="sample" value="2" checked>
<label>選択肢2</label>

※checkedは、これらを<form>～</form>で囲まないと初期値が正常に表示されないことがあります。

ラベルクリックで選択状態を変える

上の例だと、『選択肢1』の文字部分をクリックしても選択状態は変わりません。

ユーザビリティを考えると、文字部分をクリックしただけで選択状態が変わる方が確実に使いやすい。

そうするためには以下のようにします。

１．inputタグにid属性にidを定義する
２．labelタグにfor属性で1のidを設定する
※ id属性には同じidを複数回定義できないので、それぞれ違うidを定義する必要があります

<input type="radio" name="sample" id="sample-1" value="1">
<label for="sample-1">選択肢1</label>

<input type="radio" name="sample" id="sample-2" value="2" checked>
<label for="sample-2">選択肢2</label>

チェックボックス

基本的な書き方

<input type="checkbox" name="gender" id="gender-male" value="1">
<label for="gender-male">男性</label>

<input type="checkbox" name="gender" id="gender-female" value="2" checked>
<label for="gender-female">女性</label>

チェックボックスもラジオボタンと同じような使い方になります。

セレクトボックス

基本的な使い方

<select name="select-1">
 <option value="1">選択肢1</option>
 <option value="2" selected>選択肢2</option>
 <option value="3">選択肢3</option>
</select>

複数選択

セレクトボックスでは、選択肢の中から複数選択可能にしたい場合があります。
こういうケースでは以下のようにselectタグにmultiple属性を付けることで実現できます。
ユーザーはCtrlボタンを押しながら選択することで複数の選択肢を選ぶことが出来ます。

<select name="select-1" multiple>
 <option value="1">選択肢1</option>
 <option value="2" selected>選択肢2</option>
 <option value="3">選択肢3</option>
</select>

まとめ

今回はフォームを使うページで必要となるHTMLのテクニックをご紹介しました。
今回の内容は初歩中の初歩ですので、暗記するレベルで身につけましょう。