HTMLでフォームを作る方法と具体的な使い方
HTMLでは、お問い合わせフォームや、アンケートのフォームを簡単につくることができます。
いろんな便利なフォームがあるのですが、使う際に注意しておかないと、フォームの利用が困惑したり、思った結果が得られない場合があります。
- どんなフォームがつくれるのか
- 具体的な特徴と使い方
- それぞれの注意点
を解説していくので、気になる部分をチェックしてみてください。
HTMLのフォームにはどんなものがあるの？
まずは、HTMLのフォームにはどんなものがあるのか、一覧で表示してみます。
- input
- textarea
- ドロップダウンリスト
- チェックボックス
- ラジオボタン
- モダンなブラウザでのみ使えるinputタグ
- button
いろんな種類のフォームが作れるんです。
では、それぞれの特徴と使い方を確認していきましょう。
HTMLのフォームタグの具体的な特徴と使い方
inputタグ
inputタグは最もよく使われているフォームの一つです。
type属性にいろいろな値をいれることができ、いろんなフォームをつくることができます。
inputタグは空要素で、閉じタグがいりません。
よく使う属性：type, value, placeholder
注意点は、placeholder属性を使うときです。placeholder属性は言葉によっては「すでに入力されているかも？」と誤解されてしまう場合があります。その結果、空白のまま送信しようとしてしまう可能性があります。不要な混乱を避けるために、labelタグを使いましょう。
labelタグはfor 属性をつけて、inputのid属性とひもづけます。
<!– <label for="name">名前</label>
<input type="text" id="name"> –>
<label>名前 <input type="text"></label>
textareaタグ
textareaタグは、閉じタグが必要です。
ドロップダウンリスト
ドロップダウンリストは、selectタグとoptionタグを使います。
これもlabelタグに入れて、紐付けます。
labelタグにはfor属性をつけます。
その中に、selectタグを入れて、selectタグにはid属性でlabelタグと紐付けます。
selectタグの中に、選択項目の数だけoptionタグをいれます。
optionタグはselected属性を使うことで、初期値として選択された状態にできる。
<label for=“job”>職業</label>
<select id=“job”>
<option selected>会社員</option>
<option>自営業</option>
<option>無職</option>
<option>その他</option>
</select>
チェックボックス
チェックボックスは、inputタグのtype属性をcheckboxにします。
こちらもlabelタグで囲います。
checked属性をつけると初期値にすることができます。
チェックボックスやラジオボタンでよく使われるグループ化するタグは、
fieldsetというタグを使います。
さらに、legendタグを使うことでグループ名をつけることができます。
<fieldset>
<legend>お使いのパソコンのOS</legend>
<label><input type="checkbox"> Windows</label>
<label><input type="checkbox" checked> Mac OS</label>
<label><input type="checkbox"> linux</label>
</fieldset>
ラジオボタン
ラジオボタンは、チェックボックスとほとんど同じです。
inputタグのtype属性をradioにすることでつくることができます。
ただし、name属性の値には注意が必要です。name属性を同じ属性の値にすることで、グループ内でチェックされるものが一つになります。
name属性が別だと、複数選択できてしまいます。
<fieldset>
<legend>一番好きな飲み物</legend>
<label><input type="radio" name=“drink”> コーヒー</label>
<label><input type="radio" name="drink" checked> お茶</label>
<label><input type="radio" name="drink"> その他</label>
</fieldset>
モダンなブラウザのみで使えるinputのtype属性の一部
<p><input type="color"></p>
<p><input type="date"></p>
<p><input type="number"></p>
<p><input type="range"></p>
ボタンを作る
ボタンを作るには、いくつか方法があります。
よく使う方法としては、次の2つです。
inputタグでtype属性の値をbuttonにします。そしてvalue属性の値にボタンの表示名を書きます。
もうひとつは、buttonタグを使う方法です。buttonタグの場合は、開始タグと終了タグの間にボタンの表示名を書きます。
また、どちらもdisabled属性をつけると使えないけど表示される状態にできます。表示しておきたいけど、押さないでほしい場面などはけっこうあるため、知っておくといいでしょう。
formタグの使い方
入力された値をどこかへ送信したい場合、formタグが必要になります。
formタグには、action属性の値に飛び先URL、method属性の値にpostやgetなど受け取り方法を書きます。
そして、formタグの中に、inputタグやbuttonタグをいれます。
どのフォームから何が送信されたかを識別するために識別子を使います。識別子は、name属性を使います。
詳しくはphpなどのサーバー側で動く言語が関連するため、そのときに解説していきます。