Los controles interactivos son elementos HTML que se insertan dentro de los formularios, y tienen como función permitir al usuario la introducción de datos que serán enviados y procesados. Estos elementos también se denominan campos de formulario o controles de formulario.
Los controles interactivos deben ir dentro de las etiquetas del formulario, es decir, entre <form> y </form>. En el elemento del formulario se especificará, mediante los atributos específicos action y method la ubicación del programa que procesará los datos y el método que se usará para enviarlos. Como es obvio, de poco serviría recolectar datos sin enviarlos ni procesarlos.
Existe muchos tipos de controles interactivos: para introducir datos de texto y en diferente formato, como sería el caso de un correo electrónico y la contraseña; existen botones para enviar y reiniciar los datos del formulario; también hay casillas de verificación, grupos de opciones, menús desplegables…
HTML proporciona alguna elementos para crear controles interactivos: el elemento <button>, utilizado para crear botones; el elemento <input>, que permite crear campos variados para recoger datos del usuario; el elemento <textarea>, para editar texto en múltiples líneas; y el elemento <select>, que con ayuda de <option> crean menús desplegables. Por si fuera poco, HTML también proporciona elementos para organizar y etiquetar los controles.
El elemento <button>
El elemento <button> es utilizado para crear botones que el usuario puede clicar. Un botón puede ser utilizado tanto en formularios como en cualquier parte de una página web que necesite un botón de fácil implementación. Se trata de un elemento de múltiples propósitos que puede crear botones estándar, para enviar datos y para limpiar los datos de un formulario.
Aprende a crear botones con el elemento <button>.
El elemento <input>
El elemento <input> tiene un gran potencial en la creación de controles interactivos de entrada de datos. Gracias al atributo type se pueden definir campos de entrada de texto y números con formato, botones para enviar o borrar datos, selectores de fecha, selectores de colores, casillas de verificación (checkbox), grupos de opciones (radio), e incluso selectores de archivos para subirlos al servidor.
Aprende a crear controles con el elemento <input>.
El elemento <textarea>
El elemento <textarea> crea un control que permite la entrada de múltiples líneas de texto plano. Este tipo de campo es muy útil para recolectar o editar varias líneas de texto en webs interactivas, como podría ser la sección de comentarios de un blog, la publicación de artículos, o la participación en foros y redes sociales.
Aprende a crear controles con el elemento <textarea>.
Los elementos <select> y <option>
El elemento <select> genera un menú en el que aparecen varias opciones. Las opciones se crean mediante el elemento <option>, y se pueden agrupar con el elemento <optgroup>. Este control interactivo es muy útil cuando tenemos muchas opciones a elegir y no queremos que el campo ocupe demasiado espacio. Además, se puede definir una opción por defecto.
Aprende a crear controles con el elemento <select>.
Los elementos <datalist> y <option>
El elemento <datalist> crea una lista de opciones predefinidas que se muestran como sugerencia en los controles del elemento <input>. La lista de sugerencias también se crea con el elemento <option>. Este control facilita el autocompletado mostrando una lista de sugerencias filtrada según el texto entrado.
Aprende a crear controles con el elemento <datalist>.
El elemento <output>
El elemento <output> permite representar la salida de un cálculo realizado por un programa, normalmente en lenguaje JavaScript. Es habitual que este cálculo use los valores introducidos en los controles de un formulario <form>.
Aprende a mostrar resultados de cálculo con el elemento <output>.
Elementos de organización
Los controles interactivos se pueden organizar o agrupar según sea conveniente. Por ejemplo, es útil agrupar conjuntos de datos en formularios muy extensos, así se facilita la comprensión del formulario a ojos del usuario. Se utiliza los elementos <fieldset> y <legend> para crear los grupos y añadir un título, respectivamente; y se usa el elemento <label> para etiquetar los campos individuales.
Aprende a organizar controles.
