HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでフォームコントロールにラベルを追加する方法

HTMLの <label> タグは、テキスト入力欄やテキストエリアなどのフォームコントロールにラベルを追加するために使用されます。ラベルを付けることで、ユーザーが入力項目の内容を理解しやすくなり、アクセシビリティの向上にもつながります。

<label>タグの主な属性

<label> タグでは、以下の属性を使用できます。

属性値説明
formform_idラベルが属するフォーム（1つまたは複数）を指定します。
forcontrol id関連付けたい入力コントロールの「id」属性と同じ値を指定します。

使用例

以下のコードを実行すると、HTMLでラベルを追加する方法を確認できます。「for」属性に入力欄のidを指定することで、ラベルとフォームコントロールが正しく紐づけられます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML label Tag</title>
   </head>
   <body>
      <label for = "email">EMAIL-ID:<br />
      <input type = "email" value = "" name = "emailid"
      size = "30" placeholder = "Enter a valid email address">
      <br />
      <br />

      <label for = "phone">PHONE NO:<br />
      <input type = "text" value = "" name = "phno"
      size = "30" maxlength = "10" placeholder = "Enter a valid phone number"
      pattern = "[0-9]{10}">
      <br />
      <br />
   </body>
</html>

この例では、メールアドレス用と電話番号用の2つの入力欄にそれぞれラベルを設定しています。「for」属性の値（email、phone）は、各input要素のidと一致させることで、ラベルクリック時に入力欄へフォーカスが移動するようになります。

  1. HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

    HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ

  2. HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

    HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。action属性の基本構文action属性の基本的な書き方は以下のとおりです。<form action=URL></form>action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。HTMLフォームaction属性の使用例それでは、実際にa