¿Cómo especificar a qué elemento de formulario está vinculada una etiqueta?

La etiqueta de etiqueta en HTML nos permite hacer clic en la etiqueta, que a su vez se tratará como hacer clic en el tipo de entrada correspondiente. Los tipos de entrada en el HTML pueden ser un botón de radio, una casilla de verificación, un correo electrónico, una fecha, un color, etc. El atributo for especifica a qué elemento de formulario está vinculada una etiqueta.

Sintaxis:

<label for="element_id"> Label Content </label>

Ejemplo 1:

HTML

<!DOCTYPE html>
<html lang="en">
  <body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
  
    <h2>Label for attribute</h2>
  
    <p>Please click on the labels to select the radio button</p>
  
    <form>
      <label for="Student">Student</label>
      <input type="radio" name="Category" id="Student" value="Student" />
      <br />
  
      <label for="WorkingProfessional">
         Working Professional
      </label>
      <input
        type="radio"
        name="Category"
        id="WorkingProfessional"
        value="WorkingProfessional"/>
      <br />
  
      <label for="Retired">Retired</label>
      <input type="radio" name="Category" 
             id="Retired" value="Retired" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Producción:

Etiqueta para atributo

Si hacemos clic en Alumno , se seleccionará el botón de radio correspondiente, aumentando así el área de selección. Esto se hace con la ayuda de una etiqueta de etiqueta para los atributos.

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
  <body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2>Label Tag</h2>
  
    <p>Please click on the labels to select the radio button</p>
  
    <form>
      <label for="Four Wheeler">Four Wheeler</label>
      <input
        type="radio"
        name="Category"
        id="Four Wheeler"
        value="Four Wheeler"/>
      <br />
  
      <label for="Two Wheeler">Two Wheeler</label>
      <input
        type="radio"
        name="Category"
        id="Two Wheeler"
        value="Two Wheeler"/>
      <br />
  
      <label for="Others">Others</label>
      <input type="radio" name="Category" 
             id="Others" value="Others" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Producción:

Etiqueta

Publicación traducida automáticamente

Artículo escrito por arpitadeb595 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta