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"」でもどちらでも構いません。

JavaScript: ラジオボタンの値を取得・設定する

ドロップダウンメニュー


<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"。

HTML・CSS入門