VIDEO LESSON

HTMLのinputタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の六十一本目は、インプット、タグです。
0:09インプットは、フォームの中で利用者が文字や数値を入力したり、項目を選んだりするための欄を作るタグです。
0:16名前の入力欄も、メールアドレスの欄も、チェックボックスも、もとをたどれば同じインプットです。
0:23何が違うのかというと、タイプ属性で指定する入力の種類です。
0:28今回は、タイプの選び方から、入力を助ける属性と検証の仕組みまで、順番に学びましょう。
0:34フォーム作りの中心になるタグなので、しっかり押さえておきましょう。
0:39身の回りの申し込み画面や検索欄を思い浮かべると、インプットの働きがイメージしやすくなります。
0:46基本の書き方を確認します。
0:48インプットは空要素と呼ばれる種類で、終了タグは書きませんし、内側に文章を入れることもありません。
0:54タグ一つで入力欄が完成します。
0:56通常はフォームタグの中に置き、ラベルタグと組み合わせて使います。
1:00画面の例では、ラベルのフォー属性とインプットの、アイディーを同じ名前にして対応付けています。
1:05こうすると、ラベルの文字をクリックしただけで入力欄に移動でき、読み上げソフトでも何の欄かが伝わります。
1:12欄だけを置いて説明を省かないことが、使いやすいフォームの第一歩です。
1:16なお、スラッシュを付けた自己終了のような書き方をしても意味は同じで、終了タグだけは書かない点がポイントです。
1:23タイプ属性の代表例を見ていきます。
1:25まず文字を入れる種類です。
1:27テキストはふつうの一行入力、イーメールはメールアドレス専用で、形式が正しいかをブラウザーが確かめてくれます。
1:35パスワードは入力した文字が伏せ字で表示され、サーチは検索用の欄になります。
1:40ほかに電話番号向けのテルや、ユーアールエル向けのタイプもあります。
1:45種類を正しく選ぶと、スマートフォンではメール用や数字用のキーボードが自動で切り替わるなど、
1:49利用者の手間も減ります。
1:53見た目が似ていても、意味に合ったタイプを選ぶことが大切です。
1:58次に、選ぶタイプと特殊なタイプです。
2:01チェックボックスは同意確認のように、オンとオフを切り替える項目に向きます。
2:07ラジオボタンは、同じ名前の選択肢の中から一つだけを選ぶときに使います。
2:13ファイルを選ぶファイル、数値を扱うナンバー、日付を選ぶデイト、色を選ぶカラーなど、
2:17タイプは二十種類以上あります。
2:22送信ボタンになるサブミットや、見た目に出さないヒドゥンもあります。
2:27全部を暗記する必要はありません。
2:30入力してほしい内容から逆算してタイプを選ぶ、という考え方を覚えておきましょう。
2:36よく使う三つの属性を整理します。
2:39ネームは送信時の項目名で、サーバー側はこの名前を手がかりに入力を受け取ります。
2:45名前がない欄は通常送信されないので、忘れずに付けましょう。
2:49バリューは初期値で、あらかじめ欄に入れておきたい値や、ラジオボタンなどで送信する値を指定します。
2:57プレースホルダーは、入力例などの短いヒントを薄く表示するものです。
3:02ただし、入力を始めると消えてしまうため、欄の名前を伝えるラベルの代わりにはなりません。
3:09ヒントは補助、名前はラベル、と役割を分けましょう。
3:13オートコンプリートと組み合わせると、名前や住所などをブラウザーが候補として提案してくれる場面も増えます。
3:21入力の状態を決める三つの属性です。
3:23リクワイアードを付けると、その欄の入力が必須になり、空のままでは送信できなくなります。
3:29ディスエーブルドは欄を無効にして操作できなくするもので、その項目は通常フォームと一緒に送信されません。
3:37一方リードオンリーは読み取り専用で、値は変えられませんが送信はされます。
3:42この二つは似て見えて結果が違うので注意しましょう。
3:46なお、これらは真偽属性といって、書いてあるかどうかだけで決まります。
3:51ディスエーブルド、イコール、フォルスと書いても無効のままなので、解除したいときは属性自体を取り除きます。
3:58ブラウザーに検証を手伝ってもらう属性もあります。
4:02数値や日付の欄では、ミンで最小値、マックスで最大値、ステップで刻み幅を指定でき、
4:07範囲外の値は送信時に知らせてくれます。
4:12文字の欄では、ミニマムレングスとマックスレングスで文字数の下限と上限を決められます。
4:18パターンは、郵便番号のような決まった形式を正規表現で指定するものです。
4:24ただし、ブラウザーの検証はあくまで入力ミスを減らす手助けです。
4:29求める形式は文章でも説明し、サーバー側でも必ず検証する、という二重の備えを忘れないでください。
4:37特に数値の欄では、ステップを実情に合わせておくと、半端な値が入るミスを未然に防げます。
4:44もう少し便利な属性を紹介します。
4:46チェックトは、チェックボックスやラジオボタンを最初から選択済みの状態にするものです。
4:52マルチプルを付けると、メールアドレスやファイルを複数入力できるようになります。
4:57アクセプトはファイル選択で選べる種類を絞るヒントですが、安全なファイルであることを保証するものではない点に注意してください。
5:06リスト属性でデータリストと結び付けると、入力候補を提示しながら自由な入力も受け付けられます。
5:13オートコンプリートで名前やメールアドレスを指定すると、ブラウザーの自動入力も働きやすくなります。
5:20活用例として、記事でも紹介されているメールアドレスの登録欄を作ってみましょう。
5:26ラベルでメールアドレスと示し、インプットにはアイディーとネーム、タイプ、
5:30イーメールを指定します。
5:34オートコンプリートにイーメールを書くと自動入力の対象になり、リクワイアードで必須にできます。
5:41この形なら、形式の間違いはブラウザーが知らせてくれますし、キーボードだけでも操作できます。
5:49インプット単体では送信は完結しないので、フォームで囲み、送信ボタンとセットで使う流れも一緒に覚えておきましょう。
5:58入力後にエラーが出たときは、どの欄の何が問題かを文章で伝える配慮も、使いやすさにつながります。
6:06ブラウザー互換性を確認します。
6:08記事が参照するエムディーエヌの記録では、インプット要素本体はクロームが一以降、
6:14エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、ごく初期から対応しています。
6:20ネームやチェックトなど基本の属性も同様です。
6:23一方で、プレースホルダーやリクワイアード、ミニマムレングスなど、後から加わった属性は対応開始の版がそれぞれ異なります。
6:32要素が使えることと、すべての属性が使えることは別なので、新しい属性を使うときは個別に確認しましょう。
6:39狭い画面でも欄とラベルが欠けないか、実際に試すことも大切です。
6:44スマートフォンではタイプごとにキーボードの種類も変わるため、実機での確認が特に役立ちます。
6:50最後にまとめです。
6:51インプットタグは、タイプ属性によって文字、メール、チェック、ファイルなど、
6:55さまざまな入力欄になる要素でした。
6:59ポイントは三つです。
7:01一つ目、入力してほしい内容に合ったタイプを選ぶこと。
7:05二つ目、ラベルで欄の名前を伝え、ネームで送信時の項目名を付けること。
7:10三つ目、リクワイアードやパターンなどでブラウザーの検証を活用しつつ、サーバー側の検証も欠かさないことです。
7:17練習として、名前とメールアドレスと同意チェックのある小さなフォームを作り、
7:22ブラウザーで入力と送信の動きを確認してみてください。
7:27お疲れさまでした。
7:28まずはテキストとイーメールとチェックボックスの三種類から使い分けに慣れていきましょう。

この動画で学べること

inputタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。type によって文字・メール・チェック・ファイルなどの入力欄になります。name は送信時の項目名です。

解説記事・サンプルコードを読む：HTMLのinputタグとは？属性・使い方・ブラウザー互換性と活用例 →