HTML フォーム部品の一覧・まとめ

最終更新日:

HTMLでよく使用するフォーム部品の一覧・まとめです。 チートシート代わりに使えます。

フォーム部品一覧

フォーム部品表示
フォーム・他
フォームなし
隠し属性なし
テキスト・数値入力
テキストボックス(1行)
テキストエリア(複数行)
数値入力フィールド
チェック
チェックボックス チェックボックス
ラジオボタン ラジオ1 ラジオ2
リスト
ドロップダウンメニュー
リストボックス
ボタン
汎用ボタン
送信ボタン
リセットボタン
ファイル選択ボタン
色の選択ボタン

コード例

隠し属性


<input type="hidden" name="name" value="この部分が送信されます">

隠し属性はユーザーID等、画面に表示することなく情報を送信したい場合に使用します。

「value属性」で送信する情報を指定します。

テキストボックス(1行)


<input type="text" name="name" value="" placeholder="初期表示テキスト" size="20" maxlength="10">

初期値を表示する場合はHTML5から追加された「placeholder属性」を使用すると便利です。

テキストエリア(複数行)


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

ラジオボタン

ラジオ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>

リストボックス


<select size="3">
    <option value="v1" selected>リスト1</option>
    <option value="v2">リスト2</option>
    <option value="v3">リスト3</option>
</select>

「size属性」を指定することでリストボックスになります。

汎用ボタン


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