freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d778a367417b2b2512aa6	Improve Form Field Accessibility with the label Element	0		Mejorar la accesibilidad del campo de formulario con la etiqueta Elemento

Description

La mejora de la accesibilidad con el marcado HTML semántico se aplica al uso de nombres de etiquetas y atributos apropiados. Los siguientes varios desafíos cubren algunos escenarios importantes utilizando atributos en formularios. La label etiqueta envuelve el texto de un elemento de control de formulario específico, generalmente el nombre o la etiqueta de una opción. Esto vincula el significado al elemento y hace que la forma sea más legible. El atributo for en una label etiqueta asocia explícitamente esa label con el control de formulario y es utilizado por los lectores de pantalla. Aprendió sobre los botones de radio y sus etiquetas en una lección en la sección HTML básico. En esa lección, envolvimos el elemento de entrada del botón de radio dentro de un elemento de label junto con el texto de la etiqueta para poder hacer clic en el texto. Otra forma de lograr esto es utilizando el atributo for como se explica en esta lección. El valor del atributo for debe ser el mismo que el valor del atributo id del control de formulario. Aquí hay un ejemplo:

<form>
<label for = "name"> Name: </label>
<input type = "text" id = "name" name = "name">
</form>

Instructions

Camper Cat espera mucho interés en las publicaciones de su blog, y desea incluir un formulario de registro por correo electrónico. Agregue un atributo for en la label correo electrónico que coincida con el id en su campo de input .

Tests

tests:
  - text: Su código debe tener un atributo <code>for</code> en la <code>label</code> etiqueta que no esté vacía.
    testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
  - text: El valor del atributo <code>for</code> debe coincidir con el valor de <code>id</code> en la <code>input</code> correo electrónico.
    testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'

Challenge Seed

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>


      <label>Email:</label>
      <input type="text" id="email" name="email">


      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

4.2 KiB Raw Blame History