ユーザーに入力させる要素とフォーム送信
Updated
2021/8/8 9:50
Author
Jumpei Ikegamiorder
6
ユーザーからのインプットを受け付けるタグはHTMLタグの中でも固有の役割をもった重要なタグです。その主な使い方について説明します。
簡単な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
ラジオボタン
複数のラジオボタンから1つを選ばせるには、
inputタグのtype属性に"radio"を指定して使います。1つのラジオボタンが、1つのinputタグに対応します。name属性を同じ値にすることで、inputタグが複数あっても同じグループであると示すことができます。HTML
チェックボックス
複数のチェックボックスから複数を選ばせるには、
inputタグのtype属性に"checkbox"を指定して使います。1つのチェックボックスが、1つのinputタグに対応します。name属性を同じ値にすることで、inputタグが複数あっても同じグループであると示すことができます。HTML
テキストエリア
1行のテキスト入力は
inputタグのtype="text"でしたが、複数行を入力させたい場合はtextareaタグを使います。inputタグは閉じタグが不要でしたが、使い方がほとんど同じであるtextareaタグはなぜか閉じタグが必須になっています。HTML
セレクトボックス
セレクトボックスは、
selectタグとoptionタグを組み合わせて表現します。1つの選択肢が1つのoptionタグに対応し、全体をselectタグで囲みます。HTML
↑展開前
↑展開後
フォーム送信
ここまでで紹介した「ユーザーからのインプットを受け付けるタグ」は、一般には入力フォームの構成要素として使われるため、「フォーム部品」と呼ばれることもあります。
入力フォームとは、お問い合わせページによくあるやつです。
↑非常に簡易なフォーム
実際にフォームとして機能させるには、テキストエリアなどの入力用フォーム部品に加えて、ユーザーが送信を実行するための送信ボタンを設置します。送信ボタンは、一般的には
inputタグのtype属性に"submit"を指定することで設置できます。さらに、送信ボタンも含めたフォーム部品全体をformタグで囲みます。HTML
悲しいことに、実際にフォームで送信されたデータを受け取るには、そのためのサーバーを用意する必要があります。サーバーがリクエストを受け取るためのURLを
formタグのaction属性に指定することで、フォーム送信時にそのURLに対して入力内容を含めたHTTPリクエストが送られます。上記フォームが送信された場合に送られるデータのイメージは、次の通りです。
JSON
送信データの項目名には、
name属性で指定した値が使われます。送信データの各項目の値には、実際にユーザーによって入力された値がセットされます。なお、ラジオボタンやチェックボックスなど選択式のフォーム部品については、ユーザーが選んだ選択肢に対応する要素の
value属性に指定した値が、送信データの値として使われます。