ユーザーに入力させる要素とフォーム送信

Updated
2021/8/8 9:50
Author
Jumpei IkegamiJumpei Ikegami
order
6
ユーザーからのインプットを受け付けるタグはHTMLタグの中でも固有の役割をもった重要なタグです。その主な使い方について説明します。
なお、実際の表示を試したい場合は次のチュートリアルで紹介したCodePenにソースコードを貼って試してみましょう。
簡単なHTMLとJavaScriptで自分だけのテキスト変換ツールをつくろう2021/6/20 5:402021/6/20 8:09

ユーザーに何かを入力させる要素

ユーザーから入力を受け付けるための要素と、それを表示させるために使うHTMLタグについて紹介します。
なお、これから紹介するタグにname属性やvalue属性を指定している場合があります。それらの意味については後述します。

inputタグについて

ユーザーからのインプットを受け付ける要素の多くは、inputタグで表現されます。
inputタグのtype属性に何を指定するかに応じて、入力方法や表示形式が変わります。指定できるtype属性だけで20種類以上ありますが、代表的なものは次の3つです。
  • type="text"
  • type="radio"
  • type="checkbox"

テキストエリア

1行のテキスト入力を受け付けるには、inputタグのtype属性に"text"を指定して使います。
HTML
notion image

ラジオボタン

複数のラジオボタンから1つを選ばせるには、inputタグのtype属性に"radio"を指定して使います。1つのラジオボタンが、1つのinputタグに対応します。name属性を同じ値にすることで、inputタグが複数あっても同じグループであると示すことができます。
HTML
notion image

チェックボックス

複数のチェックボックスから複数を選ばせるには、inputタグのtype属性に"checkbox"を指定して使います。1つのチェックボックスが、1つのinputタグに対応します。name属性を同じ値にすることで、inputタグが複数あっても同じグループであると示すことができます。
HTML
notion image

テキストエリア

1行のテキスト入力はinputタグのtype="text"でしたが、複数行を入力させたい場合はtextareaタグを使います。inputタグは閉じタグが不要でしたが、使い方がほとんど同じであるtextareaタグはなぜか閉じタグが必須になっています。
HTML
notion image

セレクトボックス

セレクトボックスは、selectタグとoptionタグを組み合わせて表現します。1つの選択肢が1つのoptionタグに対応し、全体をselectタグで囲みます。
HTML
notion image
↑展開前
notion image
↑展開後

フォーム送信

ここまでで紹介した「ユーザーからのインプットを受け付けるタグ」は、一般には入力フォームの構成要素として使われるため、「フォーム部品」と呼ばれることもあります。
入力フォームとは、お問い合わせページによくあるやつです。
notion image
↑非常に簡易なフォーム
実際にフォームとして機能させるには、テキストエリアなどの入力用フォーム部品に加えて、ユーザーが送信を実行するための送信ボタンを設置します。送信ボタンは、一般的にはinputタグのtype属性に"submit"を指定することで設置できます。さらに、送信ボタンも含めたフォーム部品全体をformタグで囲みます。
HTML
悲しいことに、実際にフォームで送信されたデータを受け取るには、そのためのサーバーを用意する必要があります。サーバーがリクエストを受け取るためのURLをformタグのaction属性に指定することで、フォーム送信時にそのURLに対して入力内容を含めたHTTPリクエストが送られます。
上記フォームが送信された場合に送られるデータのイメージは、次の通りです。
JSON
送信データの項目名には、name属性で指定した値が使われます。
送信データの各項目の値には、実際にユーザーによって入力された値がセットされます。なお、ラジオボタンやチェックボックスなど選択式のフォーム部品については、ユーザーが選んだ選択肢に対応する要素のvalue属性に指定した値が、送信データの値として使われます。

もっと詳しく知りたい方へ