Elementos de formularios HTML

1. Selección múltiple y listas

Los formularios HTML ofrecen muchas posibilidades para la interacción de los usuarios con una página web. Además de los campos de texto y los botones, los formularios admiten elementos de selección múltiple y listas, que permiten crear interfaces más flexibles y cómodas para la entrada de datos. Hoy los conoceremos.

En HTML, los formularios proporcionan varias maneras de crear elementos con la posibilidad de seleccionar de una lista. Los elementos más comunes para estos fines son <select> y <option>, así como los checkboxes y los botones de radio.

Lista desplegable: <select> y <option>

La etiqueta <select> crea una lista desplegable, y <option> se usa para añadir opciones dentro de esta lista. El usuario puede seleccionar una o varias opciones de la lista.

Selección única: Por defecto, <select> permite seleccionar solo una opción.

<label for="country">Selecciona un país:</label>
<select id="country" name="country">
  <option value="ru">Rusia</option>
  <option value="us">Estados Unidos</option>
  <option value="de">Alemania</option>
</select>

<label for="country">Selecciona un país:</label>
<select id="country" name="country">
<option value="ru">Rusia</option>
<option value="us">Estados Unidos</option>
<option value="de">Alemania</option>
</select>

Selección múltiple: Si añades el atributo multiple, el usuario podrá seleccionar varias opciones al mismo tiempo, manteniendo la tecla Ctrl (en Windows) o Cmd (en Mac) mientras hace clic.

<label for="languages">Selecciona idiomas:</label>
<select id="languages" name="languages" multiple>
  <option value="ru">Ruso</option>
  <option value="en">Inglés</option>
  <option value="de">Alemán</option>
</select>

<label for="languages">Selecciona idiomas:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Ruso</option>
<option value="en">Inglés</option>
<option value="de">Alemán</option>
</select>

En este caso, los datos de varias opciones seleccionadas se envían al servidor como un array de valores.

Checkboxes: <input type="checkbox">

Los checkboxes son elementos que permiten al usuario seleccionar una o varias opciones de una lista ofrecida. Cada checkbox se crea con la etiqueta <input type="checkbox">.

<label><input type="checkbox" name="interests" value="sports"> Deportes</label>
<label><input type="checkbox" name="interests" value="music"> Música</label>
<label><input type="checkbox" name="interests" value="travel"> Viajes</label>

<label><input type="checkbox" name="interests" value="sports"> Deportes</label>
<label><input type="checkbox" name="interests" value="music"> Música</label>
<label><input type="checkbox" name="interests" value="travel"> Viajes</label>

Si todos los checkboxes tienen el mismo atributo name, al enviar el formulario, los datos de cada checkbox marcado se enviarán como un array.

Botones de radio: <input type="radio">

Los botones de radio permiten al usuario seleccionar solo una opción de un grupo. Los botones de radio con el mismo valor en el atributo name se agrupan, y el usuario puede seleccionar solo una opción en este grupo.

<p>Selecciona género:</p>
<label><input type="radio" name="gender" value="male"> Masculino</label>
<label><input type="radio" name="gender" value="female"> Femenino</label>

<p>Selecciona género:</p>
<label><input type="radio" name="gender" value="male"> Masculino</label>
<label><input type="radio" name="gender" value="female"> Femenino</label>

Los botones de radio son útiles para seleccionar una de varias opciones fijas, como "Sí" o "No", género, grupo de edad, etc.

1

Опрос

Fundamentos de HTML,  29 уровень,  4 лекция

недоступен

Fundamentos de HTML

Fundamentos de HTML

Открыть