HTML: フォーム部品の一覧・まとめ
HTMLでよく使用するフォーム部品の一覧・まとめです。 サンプルコードもあるのでチートシート代わりに使えます。
フォーム部品一覧
フォーム部品 | 表示 |
---|---|
フォーム・他 | |
フォーム | なし |
隠し属性 | なし |
テキスト・数値入力 | |
テキストボックス(1行) | |
テキストエリア(複数行) | |
数値入力フィールド | |
チェック | |
チェックボックス | チェックボックス |
ラジオボタン | ラジオ1 ラジオ2 |
リスト | |
ドロップダウンメニュー | |
リストボックス | |
リストボックス(複数選択) | |
ボタン | |
汎用ボタン | |
送信ボタン | |
リセットボタン | |
ファイル選択ボタン | |
色の選択ボタン |
フォーム
<form action="送信先URL" method="GET">
<!-- フォーム部品 -->
</form>
通常はform要素を親要素として、その中にフォーム部品を記述していきます。
action属性には内容を送信する送信先のURLを記述します。
method属性は送信方法である「GET」か「POST」を指定します。
隠し属性
<input type="hidden" name="name" value="この部分が送信されます">
隠し属性はユーザーID等、画面に表示することなく情報を送信したい場合に使用します。
「value属性」で送信する情報を指定します。
テキストボックス(1行)
<input type="text" name="user-name" value="" placeholder="入力ヒント">
テキストボックス(テキストフォールド)を表示する場合は、
type属性に「text」を指定します。
入力ヒントを表示したい場合はHTML5から追加された
「placeholder属性」を使用すると便利です。
JavaScript: テキストボックス・テキストエリアの値を取得・設定する
テキストエリア(複数行)
<textarea name="name" cols="20" rows="3">初期表示テキスト</textarea>
パスワード入力フィールド
<input type="password" name="name">
パスワード入力フィールドの場合、画面上は「●」や「※」に置き換えて表示されます。
数値入力フィールド
<input type="number" name="name" min="0" value="0" step="1">
数値入力フィールドは基本的には整数を扱うフィールドですが、マイナスの値や小数点以下の数値も扱えます。
「step属性」で数値のステップを指定します(デフォルトは1)。
チェックボックス
チェック1 チェック2
<input type="checkbox" name="categoryA" value="value1" checked>チェック1
<input type="checkbox" name="categoryA" value="value2">チェック2
チェック印は「checked」でも「checked="checked"」でもどちらでも構いません。
JavaScript: チェックボックスの値を取得・設定する
ラジオボタン
ラジオ1 ラジオ2
<input type="radio" name="categoryA" value="value1" checked>ラジオ1
<input type="radio" name="categoryA" value="value2">ラジオ2
チェック印は「checked」でも「checked="checked"」でもどちらでも構いません。
ドロップダウンメニュー
<select>
<option value="v1" selected>リスト1</option>
<option value="v2">リスト2</option>
<option value="v3">リスト3</option>
</select>
「selected属性」を指定した要素の値が表示されます。
JavaScript: セレクトボックスの値を取得・設定する
リストボックス
<select size="3">
<option value="v1" selected>リスト1</option>
<option value="v2">リスト2</option>
<option value="v3">リスト3</option>
</select>
「size属性」を指定することでリストボックスになり、
「selected属性」を指定した要素が選択状態となります。
JavaScript: セレクトボックスの値を取得・設定する
リストボックス(複数選択)
<select size="3" multiple> <option value="v1" selected>リスト1</option> <option value="v2">リスト2</option> <option value="v3">リスト3</option> </select>
リストボックスを複数選択可能にする場合は、
multiple属性を追加します。
パソコンの場合は「Ctrl」キーを押しながら選択すると、
複数選択できます。
JavaScript: リストボックス(複数選択)の値を取得・設定する
汎用ボタン
<input type="button" name="name" value="汎用ボタン">
送信ボタン
<input type="submit" name="name" value="送信">
「value属性」の初期値はブラウザによって異なります。
送信ボタンを押すと、form要素で指定したaction属性のプログラムが実行されます。
リセットボタン
<input type="reset" name="name" value="リセット">
「value属性」の初期値はブラウザによって異なります。
リセットボタンを押すと、フォームに入力したデータがリセットされ、初期状態に戻ります。
ファイル選択ボタン
<input type="file" name="filename">
type="file"を指定する場合は、formタグに「method="post"」と、 「enctype="multipart/form-data"」を指定します。
色の選択ボタン
<input type="color" name="color" value="#ff0000">
「value属性」のデフォルトは"#000000"。