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

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

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

formタグ

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

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

属性意味指定可能な値
actionフォームの送信先のURLURL(空文字は不可)
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>内にテキストをあらかじめ入力すると、サイト上では入力された状態で反映されます。

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

属性意味指定可能な値
cols1行に入力可能な文字数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フォームの送信先のURLURL
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入力欄を無効にする属性名を入れるだけで指定可能

まとめ

属性の指定を工夫することで色々な入力欄を作成することができたり、バリデーションができるようになるのでとても便利です!
ぜひ覚えて活用してみてください!

こちらもおすすめ

この記事をシェアする

関連記事

  • 2022.09.15

    【初心者向け】アクセス解析の用語をまとめて解説!

    ディレクション

    制作

  • 2022.09.13

    Web広告とは?Web広告の基礎知識やメリットを紹介!

    ディレクション

    制作

  • 2022.09.08

    この世界はコードでできている#2

    コーディング

    その他

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.06.09

    この世界はコードでできている#1

    コーディング

    制作

×