HTML5入力タイプの使用方法
序章
<input> 要素は、すべてのHTML5要素の中で最も複雑で強力なものの1つです。 次に、 type 属性は、与えられた方法を決定します <input> 要素はユーザーデータを受け入れます。 これにより <input> と type Web開発における2つの重要な概念。
現在、HTML5には22の入力タイプがあります。 このチュートリアルでは、それらすべてを確認します。
標準属性
さまざまな入力タイプのそれぞれについて説明する前に、すべてのタイプが次の共通の属性を受け入れることに注意してください。
autocomplete-入力に適用するオートコンプリート機能を示す文字列。通常は次のように設定されます。onオートコンプリートを可能にするautofocus-入力を自動的にフォーカスする必要があるかどうかを示すブール値（ページの読み込み時）disabled-入力を無効にする必要があるかどうかを示すブール値form-のID<form>入力はのメンバーであり、デフォルトでは入力を含む最も近いフォームになりますlist-のID<datalist>提案された値のリストを提供する要素、現時点では広くサポートされていませんname-入力の名前。送信されたデータのインジケーターとして使用されますrequired-値が前に必要かどうかを示すブール値<form>提出することができますtabindex-ユーザーがヒットしたときに入力がフォーカスを受け取る順序を示す番号TABvalue-入力の現在の値
タイプ固有の属性は、そのタイプのセクションに記載されています。
注：最新のブラウザーではかなりよくサポートされていますが、HTML5のより高度な入力タイプをサポートしていないブラウザーもあります。 これらのシナリオでは、サポートされていない入力タイプが正常にプレーンにフォールバックします text 入力。
また、多くのタイプには、 email タイプの場合は、常にサーバー側の検証を実装することをお勧めします。
文章
<input type="text">
デフォルトの入力タイプであるテキストは、inputの最も基本的な形式です。 自由形式のテキストを受け入れるフィールドです。
Text 次の属性を受け入れます。
maxlength-有効と見なされる最大文字数minlength-有効と見なされる最小文字pattern–正規表現は、有効と見なされるために一致しますplaceholder-入力が空のときに表示するテキストの例readonly-入力を読み取り専用にするかどうかのブール値size-入力が表示する幅の文字数spellcheck-スペルチェックを切り替えるブール値
パスワード
<input type="password">
私たちのように text input、パスワードタイプは自由形式のテキスト入力であり、セキュリティのためにユーザーの入力をマスクするという追加のボーナスがあります。
password すべての追加属性を次のように受け入れます type を除いて spellcheck.
隠れた
<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 typeは、実際には電話番号の検証を処理しません。 しかし、このタイプは 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進色を入力したりすることもできます。コード。
The color 入力タイプは、他のほとんどの入力タイプよりも大幅に制限されています。 サポートする唯一の属性（以外 type） それは value. 他の一般的な入力属性はどれも有効ではありません。
ファイル
<input type="file">
より壮観な入力タイプの1つは、ファイルタイプ入力です。 このタイプの入力により、ユーザーはコンピューターから1つまたは複数のファイルを簡単に選択でき、通常はリモートサーバーにアップロードできます。
最近では、 file タイプ入力が拡張され、ユーザーのカメラからのデータを受け入れて転送できるようになりました。
accept-有効なファイルタイプ（カンマ区切り、拡張子、および/またはMIMEタイプ）capture-画像またはビデオ入力に使用するソース。 指定できますuserユーザー向け/自撮りカメラ用およびenvironment外向きカメラ用files-a<FileList>選択した1つまたは複数のファイルの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-上下の矢印をクリックするときに使用する間隔
結論
The <input> elementは長い道のりを歩んできて、ユーザー入力タイプの完全な（まだ完全にはサポートされていませんが）スイートに拡張されています。 これらの新しいタイプのサポートは急速に向上しており、ほとんどの新しいタイプでは、プレーンテキスト入力にフォールバックするのは理想的ではないかもしれませんが、少なくともそれは非常に優雅です。
