Crear un Formulario en HTML

Tabla de contenidos

0.1 1. Estructura Básica del Formulario
0.2 2. Agrupar Campos con Fieldset y Legend
0.3 3. Etiqueta Label y Input para el Nombre
0.4 4. Campo de Teléfono
0.5 5. Campo de Correo Electrónico
0.6 6. Área de Texto para Mensajes
0.7 7. Botón de Envío
0.8 8. Estructura Completa del Formulario

1 Explicación de las Principales Etiquetas del Formulario
2 Formulario HTML Completo

1. Estructura Básica del Formulario

El primer paso para crear un formulario es utilizar la etiqueta <form>. Esta etiqueta contendrá todos los elementos del formulario. El atributo action define dónde se enviará la información, pero lo dejamos vacío por ahora ya que solo trabajaremos en HTML.

<form action="">
</form>

2. Agrupar Campos con Fieldset y Legend

Usamos <fieldset> para agrupar campos que comparten una misma temática, en este caso, los datos de contacto del usuario. El <legend> describe el contenido del grupo.

<fieldset>
    <legend>Contáctame enviando tus datos</legend>
</fieldset>

3. Etiqueta Label y Input para el Nombre

El siguiente paso es crear el campo para el nombre del usuario. Utilizamos <label> para describir el campo y <input> de tipo texto (type="text") para que el usuario pueda introducir su nombre.

<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre">

4. Campo de Teléfono

Añadimos un campo de teléfono utilizando el tipo tel para que, en dispositivos móviles, aparezca un teclado numérico al completar este campo.

<label for="telefono">Teléfono:</label>
<input type="tel" name="telefono" id="telefono">

5. Campo de Correo Electrónico

Para asegurarnos de que el usuario introduzca un correo electrónico válido, utilizamos el tipo email. Este campo fuerza la validación del formato de correo.

<label for="correo">Correo:</label>
<input type="email" name="correo" id="correo">

6. Área de Texto para Mensajes

Si el usuario debe escribir un mensaje largo, usamos la etiqueta <textarea>, que permite un texto de varias líneas.

<label for="mensaje">Mensaje:</label>
<textarea name="mensaje" id="mensaje" cols="30" rows="10"></textarea>

7. Botón de Envío

Finalmente, añadimos un botón de envío con un input de tipo submit:

<input type="submit" value="Enviar">

8. Estructura Completa del Formulario

Para organizar visualmente los campos, agrupamos cada uno de ellos dentro de un <div> para que luego podamos aplicar estilos con CSS.

<form action="">

    <fieldset>
        <legend>Contáctame enviando tus datos</legend>

        <div>
            <label for="nombre">Nombre:</label>
            <input type="text" name="nombre" id="nombre">
        </div>

        <div>
            <label for="telefono">Teléfono:</label>
            <input type="tel" name="telefono" id="telefono">
        </div>

        <div>
            <label for="correo">Correo:</label>
            <input type="email" name="correo" id="correo">
        </div>

        <div>
            <label for="mensaje">Mensaje:</label>
            <textarea name="mensaje" id="mensaje" cols="30" rows="10"></textarea>
        </div>

        <div>
            <input type="submit" value="Enviar">
        </div>
    </fieldset>

</form>

Explicación de las Principales Etiquetas del Formulario

<form>: Contiene todo el formulario. El atributo action define dónde se enviará la información.
<fieldset>: Agrupa elementos relacionados dentro de un formulario.
<legend>: Proporciona un título descriptivo para un <fieldset>.
<label>: Describe cada campo del formulario y se enlaza con el campo correspondiente mediante el atributo for.
<input>: Se usa para campos de texto, correo, teléfono, y el botón de envío. Diferentes tipos (text, email, tel, submit) proporcionan distintas funcionalidades.
<textarea>: Permite la entrada de texto en varias líneas.

Formulario HTML Completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Contacto</title>
</head>
<body>

    <form action="">

        <fieldset>
            <legend>Contáctame enviando tus datos</legend>

            <div>
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" id="nombre">
            </div>

            <div>
                <label for="telefono">Teléfono:</label>
                <input type="tel" name="telefono" id="telefono">
            </div>

            <div>
                <label for="correo">Correo:</label>
                <input type="email" name="correo" id="correo">
            </div>

            <div>
                <label for="mensaje">Mensaje:</label>
                <textarea name="mensaje" id="mensaje" cols="30" rows="10"></textarea>
            </div>

            <div>
                <input type="submit" value="Enviar">
            </div>

        </fieldset>

    </form>

</body>
</html>