最終更新このページでは、HTMLでの入力フォームの作り方を1から解説します。<form>をはじめとするフォームに関するタグの使い方もまとめています。入力欄ラベル(label)ボタンdivやspanなどさまざまな要素が使えるフォームデータの検証(バリデーション)ブラウザによるバリデーションの例ブラウザのバリデーションの注意点CSSの:invalidを使うとリアルタイムのバリデーションにフォーム(form)とは?フォームとは入力欄や送信ボタンの集まりのことです。フォームを使うと、名前やプロフィール文、性別などなどブラウザで入力された値をまとめてサーバーへ送ることができます。HTMLのフォームの基本HTMLではフォームを作るときに<form>タグを使います。<form>〜</form>が1つのフォームになり、中に含まれる入力欄のデータがまとめて送られます。👆こちらは1つのフォームです。<input>により入力欄を設置し、<button>により送信ボタンを設置しています。<label>は、入力欄の項目名を表すために使います。これらのフォームの部品は<form>タグの中に入れるようにします。フォーム部品の一覧は、後ほど紹介します。name="nickname">👆ひとつひとつの入力欄にはname="◯◯"という形で名前をつけましょう。この例だとname="nickname"により、inputタグの名前がnicknameになります。サーバーへ送信したときにnickname=太郎のようにどの値が、どの入力欄に対応しているのかをサーバー側が分かるようになります。...</form>👆フォームデータの送信先はactionアクション属性で指定します。action="送信先のURL">という形になります。指定されなかった場合は、現在のページのURLが送信先になります。...</form><form>のmethodメソッド属性では、データをどのように送るかを指定します。ここで使用できるメソッドはGETとPOSTです。GETメソッドおもにデータを取得するときに使います。「フォームにユーザーIDを入れて送るから、当てはまるユーザーのデータをちょうだい」のような使い方をします。POSTメソッドおもにデータを書き込む(保存する)ときに使います。「名前とプロフィール文を送るから、新規ユーザーとして保存して」のような使い方をします。👩‍💻GETだとフォームデータがURLにくっつく形で送られるmethod="get"にすると、フォームデータはURLにくっつく形で送られます。具体的には送信先のURL?フィールド名=値のような形になります。https://example.com/users?name=太郎&profile=スーパークリエイターです👆フォーム内の入力欄でname=太郎、profile=スーパークリエイターですと入力された場合、URLはこのようなイメージになります。😺実際には日本語の文字列は、送信時に英数字と%にエンコード(変換)されたりします。GETで送信すると、URLを見ればどんなデータが送られたかが分かります。一方でmethod="post"を使うと、送信内容が(URLに付くのではなく)本文として送られます。画像などのファイルを送る場合、URLにファイルデータを含めることは難しいため、method="post"にする必要があります。メソッドの指定はmethod="post"のように小文字で書きましょう。デフォルトはgetです。何も指定されなかった場合はGETメソッドで送られるわけですね。...</form>👆enctype属性は送信するデータの形式を指定するためのものです。サーバーにファイルを送るときには、multipart/form-dataを指定します。enctypeの値enctypeに指定する値として知っておきたいのは次の2つの値です。application/x-www-form-urlencodedデータをURL形式にエンコード(変換)して送る形式。multipart/form-dataフォームデータの中に、文字列だけでなく様々な形式のデータを含めることができる。画像や動画、音声などのファイルを送るときにはこれを指定。👆application/x-www-form-urlencodedはデフォルト値なので指定することはほとんどありません。実際には「画像や動画などのファイルを送るときにenctype="multipart/form-data"を指定する」というように覚えておくのが良いでしょう。😺このほかにtext/plainという、変換を行わずにテキストのまま送る形式もあります。人間は読みやすいのでデバッグ時には便利なのですが、実際には使う機会はほとんどありません。仕様書でも「信頼性が低い」というようなことが書かれています。知っておきたいフォーム部品テキストの入力欄やチェックボックス、ファイルのアップロードなど<form>の中にはさまざまな部品を入れます。ここでは特に覚えておきたいフォーム部品を中心に紹介します。type="text">は1行の入力欄を設置するために使います。👆<textarea>タグは複数行の入力欄を設置するために使います。type="checkbox">は、複数選択できるチェックボックスを設置するために使います。type="radio">は、選択肢の中からどれか1つだけ選べるラジオボタンを設置するために使います。type="file">は、画像や動画などのファイルのアップロードボタンを設置するために使います。画像のみ選択可能にするためにはaccept="image/*"を指定します。multiple属性を指定すると、複数のファイルの選択が可能になります。👆<select>と<option>を使うと、セレクトボックス(プルダウンメニュー)を設置できます。type="ここ">を変えると、さまざまな種類の入力欄を設置できます。👆<label>タグは、<input>などの入力欄にラベル(項目名や説明)をつけるために使います。「何を入力する欄なのか」が分かるようにするために使うわけですね。✍️<label>は1つ1つの入力欄とひも付けます。具体的には次のようにしてひも付けます。👆フォーム内のボタンには基本的に<button>タグを使います。type属性により、ボタンの役割を決めます。👉クリックでフォームが送信される。👉クリックでフォームの内容がリセットされる。👉クリックしてもフォームは送信されない。JavaScriptの処理を実行したいときに使う。👆フォームのデザインを調整したい場合は、<div>、<span>、<table>などの要素を使えばOKです。<form>内でも問題なく使用できます。divでフォーム内に改行を入れるデフォルトでは<input>や<label>は、ブロックを作らない(改行が入らない)ため、入力欄は横並びになります。手っ取り早く、縦に入力欄を並べたければ<div>を使うと、その前後に改行が入るようになります。}というように指定すればラベルの前後で改行が入るようになります。フォームデータの検証(バリデーション)ブラウザには、フォームを送信するときに「データが正しい形式になっているか」をチェックしてくれる機能が備わっています。😺このようなフォームデータの検証はバリデーションと呼ばれます。ブラウザによるバリデーションの例<input>タグや<textarea>タグにrequired属性を指定すると、その入力欄は入力必須になります。空欄のままフォームを送信すると、エラーを表示してくれます。type="email">)に、メールアドレスの形式になっていないテキストを入れて送信しようとすると、エラーを表示してくれます。空のまま送信するとエラーに👆具体的なサンプルです。<input>にrequired属性が指定されているので、空のまま送信するとエラーが表示されます。😺JavaScriptを使わなくてもブラウザが誤った形式のフォームデータの送信を防ぎ、エラーメッセージまで表示してくれるというわけです。表示はブラウザにより異なるエラーメッセージ(このフィールドを入力してください等)の表示のされ方はブラウザによって違いがあります。文言やスタイルを統一したい場合には、JavaScriptを使って自分でバリデーションを作るのが良いかもしれません。サーバー側でも検証をあくまでもブラウザによる、ブラウザ上でのバリデーションに過ぎません。詳しい人がやろうと思えばrequiredがついていても空欄で送ることができます。type="email">を使っていても、メールアドレス以外の文字列を送りつけられる可能性があります。信頼しすぎず、できる限りサーバー側でもチェックを行うようにしましょう。😿基本的にブラウザ上でのバリデーションは詳しい人であればすり抜けることができてしまいます。これは自作orライブラリのバリデーションでも同様です。CSSの:invalidを使うとリアルタイムのバリデーションにCSSの:invalidを使えば、エラーが検知された入力欄のスタイルを変えることができます。(送信ボタンを押す前でも)入力中にリアルタイムで反映されます。詳しくは👇こちらのページをチェックしてみてください。