HTML5入力タイプの使用方法
序章
<input>要素は、すべてのHTML5要素の中で最も複雑で強力な要素の1つです。 次に、type属性は、特定の<input>要素がユーザーデータを受け入れる方法を決定します。 これにより、<input>とtypeはWeb開発における2つの重要な概念になります。
現在、HTML5には22の入力タイプがあります。 このチュートリアルでは、それらすべてを確認します。
標準属性
さまざまな入力タイプのそれぞれについて説明する前に、すべてのタイプが次の共通の属性を受け入れることに注意してください。
autocomplete-入力に適用するオートコンプリート機能を示す文字列。通常、オートコンプリートを可能にするためにonに設定されます。autofocus-入力を自動的にフォーカスする必要があるかどうかを示すブール値（ページの読み込み時）disabled-入力を無効にする必要があるかどうかを示すブール値form-入力がメンバーである<form>のID。デフォルトでは、入力を含む最も近い形式になります。list-推奨値のリストを提供する<datalist>要素のID。現時点では広くサポートされていませんname-入力の名前。送信されたデータのインジケーターとして使用されますrequired-<form>を送信する前に値が必要かどうかを示すブール値tabindex-ユーザーがTABを押したときに入力がフォーカスを受け取る順序を示す番号value-入力の現在の値
タイプ固有の属性は、そのタイプのセクションに記載されています。
注：最新のブラウザーではかなりよくサポートされていますが、HTML5のより高度な入力タイプをサポートしていないブラウザーもあります。 これらのシナリオでは、サポートされていない入力タイプは、プレーンなtext入力に正常にフォールバックします。
また、多くのタイプにはemailタイプのような検証が含まれていますが、サーバー側の検証を常に実装することをお勧めします。
文章
<input type="text">
デフォルトの入力タイプであるテキストは、inputの最も基本的な形式です。 自由形式のテキストを受け入れるフィールドです。
Textは、次の属性を受け入れます。
maxlength-有効と見なされる最大文字数minlength-有効と見なされる最小文字pattern-有効と見なされる一致する正規表現placeholder-入力が空のときに表示するテキストの例readonly-入力を読み取り専用にするかどうかのブール値size-入力が表示する幅の文字数spellcheck-スペルチェックを切り替えるブール値
パスワード
<input type="password">
text入力と同様に、パスワードタイプは自由形式のテキスト入力であり、セキュリティのためにユーザーの入力をマスクするという追加のボーナスがあります。
passwordは、spellcheckを除いて、すべての追加属性をtypeとして受け入れます。
隠れた
<input type="hidden">
非表示タイプは別の自由形式のテキストフィールドですが、表示されません。
非表示タイプには追加の属性はありませんが、別の機能があります。
name属性を_charset_に設定すると、入力の値は、送信されるフォームの文字エンコードの値になります。
メールアドレス）
<input type="email">
電子メールタイプは、電子メールアドレス形式の検証を提供します。
共通の属性とテキストタイプの属性に加えて、電子メールタイプはmultipleという名前のブール属性を受け入れます。 これにより、入力で電子メールアドレスのコンマ区切りリストを受け入れることができます。
番号
<input type="number">
数値タイプは、入力を数値（浮動小数点または整数）に制限します。 ほとんどのブラウザでは、値をインクリメントまたはデクリメントするためのボタンも用意されています。
これをさらに一歩進めるために、ほとんどのモバイルブラウザはこのタイプからヒントを得て、データを入力するときにフルキーボードの代わりにテンキーを表示します。
数値タイプは、すべての共通属性を受け入れ、placeholderおよびreadonlyをテキストタイプと共有し、いくつかの数値固有の属性も導入します。
min-有効と見なされる最小値max-有効と見なされる最大値step-上下の矢印をクリックするときに使用する間隔
探す
<input type="search">
検索タイプは、事実上、入力されたテキストをクリアするためのボタンのボーナスが追加されたテキストタイプです。 通常のtextタイプの入力と同じ追加属性を共有します。
電話番号
<input type="tel">
telタイプは電話番号を受け入れることを目的としていますが、telタイプは実際には電話番号の検証を処理しません。 ただし、このタイプはpattern属性を受け入れるため、必要な電話番号形式の検証を追加できます。
<input type="tel" pattern="([0-9]{3}) [0-9]{3}-[0-9]{4}">
<br><small>Format: (800) 555-1212</small>
電話番号タイプは、spellcheckを除くテキストタイプが行うすべての標準属性を受け入れます。
ユニバーサルリソースロケーター（URL）
<input type="url">
電話番号タイプとは異なり、 URLタイプはユーザー入力を受け入れて検証し、空であるか、適切にフォーマットされた絶対URLであると想定します。
このタイプは、URLが実際に有効であることを保証するものではなく（ドメインの解決、サイトの読み込みなど）、入力されるデータのパターンに対する純粋な健全性チェックです：protocol://domainAndSlashesAndSuch
他のほとんどのテキスト入力タイプと同様に、URLタイプも、spellcheckを除いて、テキストタイプと同じ属性を受け入れます。
チェックボックス
<input type="checkbox">
チェックボックスは入力タイプであり、1つまたは複数の項目の選択を表し、通常はオプションのリストとして表示されます。 複数のチェックボックスを使用する場合は、複数のチェックボックスタイプの入力を作成する必要があります。
入力自体には実際のチェックボックスのみが表示され、テキストは表示されないため、その部分を自分で処理する必要があります。
checked-チェックボックスがオンになっているかどうかを示すブール値
ラジオボタン
<input type="radio">
無線タイプ入力は、チェックボックスの「1つ選択」バージョンと見なすことができます。 複数のラジオタイプ入力はグループと見なされ、一度に選択できるラジオボタンはそのグループ内の1つだけです。
checked-ラジオが選択されているかどうかを示すブール値
radioタイプも、checkedブール値を使用します。
範囲
<input type="range">
範囲タイプの入力は、数値タイプの成熟したバージョンのようなものです。 数値を表しますが、値を選択するためのスライダーがユーザーに表示されます。
数値タイプと同様に、範囲タイプの入力は、共通の入力属性に加えて、同じmin、max、およびstep属性を受け入れます。
色
<input type="color">
お気に入りのフレームワークに最適なカラーピッカーを探すためにインターネットを検索する必要はもうありません。
カラータイプ入力は、現在選択されている色を表示するボタンをユーザーに表示し、クリックすると、移動可能なカラーパレットをユーザーに表示し、クリックして色を選択したり、16進色を入力したりすることもできます。コード。
color入力タイプは、他のほとんどの入力タイプよりも大幅に制限されています。 サポートされている唯一の属性（type以外）はvalueです。 他の一般的な入力属性はどれも有効ではありません。
ファイル
<input type="file">
より壮観な入力タイプの1つは、ファイルタイプ入力です。 このタイプの入力により、ユーザーはコンピューターから1つまたは複数のファイルを簡単に選択でき、通常はリモートサーバーにアップロードできます。
最近では、fileタイプの入力が拡張され、ユーザーのカメラからのデータを受け入れて転送できるようになりました。
accept-有効なファイルタイプ（カンマ区切り、拡張子、および/またはMIMEタイプ）capture-画像またはビデオの入力に使用するソース。 ユーザー向け/自分撮りカメラにはuserを指定し、外向きカメラにはenvironmentを指定できます。files-選択した1つまたは複数のファイルの<FileList>multiple-ユーザーが複数のファイルを選択できるかどうかを示すブール値
ボタン
<input type="button">
ボタン要素と非常によく似ており、ボタンタイプ入力は単なるボタンです。
ボタンには、すぐに使用できる機能はありません。 ボタンで何かを実行したい場合は、イベントハンドラーをアタッチするか、submitまたはresetを使用して機能するボタンを取得する必要があります。
buttonタイプの入力の最も重要な属性は、valueです。これは、ボタン自体に表示されるためです（<button>value</button>と同様）。
画像
<input type="image">
画像入力タイプは、ボタンを付けたいが、代わりに画像を使用したい場合に使用します。
ボタンタイプとは異なり、画像には、提供する属性に応じて、もう少し多くの機能があります。
alt-代替テキスト文字列height-画像を表示するためのピクセル単位の高さsrc-画像のソースURLwidth-画像を表示するためのピクセル単位の幅
また、フォーム送信ボタンとして使用する場合は、次のようにします。
formaction-フォームを送信するURLformenctype-使用するエンコーディングタイプ、ファイルを送信するときに処理するformmethod-送信時に使用するHTTPメソッドformnovalidate-フォームの検証をスキップする必要があるかどうかを示すブール値formtarget-フォーム送信結果をロードする場所
リセットボタン
<input type="reset">
リセットタイプは、ボタンタイプ入力の拡張です。 クリックすると、フォームが元の状態にリセットされます。
これはボタンタイプの拡張であるため、リセットタイプはボタンテキストとして使用される値を受け入れます。
送信ボタン
<input type="submit">
少し破壊的ではありませんが、送信タイプ入力は、クリックされたときに現在のフォームを送信します。
日付
<input type="date">
日付タイプ入力は、日付形式のユーザーからの入力を期待するだけでなく、日付を更新するための上下ボタンと、ユーザーが公開して使用できる素敵な小さな日付ピッカーも提供します。
注：表示される値は常にユーザーのロケールに基づく形式で表示されますが、値自体は常にCCYY-MM-DD形式です。
パラメーター：
min-有効と見なされる最も早い日付max-有効と見なされる最新の日付readonly-入力を読み取り専用にするかどうかのブール値step-上下の矢印をクリックするときに使用する間隔
時間
<input type="time">
日付入力と同様に、時間入力タイプは、ユーザー入力が時間文字列の形式であることを想定し、時間と分の値をインクリメントおよびデクリメントするための上下ボタンをユーザーに提供します。子午線（AM / PM）を切り替えます。
一部のブラウザでは、より簡単な時間と分のスライダーを備えたタイムピッカーの形式で、より現代的なエクスペリエンスが提供されます。
min-有効と見なされる最も早い時間max-有効と見なされる最も遅い時刻readonly-入力を読み取り専用にするかどうかのブール値step-上下の矢印をクリックするときに使用する間隔
現地の日時
<input type="datetime-local">
日付と時刻の入力を取得してそれらを単一の入力に結合することは次の論理的なステップでしたが、残念ながら日時ローカル入力タイプは前述のようにサポートされていません。
min-有効と見なされる最も早い日時max-有効と見なされる最新の日時readonly-入力を読み取り専用にするかどうかのブール値step-上下の矢印をクリックするときに使用する間隔
月
<input type="month">
月タイプ入力は、日付タイプおよび日時ローカルタイプの日付部分と同様のインターフェイスを提供し、選択を月と年に制限します。
サポートが提供されると、これはクレジットカードの有効期限と誕生日を受け入れるための優れた入力タイプになります。
min-有効と見なされる最も早い年月max-有効と見なされる最新の年月readonly-入力を読み取り専用にするかどうかのブール値step-上下の矢印をクリックするときに使用する間隔
週
<input type="week">
週タイプの入力は、月タイプと同様に、ユーザーに同じ使い慣れたカレンダーピッカーを表示しますが、選択を特定の週に制限します。
min-有効と見なされる最も早い年週max-有効と見なされる最新の年-週readonly-入力を読み取り専用にするかどうかのブール値step-上下の矢印をクリックするときに使用する間隔
結論
<input>要素は長い道のりを歩んできており、ユーザー入力タイプの完全な（まだ完全にはサポートされていませんが）スイートに拡張されています。 これらの新しいタイプのサポートは急速に向上しており、ほとんどの新しいタイプでは、プレーンテキスト入力にフォールバックするのは理想的ではないかもしれませんが、少なくともそれは非常に優雅です。
