Claves para saber cómo hacer un formulario en HTML. En este artículo os damos algunas claves para crear un formulario desde 0.
Los formularios son un elemento común en cualquier sitio web, independientemente de su tipo o finalidad. Hay normalmente en todos los sitios webs un formulario usual: el formulario de contacto. Las tiendas online también incluyen un formulario de pedido y pago que resulta muy útil y práctico.
HTML 5 ha mejorado mucho las posibilidades de los formularios. Una vez más, el problema es que hay funciones que no todos los navegadores soportan, solo los más modernos.
Estos se pueden crear desde cero con HTML y editar la apariencia usando CSS. También puede hacer uso de herramientas que generalmente contienen componentes para crear todo tipo de elementos para su sitio web. Del mismo modo se puede hacer uso de plataformas y aplicaciones para crearlos.
Como especialistas en diseño web, en este caso nos vamos a centrar en el primer punto, creando un formulario desde cero usando HTML. A continuación daremos un listado de puntos que debes de saber antes de empezar a construir un formulario en HTML.
Claves para maquetar un formulario en HTML correctamente
Cada formulario HTML comienza con una etiqueta de formulario, dentro de la cual se colocan todos los controles del formulario. Un formulario es por tanto un elemento de formulario, desde el punto de vista HTML, y dentro de él habrá varios elementos que representarán cada uno de los controles encargados de recoger y presentar los datos del usuario.
Hay dos atributos que se encargan de indicar dónde y cómo enviar los datos recogidos del formulario. Esto se hace a través de los atributos de action y method.
La etiqueta del formulario es la encargada de indicar el destino de los datos. En este caso se trata de la página PHP: servicio.php, que debe estar alojada en el mismo directorio que la página del formulario.
Otros atributos iniciales de los formularios pueden ser accept-charset (codificación de caracteres que se usará para pasar el contenido del formulario), autocompletar (el navegador completará automáticamente los datos del formulario), target (es el mismo atributo que en la etiqueta “a” si se usa con valor _blank, entonces la respuesta al formulario se da en otra ventana) etc.
A continuación mostraremos un listado de atributos y elementos que debemos de conocer y son de gran importancia para la elaboración de un formulario bien estructurado:
Atributos de entrada
- Form: este refleja el identificador del formulario al que pertenece el control. Se utiliza cuando el elemento está fuera de la etiqueta del formulario.
- Name: Atributo fundamental que da nombre al control. Este nombre es el que se le pasa al servicio que recibe los datos del formulario.
- Size: Tamaño que tendrá la caja (especialmente útil en cajas de texto y numéricas).
- Value: Le permite dar un valor al elemento. Antes de que el usuario complete sus datos, aparecerá el valor indicado con este atributo.
Cajas de texto
Los cuadros de texto utilizan el atributo de tipo con texto de valor. Permiten recopilar información escrita por el usuario. También podemos usar los atributos comunes a los elementos de entrada.
Botones
Los botones son controles de formulario que no se pueden escribir, sino que simplemente reciben un clic del mouse o un toque con el dedo en un dispositivo táctil. Ese clic puede tener una variedad de efectos. El más usual de ellos es enviar los datos del formulario.
Casillas de verificación
Este tipo utiliza la casilla de verificación de valor en lugar de la radio. El atributo marcado de los botones de radio se puede usar en las casillas de verificación con el mismo propósito: hacer que inicialmente la casilla de verificación aparezca marcada.
Otros controles necesarios para hacer un formulario en HTML
- Input type = “correo electrónico”. Le permite introducir direcciones de correo electrónico
- Input type = “url”. Se utiliza para indicar direcciones URL.
- Input type = “search”. Presenta un cuadro de texto diseñado para búsquedas.
- Input type = “tel”. Le permite introducir números de teléfono.
- Input type = “color”. Presenta un control de selección de color. El color se toma en formato #xxxxxx donde cada x es un dígito hexadecimal. Es decir, el color se toma en el formato de color HTML habitual.
En definitiva hacer un formulario HTML desde cero no es una tarea sencilla, pero sabiendo y utilizando los elementos de forma adecuada o, haciendo uso de las múltiples herramientas existentes puedes conseguir un elemento fundamental para tu web con el que alcanzar unos beneficios enormes. Te animamos a tomar nota y hacer uso de sus grandes beneficios.
