次のページここでは色々なウィジェットを詳しく見ていきます。色々な種類のデータを集めるのにどんなオプションが使うるのかを見ていきます。このガイドはいくらか疲れるもので、利用できるネイティブフォームウィジェットをすべて網羅しています。使用して実装する方法を理解する。開発者は独自のフォームウィジェットを作成することがあります。これに関するより多くのアイデアについてはモジュールの後半でカスタムフォームウィジェットの作成方法を見てください。この記事で説明されている機能のほとんどは、ブラウザ間で幅広くサポートされています。これに対する例外に注意しましょう。型の参照を参照してください。共通属性フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。この真偽値属性を使用すると、ユーザがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の1つのフォーム関連要素だけです。この真偽値属性は、ユーザが要素と対話できないことを示します。その設定を継承します。属性が設定されている包含要素がない場合は、その要素が有効になります。ウィジェットが関連付けられているフォーム要素。属性でなければなりません。要素の外側に設定できます。実際には、その機能をサポートするブラウザはありません。これはフォームデータとともに送信されます。フィールドは最も基本的なフォームウィジェットです。これらはユーザがあらゆる種類のデータを入力できるとても便利な方法です。一部のテキストフィールドは特定のニーズを満たすために特化することができます。いくつかの簡単な例をすでに見ました。フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。実行することはできません。作成されたカスタムウィジェットです。設定することができます。これは、ボックスの目的を簡単に説明する、ボックス内に表示されるテキストです。ブラウザがサポートしていれば、スペルチェックの恩恵を受けられます。要素はほとんど何でもあり得るので特別です。属性を設定するだけで、劇的に変更することができ、単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、ボタンなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。ようないくつかの例外があります。記事を読むときには、これらに注意してください。デフォルト値になります)。指定した場合)、この属性の値のテキストは代替値になります。ブラウザはネイティブの日付ピッカーをサポートしていません。(こちらも参照してください)。これは基本的な単一行のテキストフィールドの例です。改行を含むテキストを入力した場合、ブラウザはデータを送信する前に改行を取り除きます。属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。ユーザは正当なメールアドレスを入力しなければなりません。他の内容ではフィールドでエラーが発生します。属性を使用すると、(カンマで区切って)ユーザに対して複数の電子メールアドレスの入力を可能にします。メールアドレスを入力するのにより適した別の仮想キーパッドが表示される場合があります。フォームの検証について詳しくは、記事「フォームデータの検証」を参照してください。name="pwd">入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。これはユーザインターフェイスの機能でしかないことに注意してください。悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。データ送信前に暗号化することです。最近のブラウザは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザが安全でないフォームを使用しないように警告を実装しています。実装しているものの詳細については、安全でないパスワードをご覧ください。あることがよくあります)。フィールドの値は、同じサイトの複数のページにまたがってオートコンプリートで使用するため自動的に保存されることがあります。type="tel">世界にある電話番号の形式は多岐にわたるため、このタイプのフィールドではユーザが入力した値に制約は課されません(文字が入ることなどもあります)。電話番号の入力に適した別の仮想キーパッドが表示されるかもしれません。入力させるという特別な検証制約を加えます。ない値を入力すると、フォームはエラー状態になると考えられます。実在する場所を参照しているとは限りません。特別な制約を持つフィールドでエラー状態にあるものがあると、フォームの送信が妨げられます。加えて、エラーを明らかにするためにスタイルを設定できます。ことができるということです。(こちらもご覧ください)。それを見ると、ほとんどのブラウザではテキスト領域の右下にドラッグハンドルが表示され、ユーザがサイズを変更できるようになっています。設定することで無効にできます。いくつかの行にまたがってそのレンダリングを制御するためのいくつかの追加の属性も受け入れます。コントロールの表示テキスト行数。コントロールがテキストを折り返す方法を示します。要素とは少し異なって書かれていることに注意してください。子要素を含めることはできません。要素は、テキストコンテンツの子を含むことができる通常の要素です。ここで注意すべき2つの重要な関連事項があります。属性を使用する必要があります。開始タグと終了タグの間にデフォルトのテキストを配置します。要素はテキストコンテンツのみを受け入れます。コンテンツは、プレーンテキストのコンテンツであるかのようにレンダリングされることを意味します。ドロップダウンコンテンツドロップダウンウィジェットは、ユーザに多くの選択肢からひとつを選択させるためのシンプルな手段です。セレクトボックスと、オートコンプリートコンテンツです。どちらの場合も、やりとりは同じです。コントロールがアクティブになると、ブラウザはユーザが選択できる値のリストを表示します。この値のリストは、ページコンテンツの最前面に表示されます。要素が選択できる値のひとつひとつを指定します。属性で設定されている場合、その属性の値はフォームの送信時に送信されます。要素の内容が選択ボックスの値として使用されます。属性が値の前に表示されますが、それがオプションのように見えても選択できません。属性を付加すると、ユーザは複数の値を選択可能になります。押したままにして複数の値をクリック)。この場合、セレクトボックスは値をドロップダウンコンテンツとして表示しません。代わりに、通常のリストボックスとして表示します。属性もサポートします。要素を用いて、フォームウィジェット向けに提案するオートコンプリート値を提供できます。要素)に紐付けられます。フォームウィジェットとデータリストが結びつくと、ユーザが入力したテキストのオートコンプリートにデータリストの選択肢が使用されます。一般的に、これは候補を一覧化したドロップダウンとして提示されます。要素はユーザの入力を必要とする任意のウィジェットで使用できます。コントロールではどのように動作すべきかがはっきりしておらず、またブラウザや状況の違いにより動作が異なります。このため、テキストフィールドではないウィジェットでこの機能を使用する際は注意してください。フォームにごく最近追加されたものですそのため、ブラウザのサポートは先ほど見たものより少し制限されています。バージョンではサポートされていません。これを処理するために、ブラウザに素晴らしい代替を提供するためのちょっとしたコツがあります。要素ではないすべての要素を無視し、期待通りに動作します。要素をサポートしていないブラウザはラベルと選択ボックスを表示します。必要とする傾向があります)。18チェック可能アイテムチェック可能アイテムは、クリックすることで状態を変更できるウィジェットです。チェックボックスとラジオボタンです。これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。(こちらも参照してください)。囲むことをお勧めします。含める必要があります。これは例に示されています。属性内でこれらの種類の入力の値も指定する必要があります。