意外と多い！？HTMLでフォームを作るとき使えるタグまとめ

コーディング

HTMLでフォームを作成しようとするとき、inputタグやoptionタグ、チェックボックス、ラジオボタンなど…このあたりを使用することは多いと思います。
実はその他にもプログレスバーや計算ができるフィールドの作成ができるんです！

今回はHTMLでフォームを作る時に使えるタグについて解説いたします！

formタグ

まずはフォーム全体をまとめ、入力内容のデータをサーバーに送信するためのformタグです。
HTMLでフォームを作成する際にはまずこのformタグを記述し、その中にinputタグやtextareaタグなどの入力欄を作成していきます。

formタグに指定できる属性は次の通りです。

属性	意味	指定可能な値
action	フォームの送信先のURL	URL（空文字は不可）
accept-charset	フォーム送信時の文字コード	文字コード（空白文字で区切る）
autocomplete	フォーム内のオートコンプリート機能のデフォルト値	autocomplete=”on” / autocomplete=”off”
enctype	送信データのエンコード・タイプを指定する属性 method属性がpostの場合のみ使用するデータ形式はMIMEタイプで指定する	application/x-www-form-urlencoded：全ての文字をURLエンコードする指定。初期設定値。 multipart/form-data：フォームにファイルを送信する機能がある場合に指定。 text/plain：スペースだけ「+」記号に変換。その他の特殊文字はエンコードなし。
method	データを送信する際のHTTPメソッドを指定	method=”GET” / method=”POST”
name	フォームの名前を指定	テキスト
novalidate	入力内容のチェック（バリデート）を行わない場合に指定	属性名を入れるだけで指定可能
target	送信結果をどのページ（ウィンドウ）に表示するのかを指定	target=”_blank”：新規のウィンドウに表示 target=”_self”：現在のフレーム（ウィンドウ）に表示 target=”_parent”：親フレームに表示 target=”_top”：フレーム分割を解除してウィンドウ全体に表示パス/URL：任意のページ（ウィンドウ）に表示

inputタグ

フォームを作成する際にほぼ必ずと行っても良いほど使用するのはinputタグ。
inputタグはtype属性で指定したキーワードによって色々な種類の入力欄、選択用部品となることができます。
属性やキーワードにかなり種類と条件があるため、inputタグは他の記事で解説いたします。

textareaタグ

textareamタグは複数業のテキストの入力欄として使用します。
<textarea>～</textarea>内にテキストをあらかじめ入力すると、サイト上では入力された状態で反映されます。

以下の属性を指定することができます。

属性	意味	指定可能な値
cols	1行に入力可能な文字数	1以上の整数（初期値は20）
rows	入力欄の行数	1以上の整数（初期値は2）
autocomplete	要素のオートコンプリートの制御または自動入力すべき値を示すキーワードなど	autocomplete=”on” / autocomplete=”off” または自動入力詳細トークン
inputmode	入力モードの指定ソフトウェアキーボードなどの制御	none：ソフトウェアキーボードを表示しない text：ユーザーの言語に合わせたテキスト tel：電話番号 url：URL email：メールアドレス numeric：数値 decimal：実数 search：検索用
autofocus	ページ読み込み時に自動的に要素にフォーカスをさせる指示	属性名を入れるだけで指定可能
dirname	文字表記の方向を示す値を送信する送信するフィールドの名前	テキスト
disabled	入力欄を無効にする	属性名を入れるだけで指定可能
form	特定のformタグと関連付ける	関連付けるid属性の値
maxlength	最大文字数	整数（負の値は指定不可）
minlength	最小文字数	整数（負の値は指定不可）
name	入力欄の名前	テキスト
placeholder	入力欄内に表示される入力例や簡単な説明文	テキスト
readonly	値の編集/変更を不可能にする	属性名を入れるだけで指定可能
required	入力欄を必須項目にする	属性名を入れるだけで指定可能
wrap	データの送信時に折り返し部分に改行コードを入れるかの指定	soft：自動的な折り返しを入れ、送信内容には反映しない hard：自動的な折り返しを入れ、送信内容にも反映させる off：自動的な折り返しを入れない

buttonタグ

buttonタグは要素の内容がそのままラベルとして表示されるボタンになる要素です。
type属性にsubmitを指定すると送信ボタン、resetを指定するとリセットボタン、menuを指定するとメニューのボタンなど様々な指定をすることができます。

注意点として、buttonタグの要素にフレージングコンテンツは入れられますが、インタラクティブコンテンツは一切入れることができません。

属性	意味	指定可能な値
type	ボタンの種類	submit：フォーム入力内容を送信するサブミットボタン（初期値） reset：フォーム入力内容をリセットするリセットボタン menu：メニューのボタン button：何もしない汎用的な押しボタン
menu	表示させるメニュー	menuのid （type属性を指定した場合には必須）
autofocus	ページ読み込み時に自動的に要素にフォーカスをさせる指示	属性名を入れるだけで指定可能
disabled	入力欄を無効にする	属性名を入れるだけで指定可能
form	特定のformタグと関連付ける	関連付けるid属性の値
formaction	フォームの送信先のURL	URL
formenctype	送信データのエンコード・タイプを指定する属性データ形式はMIMEタイプで指定する	application/x-www-form-urlencoded：全ての文字をURLエンコードする指定。初期設定値。 multipart/form-data：フォームにファイルを送信する機能がある場合に指定。 text/plain：スペースだけ「+」記号に変換。その他の特殊文字はエンコードなし。
formmethod	データを送信する際のHTTPメソッドを指定	method=”GET” / method=”POST”
formnovalidate	入力内容のチェックを行わない	属性名を入れるだけで指定可能
formtarget	送信結果をどのページ（ウィンドウ）に表示するのかを指定	target=”_blank”：新規のウィンドウに表示 target=”_self”：現在のフレーム（ウィンドウ）に表示 target=”_parent”：親フレームに表示 target=”_top”：フレーム分割を解除してウィンドウ全体に表示パス/URL：任意のページ（ウィンドウ）に表示
name	ボタンの名前	テキスト
value	フォームのデータを送信する際に使用される値	テキスト

selectタグ

selectタグは選択肢から選ぶ形式のフォーム部分になる要素です。
選択肢はoptionタグを使用して下記のようにマークアップをします。

<select name="category">
<option disabled="" selected="" value="">カテゴリーを選ぶ</option>
<option value="a">A</option>
<option value="b">B</option>
</select>

属性	意味	指定可能な値
multipt	複数の選択を許可する	属性名を入れるだけで指定可能
size	表示させる項目数	整数
autocomplete	フォーム内のオートコンプリート機能のデフォルト値	autocomplete=”on” / autocomplete=”off”
disabled	入力欄を無効にする	属性名を入れるだけで指定可能
form	特定のformタグと関連付ける	関連付けるid属性の値
name	セレクトの名前	テキスト
required	入力欄を必須項目にする	属性名を入れるだけで指定可能

optionタグ

optionタグはselectタグの選択肢となる要素をマークアップします。
先ほどの例のようにselectタグ内に書くと選択肢として表示されます。

label属性が指定されているとその値が選択肢になりますが、設定していない場合はタグで囲んだテキストの内容が選択肢となります。
また、例のようにdisabled属性とselected属性を指定することで未選択の場合の初期値のテキストを表示させることができます。

属性	意味	指定可能な値
selected	デフォルトで選択状態にする項目	属性名を入れるだけで指定可能
label	要素内容よりも優先して表示させる内容	テキスト
value	要素内容よりも優先してサーバーに送信される内容	テキスト
disabled	入力欄を無効にする	属性名を入れるだけで指定可能