En HTML se pueden crear formularios los cuales permiten que el usuario ingrese datos los cuales serán tratados por parte de nuestra aplicación web.

Ejemplo, la sección de registro en una plataforma se logra a través de un formulario de HTML y dentro de este formulario se utilizan elementos interactivos, es decir, etiquetas de HTML que permiten interactuar con la información del usuario.

Etiquetas HTML para elementos interactivos en formularios

Etiqueta input

En esta categoría se encuentran los cuadros de texto, radio button, checkbox, imagenes, carga de archivos, etc. Se recomienda poner un texto para mostrarse como etiqueta por cada input, esto se logra con la etiqueta <label>

1 2	<label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" />

Etiqueta button

Son botones a los que se les pueden programar acciones, o utilizar los ya existentes para enviar y resetear.

1	<button type="submit">Enviar</button>

Etiqueta textarea

Es una cuadro de texto multilinea

1 2	<label for="comments">Comentarios</label> <textarea id="comments" name="comments" placeholder="Escribe tus comentarios"></textarea>

Etiqueta select

Genera una lista desplegable, (o simplemente una lista) la cual lleva varios elementos declarados con la etiqueta <option> y estos pueden estar agrupados por medio de la etiqueta <optgroup>

1 2 3 4 5 6 7 8 9 10 11 12 13

<label for="">Selecciona una opción</label> <select name="opciones" id="opciones">   <optgroup label="Grupo 1">     <option value="1">Opcion uno</option>     <option value="2">Opcion dos</option>     <option value="3">Opcion tres</option>     <option value="4">Opcion cuatro</option>   </optgroup>   <optgroup label="Grupo 2">     <option value="5">Opcion cinco</option>     <option value="6">Opcion seis</option>   </optgroup> </select>

Etiqueta fieldset

Se utiliza para agrupar elementos relacionados en un formulario. Para dar un nombre a este marco se utiliza la etiqueta <legend>

1 2 3 4 5 6 7 8 9 10 11

<fieldset>   <legend>Edad</legend>   <input type="checkbox" name="edad" id="edad20" value="20-39">   <label for="edad20">20-39</label>      <input type="checkbox" name="edad" id="edad40" value="40-59">   <label for="edad40">40-59</label>      <input type="checkbox" name="edad" id="edad60" value="60-79">   <label for="edad60">60-79</label> </fieldset>

Etiqueta output

Se utiliza para representar el resultado de un calculo, lo cual aún se debe hacer con un script, pero ya de entrada define de donde vienen los datos.

1 2 3 4 5 6 7 8 9 10

<label for="base">Base</label> <input type="number" id="base" value="0" min="0" max="30">   <label for="exponente">Exponente</label> <input type="number" id="exponente" value="0" min="0" max="30">   <label for="">Resultado</label> <output id="potencia" for="base exponente"></output>   <button type="button" onclick="mostrarPotencia()">Calcular</button>

 

¿Te gustó este artículo?

Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.