フォームと入力
検索ボックス、ログイン、チェックアウト、コメント欄など、あなたのために何かをするほぼすべてのウェブサイトはフォームを基盤としています。フォームは、ページが訪問者に話しかけることを止めて、聞き始める方法です。誰かが入力したもの、チェックしたもの、または選択したものを収集し、そのデータを処理するために渡します。この章は、それを可能にするHTMLについてです。
formエレメント
フォーム は、訪問者が入力するものをグループ化するコンテナです。入力とボタンを <form> エレメント内にラップすると、フォームの役割は、訪問者が完了したときにすべてを集めて送信することです。
<form>
<label>お名前</label>
<input>
<button>送信</button>
</form>医者の診療所で記入する紙のフォームのようなものと考えてください。シートはすべてのボックスを保持し、それぞれに記入し、下部に全体のシートを一度に返します。<form> エレメントがそのシートです。
<form> は、入力とボタンを保持するコンテナであり、誰かが送信したときにすべてを一緒に送信します。机上の紙のフォームを想像してください。1つのシート、たくさんのボックス、一度に返されます。フィールドをフォームでラップすると、何か賢いことをしなくても、収集して送信する動作が得られます。 入力とラベル
<input> は訪問者が入力するボックスです。ただし、それ自体では、入力は何のためのものかを示唆しない空のボックスです。それが ラベル の役割です。訪問者にボックスに何を入れるかを告げるテキストの部分です。
<label for="city">都市</label>
<input id="city">すべての入力にはラベルが必要です。入力に id を与え、ラベルに for でそれを指して、両方で同じ単語を使用することで、2つを接続します。リンクされたら、ラベルをクリックするとカーソルがボックスに入り、これはフォームをすべての人にとって使いやすくする小さな親切です。
<input> は人々が入力するボックスで、<label> はそこに何が行くかを告げるテキストです。一致する for と id でそれらをリンクし、ラベルをクリックするとボックスに直接ジャンプします。すべての単一の入力にラベルを付けます。単語のない孤独なボックスは、人々を混乱させるだけです。 その他のコントロール
すべてが単純なテキストボックスではありません。いくつかの質問は、チェック、選択、またはリストから選択することでより良く答えられます。チェックボックス (checkbox) はオン/オフスイッチで、ドロップダウンでは複数のオプションから1つを選択できます。
<label>
<input type="checkbox"> ニュースレターを送ってください
</label>
<label for="size">サイズ</label>
<select id="size">
<option>小</option>
<option>中</option>
<option>大</option>
</select>これらを暗記する必要はありません。重要なのは、フォームは適切な方法で質問をすることができるということです。入力、チェック、またはリストから選択します。
<input type="checkbox"> で、ドロップダウンは <option> 選択を保持する <select> です。それらを暗記する必要はありません。質問が必要なとき、フォームは単純なボックスよりも多くがあります。 フォームデータの命名と送信方法
フォームが送信されると、各回答はラベルが必要であり、それを受け取る人がどのボックスからきたのかを知ることができます。そのラベルは入力の name です。一度設定すると、値と共に移動します。
<label for="city">都市</label>
<input id="city" name="city">訪問者がそのボックスに「東京」と入力した場合、フォームは「city is 東京」というペアを送信します。name は、受信側がある回答を別の回答から区別する方法です。name のない入力は、送信から完全に除外されるため、この小さな属性は、データが実際に表示されるようにするものです。
name は、その回答のタグです。したがって、受信者は、値が都市ボックスからきたのであり、メールボックスからではないことを知っています。name を設定すると、ボックスの値はラベルされたペアとして送信されます。それを忘れると、そのフィールドは黙って除外されます。これは、多くの人が初めてフォームが何も返さないときに引っかかります。