53 - 🧷 Atributos del Formulario en HTML: Guía y Ejemplos

---

Elementos Semánticos en HTML

• Atributo de Acción
• Atributo target
• Atributo method
• Atributo autocomplete
• Atributo novalidate

---

Descripción de los Atributos de un Formulario en HTML

Los formularios en HTML utilizan varios atributos importantes que controlan el comportamiento y la presentación de los datos. A continuación, se describen algunos de los más utilizados:

• action: Define la URL a la que se enviarán los datos del formulario cuando se haga clic en el botón de envío.
• method: Especifica el método HTTP que se usará para enviar los datos del formulario. Los valores comunes son GET y POST.
• target: Determina dónde se abrirá el resultado del formulario enviado. Puede ser en la misma pestaña (_self), en una nueva pestaña (_blank), entre otros.
• autocomplete: Indica si el navegador debe autocompletar los campos del formulario según los datos previamente guardados. Los valores pueden ser on o off.
• novalidate: Desactiva la validación automática del formulario cuando se especifica. Esto significa que los campos no se validarán antes de ser enviados.

---

Atributo de Acción

El atributo action en un formulario HTML define la URL o ruta a la que se enviarán los datos cuando el formulario sea enviado. Este atributo es fundamental para especificar dónde deben ser procesados los datos ingresados por el usuario.

Por ejemplo, si tienes un formulario de contacto, el atributo action podría apuntar a un script PHP o una página que maneje el envío de correos electrónicos con la información del formulario. Si el atributo action está vacío, el formulario se enviará a la misma página donde está ubicado.

Ejemplo

  
  <form action="https://www.ejemplo.com/procesar_formulario" method="POST">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Enviar</button>
  </form>
  
          

---

Atributo target

El atributo target se usa en enlaces y formularios para especificar dónde se abrirá el recurso o el resultado de la acción del formulario. A continuación se explican los valores más comunes de este atributo:

• _self: Abre el recurso en la misma pestaña o ventana (es el valor predeterminado).
• _blank: Abre el recurso en una nueva pestaña o ventana del navegador.
• _parent: Abre el recurso en el marco padre (si el documento está dentro de un marco).
• _top: Abre el recurso en el marco superior, eliminando cualquier marco anidado.

Ejemplo

  
  <!-- Enlace que abre en la misma pestaña (target="_self") -->
  <a href="https://www.ejemplo.com" target="_self">Ir a Ejemplo.com (mismo sitio)</a>
  
  <!-- Enlace que abre en una nueva pestaña (target="_blank") -->
  <a href="https://www.ejemplo.com" target="_blank">Ir a Ejemplo.com (nueva pestaña)</a>
  
  <!-- Enlace que abre en el marco padre (target="_parent") -->
  <a href="https://www.ejemplo.com" target="_parent">Ir a Ejemplo.com (marco padre)</a>
  
  <!-- Enlace que abre en el marco superior (target="_top") -->
  <a href="https://www.ejemplo.com" target="_top">Ir a Ejemplo.com (marco superior)</a>
  
  <!-- Formulario que se abre en una nueva pestaña (target="_blank") -->
  <form action="https://www.ejemplo.com/procesar_formulario" method="POST" target="_blank">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
  
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  
    <button type="submit">Enviar</button>
  </form>
  
          

---

Atributo method

El atributo method en un formulario HTML especifica el método HTTP que se usará para enviar los datos del formulario al servidor. Los dos métodos más comunes son:

• GET: Envía los datos como parámetros en la URL. Es adecuado para solicitudes donde no es necesario proteger la información del formulario, como en formularios de búsqueda.
• POST: Envía los datos dentro del cuerpo de la solicitud HTTP. Se usa para enviar información más sensible, como contraseñas o datos personales.

El valor predeterminado de method es GET. Si no se especifica este atributo en un formulario, los datos se enviarán usando este método.

Notas sobre los Métodos de Envío en Formularios HTML

Los métodos GET y POST tienen características diferentes que los hacen adecuados para distintos tipos de formularios. A continuación, se presentan algunas notas que destacan sus diferencias y similitudes:

Notas sobre GET:

• Agrega los datos del formulario a la URL, en pares de nombre/valor.
• NUNCA utilice GET para enviar datos sensibles (los datos de formulario enviados son visibles en la URL).
• La longitud de una URL es limitada (aproximadamente 2048 caracteres).
• Útil para envíos de formularios donde un usuario quiere marcar el resultado.
• GET es bueno para datos no seguros, como cadenas de consulta en Google.

Notas sobre POST:

• Agrega los datos del formulario dentro del cuerpo de la solicitud HTTP (los datos de formulario no se muestran en la URL).
• POST no tiene limitaciones de tamaño y se puede utilizar para enviar grandes cantidades de datos.
• Los formularios enviados con POST no se pueden marcar.

Sugerencia: Utilice siempre POST si los datos del formulario contienen información sensible o personal.

Ejemplo

  
  <!-- Formulario con el método GET (los datos se envían en la URL) -->
  <form action="https://www.ejemplo.com/busqueda" method="GET">
    <label for="busqueda">Buscar:</label>
    <input type="text" id="busqueda" name="busqueda">
  
    <button type="submit">Buscar</button>
  </form>
  
  <!-- Formulario con el método POST (los datos se envían en el cuerpo de la solicitud) -->
  <form action="https://www.ejemplo.com/login" method="POST">
    <label for="usuario">Usuario:</label>
    <input type="text" id="usuario" name="usuario" required>
  
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" required>
  
    <button type="submit">Iniciar sesión</button>
  </form>
  
          

---

Atributo autocomplete

El atributo autocomplete indica al navegador si debe autocompletar los campos de un formulario basándose en datos previamente ingresados por el usuario. Este atributo puede ser útil para mejorar la experiencia del usuario al facilitar el llenado de formularios. Los valores más comunes son:

• on: El autocompletado está habilitado. El navegador puede autocompletar los campos según los datos guardados.
• off: El autocompletado está deshabilitado. El navegador no ofrecerá sugerencias basadas en datos guardados.

También se pueden utilizar valores específicos para cada campo, como name, email, username, etc., para indicar al navegador el tipo de información que debe autocompletar.

Ejemplo

Formulario con Autocompletado Habilitado

<form action="https://www.ejemplo.com/enviar" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" autocomplete="on">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="on">

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

                

Formulario con Autocompletado Deshabilitado

<form action="https://www.ejemplo.com/enviar" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" autocomplete="off">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off">

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

                

---

Atributo novalidate

El atributo novalidate se utiliza en el elemento <form> para desactivar la validación automática de los campos del formulario por parte del navegador. Al incluir este atributo, el formulario se enviará sin realizar la validación de los datos ingresados. Esto puede ser útil en situaciones donde se requiere un control de validación personalizado a través de JavaScript o cuando se desea evitar la validación predeterminada.

Ejemplo

Formulario con Atributo novalidate

  
  <form action="https://www.ejemplo.com/enviar" method="POST" novalidate>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
  
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  
    <button type="submit">Enviar</button>
  </form>
  
          

---

Ejemplo

Lista de todos los atributos del formulario

Atributo	Descripción
accept-charset	Especifica las codificaciones de caracteres utilizadas para la sumisión del formulario.
action	Especifica dónde enviar los datos del formulario cuando se presenta un formulario.
autocomplete	Especifica si un formulario debe tener autocompletar activado o apagado.
enctype	Especifica cómo los datos del formulario deben ser codificados al someterse al servidor (solo para method="post").
method	Especifica el método HTTP a utilizar cuando se envían datos del formulario.
name	Especifica el nombre del formulario.
novalidate	Especifica que el formulario no debe ser validado cuando se presente.
rel	Especifica la relación entre un recurso vinculado y el formulario actual.
target	Especifica dónde mostrar la respuesta que se recibe después de presentar el formulario.

---

Ir al índice

---