Definición destacada

¿Como funciona el comando en HTML5: 'form'?

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Linux HTML5 Dominios

La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra form

Última modificación: 2024-06-18

Instrucción HTML5 para el Elemento `<form>`

El elemento <form> en HTML5 se utiliza para crear formularios interactivos. Los formularios permiten a los usuarios enviar datos al servidor para procesamiento, como datos de registro o de búsqueda. A continuación, se detallan los atributos principales del elemento <form> en HTML5:

action:
- Descripción: Especifica la URL del servidor que procesará los datos enviados por el formulario.
- Ejemplo: <form action="submit_form.php">.
method:
- Descripción: Determina el método HTTP que se utilizará para enviar los datos. Los valores comunes son GET y POST.
- Ejemplo: <form method="post">.
enctype:
- Descripción: Define cómo deben codificarse los datos del formulario antes de enviarse al servidor. Es obligatorio si se cargan archivos.
- Valores comunes: application/x-www-form-urlencoded, multipart/form-data, text/plain.
- Ejemplo: <form enctype="multipart/form-data">.
autocomplete:
- Descripción: Indica si el navegador debe autocompletar los campos del formulario en función de los valores anteriores introducidos.
- Valores comunes: on, off.
- Ejemplo: <form autocomplete="on">.
novalidate:
- Descripción: Si se agrega, desactiva la validación de formulario predeterminada del navegador.
- Ejemplo: <form novalidate>.
target:
- Descripción: Define dónde se va a mostrar la respuesta que se obtiene después de enviar el formulario.
- Valores comunes: _self (abre en el mismo contexto), _blank (nueva pestaña), _parent, _top, o el nombre de un iframe.
- Ejemplo: <form target="_blank">.
name:
- Descripción: Define un nombre para el formulario. Esto puede ser útil para el acceso desde scripts o CSS.
- Ejemplo: <form name="userForm">.
accept-charset:
- Descripción: Especifica el conjunto de caracteres que el servidor puede manejar para el envío del formulario.
- Ejemplo: <form accept-charset="UTF-8">.

Uso de `<form>` en HTML5: Ejemplos Sencillos

A continuación se presentan algunos ejemplos de formularios en HTML5 para ilustrar su uso básico y los diferentes tipos de entradas que puedes incluir.

Ejemplo 1: Formulario de Contacto Simple

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario de Contacto</title>
</head>
<body>
    <form action="contact_process.php" method="post">
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Correo Electrónico:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Mensaje:</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Enviar</button>
    </form>
</body>
</html>

Ejemplo 2: Formulario de Registro de Usuario con Validación

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Registro de Usuario</title>
</head>
<body>
    <form action="register_user.php" method="post" autocomplete="on">
        <label for="username">Nombre de Usuario:</label>
        <input type="text" id="username" name="username" required minlength="5">

        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password" required minlength="8">

        <label for="email">Correo Electrónico:</label>
        <input type="email" id="email" name="email" required>

        <label for="dob">Fecha de Nacimiento:</label>
        <input type="date" id="dob" name="dob" required>

        <label for="gender">Género:</label>
        <select id="gender" name="gender">
            <option value="male">Masculino</option>
            <option value="female">Femenino</option>
            <option value="other">Otro</option>
        </select>

        <button type="submit">Registrar</button>
    </form>
</body>
</html>

Ejemplo 3: Formulario con Carga de Archivos

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Subida de Archivo</title>
</head>
<body>
    <form action="upload_file.php" method="post" enctype="multipart/form-data">
        <label for="file">Selecciona un archivo:</label>
        <input type="file" id="file" name="file" required>

        <button type="submit">Subir Archivo</button>
    </form>
</body>
</html>

Estos ejemplos cubren los aspectos básicos de cómo implementar formularios en HTML5, desde simples campos de texto hasta la carga de archivos.

Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!