H91Usar controles de formulario y enlaces de HTML

Enlaces

Los agentes de usuario proporcionan mecanismos para desplazarse hasta los enlaces y seleccionarlos. En cada uno de los ejemplos siguientes, la función es «link» (enlace) porque el elemento a tiene un atributo href. Un elemento a sin href no es un enlace. El valor del enlace es el URI del atributo href.

<a href="https://example.com">Example Site</a>

<a href="https://example.com"><img alt="Example" src="example-logo.gif"></a>

<a href="https://example.com"><img alt="Example " src="example_logo.gif">Text</a>

Botones

Hay varias formas de crear un botón en HTML.

<button type="button">Save</button>

<input type="button" value="Save"> 
<input type="submit" value="Submit">
<input type="reset" value="Reset">

<input alt="save" src="save.gif" type="image">

<input alt="save" src="save.gif" title="save the file" type="image">

Campo de texto

<label for="text-1">Type of fruit</label>
<input id="text-1" type="text" value="bananas">

<input aria-label="Type of fruit" id="text-1" type="text">

Casilla de verificación

Este ejemplo tiene la función checkbox, que proviene del atributo type del elemento input. El elemento label está asociado al elemento input mediante el atributo for, que hace referencia al atributo id del elemento input. El nombre proviene del elemento label, en este caso «cheese» (queso). Su estado puede ser checked o unchecked y proviene del atributo checked. El estado puede cambiar con la interacción del usuario con el control.

<label for="cb-1">Cheese</label> 
<input checked id="cb-1" type="checkbox">

Botones de opción

Este ejemplo tiene la función «radio button» (botón de opción), que proviene del atributo type del elemento input. Su nombre proviene del elemento label. Su estado puede ser checked o unchecked y proviene del atributo checked. El estado puede cambiar con la interacción del usuario con el control.

<input checked id="r1" name="color" type="radio"><label for="r1">Red</label>
<input id="r2" name="color" type="radio"><label for="r2">Blue</label>
<input id="r3" name="color" type="radio"><label for="r3">Green</label>

Fieldset de botones de opción

El fieldset de botones de opción tiene la función «grouping» (agrupación). El nombre proviene del elemento legend.

<fieldset>
  <legend>Choose a Color:</legend>
  <div>
    <input id="red" name="color" type="radio" value="red">
    <label for="red">Red</label>
  </div>
  <div>
    <input id="blue" name="color" type="radio" value="blue">
    <label for="blue">Blue</label>
  </div>
  <div>
    <input id="green" name="color" type="radio" value="green">
    <label for="green">Green</label> 
</fieldset>

Elemento select

<label for="s1">Numbers</label>
<select id="s1">
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
</select>

<select aria-label="Numbers" id="s1">
  <option>One</option>
  <option selected>Two</option>
  <option>Three</option>
</select>

Textarea

<label for="ta-1">Type your speech here</label>
<textarea id="ta-1">Four score and seven years ago</textarea>

<textarea title="Type your speech here">Four score and seven years ago</textarea>