WEBVTT

1
00:00:00.000 --> 00:00:00.917
こんにちは。

2
00:00:00.917 --> 00:00:04.278
エイチティーエムエル、リファレンス解説です。

3
00:00:04.278 --> 00:00:09.166
エイチティーエムエルタグ編の六十一本目は、インプット、タグです。

4
00:00:09.166 --> 00:00:16.957
インプットは、フォームの中で利用者が文字や数値を入力したり、項目を選んだりするための欄を作るタグです。

5
00:00:16.957 --> 00:00:23.985
名前の入力欄も、メールアドレスの欄も、チェックボックスも、もとをたどれば同じインプットです。

6
00:00:23.985 --> 00:00:28.415
何が違うのかというと、タイプ属性で指定する入力の種類です。

7
00:00:28.415 --> 00:00:34.831
今回は、タイプの選び方から、入力を助ける属性と検証の仕組みまで、順番に学びましょう。

8
00:00:34.831 --> 00:00:39.873
フォーム作りの中心になるタグなので、しっかり押さえておきましょう。

9
00:00:39.873 --> 00:00:46.900
身の回りの申し込み画面や検索欄を思い浮かべると、インプットの働きがイメージしやすくなります。

10
00:00:46.900 --> 00:00:48.504
基本の書き方を確認します。

11
00:00:48.504 --> 00:00:54.426
インプットは空要素と呼ばれる種類で、終了タグは書きませんし、内側に文章を入れることもありません。

12
00:00:54.426 --> 00:00:56.276
タグ一つで入力欄が完成します。

13
00:00:56.276 --> 00:01:00.224
通常はフォームタグの中に置き、ラベルタグと組み合わせて使います。

14
00:01:00.224 --> 00:01:05.899
画面の例では、ラベルのフォー属性とインプットの、アイディーを同じ名前にして対応付けています。

15
00:01:05.899 --> 00:01:12.191
こうすると、ラベルの文字をクリックしただけで入力欄に移動でき、読み上げソフトでも何の欄かが伝わります。

16
00:01:12.191 --> 00:01:16.386
欄だけを置いて説明を省かないことが、使いやすいフォームの第一歩です。

17
00:01:16.386 --> 00:01:23.048
なお、スラッシュを付けた自己終了のような書き方をしても意味は同じで、終了タグだけは書かない点がポイントです。

18
00:01:23.048 --> 00:01:25.540
タイプ属性の代表例を見ていきます。

19
00:01:25.540 --> 00:01:27.446
まず文字を入れる種類です。

20
00:01:27.446 --> 00:01:35.363
テキストはふつうの一行入力、イーメールはメールアドレス専用で、形式が正しいかをブラウザーが確かめてくれます。

21
00:01:35.363 --> 00:01:40.787
パスワードは入力した文字が伏せ字で表示され、サーチは検索用の欄になります。

22
00:01:40.787 --> 00:01:45.625
ほかに電話番号向けのテルや、ユーアールエル向けのタイプもあります。

23
00:01:45.625 --> 00:01:49.804
種類を正しく選ぶと、スマートフォンではメール用や数字用のキーボードが自動で切り替わるなど、

24
00:01:49.804 --> 00:01:53.982
利用者の手間も減ります。

25
00:01:53.982 --> 00:01:58.380
見た目が似ていても、意味に合ったタイプを選ぶことが大切です。

26
00:01:58.380 --> 00:02:01.327
次に、選ぶタイプと特殊なタイプです。

27
00:02:01.327 --> 00:02:07.384
チェックボックスは同意確認のように、オンとオフを切り替える項目に向きます。

28
00:02:07.384 --> 00:02:13.114
ラジオボタンは、同じ名前の選択肢の中から一つだけを選ぶときに使います。

29
00:02:13.114 --> 00:02:17.698
ファイルを選ぶファイル、数値を扱うナンバー、日付を選ぶデイト、色を選ぶカラーなど、

30
00:02:17.698 --> 00:02:22.282
タイプは二十種類以上あります。

31
00:02:22.282 --> 00:02:27.684
送信ボタンになるサブミットや、見た目に出さないヒドゥンもあります。

32
00:02:27.684 --> 00:02:30.303
全部を暗記する必要はありません。

33
00:02:30.303 --> 00:02:36.688
入力してほしい内容から逆算してタイプを選ぶ、という考え方を覚えておきましょう。

34
00:02:36.688 --> 00:02:39.193
よく使う三つの属性を整理します。

35
00:02:39.193 --> 00:02:45.299
ネームは送信時の項目名で、サーバー側はこの名前を手がかりに入力を受け取ります。

36
00:02:45.299 --> 00:02:49.839
名前がない欄は通常送信されないので、忘れずに付けましょう。

37
00:02:49.839 --> 00:02:57.354
バリューは初期値で、あらかじめ欄に入れておきたい値や、ラジオボタンなどで送信する値を指定します。

38
00:02:57.354 --> 00:03:02.521
プレースホルダーは、入力例などの短いヒントを薄く表示するものです。

39
00:03:02.521 --> 00:03:09.253
ただし、入力を始めると消えてしまうため、欄の名前を伝えるラベルの代わりにはなりません。

40
00:03:09.253 --> 00:03:13.167
ヒントは補助、名前はラベル、と役割を分けましょう。

41
00:03:13.167 --> 00:03:21.308
オートコンプリートと組み合わせると、名前や住所などをブラウザーが候補として提案してくれる場面も増えます。

42
00:03:21.308 --> 00:03:23.766
入力の状態を決める三つの属性です。

43
00:03:23.766 --> 00:03:29.982
リクワイアードを付けると、その欄の入力が必須になり、空のままでは送信できなくなります。

44
00:03:29.982 --> 00:03:37.356
ディスエーブルドは欄を無効にして操作できなくするもので、その項目は通常フォームと一緒に送信されません。

45
00:03:37.356 --> 00:03:42.560
一方リードオンリーは読み取り専用で、値は変えられませんが送信はされます。

46
00:03:42.560 --> 00:03:46.175
この二つは似て見えて結果が違うので注意しましょう。

47
00:03:46.175 --> 00:03:51.090
なお、これらは真偽属性といって、書いてあるかどうかだけで決まります。

48
00:03:51.090 --> 00:03:58.608
ディスエーブルド、イコール、フォルスと書いても無効のままなので、解除したいときは属性自体を取り除きます。

49
00:03:58.608 --> 00:04:02.501
ブラウザーに検証を手伝ってもらう属性もあります。

50
00:04:02.501 --> 00:04:07.286
数値や日付の欄では、ミンで最小値、マックスで最大値、ステップで刻み幅を指定でき、

51
00:04:07.286 --> 00:04:12.071
範囲外の値は送信時に知らせてくれます。

52
00:04:12.071 --> 00:04:18.884
文字の欄では、ミニマムレングスとマックスレングスで文字数の下限と上限を決められます。

53
00:04:18.884 --> 00:04:24.561
パターンは、郵便番号のような決まった形式を正規表現で指定するものです。

54
00:04:24.561 --> 00:04:29.589
ただし、ブラウザーの検証はあくまで入力ミスを減らす手助けです。

55
00:04:29.589 --> 00:04:37.213
求める形式は文章でも説明し、サーバー側でも必ず検証する、という二重の備えを忘れないでください。

56
00:04:37.213 --> 00:04:44.188
特に数値の欄では、ステップを実情に合わせておくと、半端な値が入るミスを未然に防げます。

57
00:04:44.188 --> 00:04:46.456
もう少し便利な属性を紹介します。

58
00:04:46.456 --> 00:04:52.409
チェックトは、チェックボックスやラジオボタンを最初から選択済みの状態にするものです。

59
00:04:52.409 --> 00:04:57.937
マルチプルを付けると、メールアドレスやファイルを複数入力できるようになります。

60
00:04:57.937 --> 00:05:06.725
アクセプトはファイル選択で選べる種類を絞るヒントですが、安全なファイルであることを保証するものではない点に注意してください。

61
00:05:06.725 --> 00:05:13.245
リスト属性でデータリストと結び付けると、入力候補を提示しながら自由な入力も受け付けられます。

62
00:05:13.245 --> 00:05:20.048
オートコンプリートで名前やメールアドレスを指定すると、ブラウザーの自動入力も働きやすくなります。

63
00:05:20.048 --> 00:05:26.434
活用例として、記事でも紹介されているメールアドレスの登録欄を作ってみましょう。

64
00:05:26.434 --> 00:05:30.364
ラベルでメールアドレスと示し、インプットにはアイディーとネーム、タイプ、

65
00:05:30.364 --> 00:05:34.294
イーメールを指定します。

66
00:05:34.294 --> 00:05:41.826
オートコンプリートにイーメールを書くと自動入力の対象になり、リクワイアードで必須にできます。

67
00:05:41.826 --> 00:05:49.194
この形なら、形式の間違いはブラウザーが知らせてくれますし、キーボードだけでも操作できます。

68
00:05:49.194 --> 00:05:58.364
インプット単体では送信は完結しないので、フォームで囲み、送信ボタンとセットで使う流れも一緒に覚えておきましょう。

69
00:05:58.364 --> 00:06:06.060
入力後にエラーが出たときは、どの欄の何が問題かを文章で伝える配慮も、使いやすさにつながります。

70
00:06:06.060 --> 00:06:08.227
ブラウザー互換性を確認します。

71
00:06:08.227 --> 00:06:14.440
記事が参照するエムディーエヌの記録では、インプット要素本体はクロームが一以降、

72
00:06:14.440 --> 00:06:20.653
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、ごく初期から対応しています。

73
00:06:20.653 --> 00:06:23.831
ネームやチェックトなど基本の属性も同様です。

74
00:06:23.831 --> 00:06:32.355
一方で、プレースホルダーやリクワイアード、ミニマムレングスなど、後から加わった属性は対応開始の版がそれぞれ異なります。

75
00:06:32.355 --> 00:06:39.579
要素が使えることと、すべての属性が使えることは別なので、新しい属性を使うときは個別に確認しましょう。

76
00:06:39.579 --> 00:06:44.058
狭い画面でも欄とラベルが欠けないか、実際に試すことも大切です。

77
00:06:44.058 --> 00:06:50.560
スマートフォンではタイプごとにキーボードの種類も変わるため、実機での確認が特に役立ちます。

78
00:06:50.560 --> 00:06:51.881
最後にまとめです。

79
00:06:51.881 --> 00:06:55.845
インプットタグは、タイプ属性によって文字、メール、チェック、ファイルなど、

80
00:06:55.845 --> 00:06:59.809
さまざまな入力欄になる要素でした。

81
00:06:59.809 --> 00:07:01.277
ポイントは三つです。

82
00:07:01.277 --> 00:07:05.094
一つ目、入力してほしい内容に合ったタイプを選ぶこと。

83
00:07:05.094 --> 00:07:10.085
二つ目、ラベルで欄の名前を伝え、ネームで送信時の項目名を付けること。

84
00:07:10.085 --> 00:07:17.866
三つ目、リクワイアードやパターンなどでブラウザーの検証を活用しつつ、サーバー側の検証も欠かさないことです。

85
00:07:17.866 --> 00:07:22.490
練習として、名前とメールアドレスと同意チェックのある小さなフォームを作り、

86
00:07:22.490 --> 00:07:27.114
ブラウザーで入力と送信の動きを確認してみてください。

87
00:07:27.114 --> 00:07:28.435
お疲れさまでした。

88
00:07:28.435 --> 00:07:34.748
まずはテキストとイーメールとチェックボックスの三種類から使い分けに慣れていきましょう。