Atributos de formularios en HTML

action

El atributo action especifica la URL o script del lado del servidor que manejará el envío del formulario. Cuando envías el formulario, los datos se envían a la URL o script especificado para su procesamiento. El valor del atributo action puede ser una URL absoluta o relativa.

<form action="/submit-form.php">
  <!-- elementos del formulario -->
</form>

Cuando envíes el formulario, los datos se enviarán al script "/submit-form.php" en el servidor para su procesamiento.

method

El atributo method define el método HTTP utilizado para el envío del formulario. Los dos valores más comunes son GET y POST.

<form action="/submit-form.php" method="POST">
  <!-- elementos del formulario -->
</form>

Los datos del formulario se enviarán utilizando el método POST cuando envíes el formulario.

target

El atributo target especifica dónde mostrar la respuesta después del envío del formulario. Determina la ventana o marco de destino donde se cargará la respuesta del servidor. Los valores posibles son:

<form action="/submit-form.php" target="_blank">
  <!-- elementos del formulario -->
</form>

Cuando envíes el formulario, la respuesta del servidor se abrirá en una nueva ventana o pestaña.

enctype

El atributo enctype especifica el tipo de codificación para los datos del formulario cuando se utiliza el método POST. Se usa para indicar cómo se deben codificar los datos del formulario antes de enviarlos al servidor. Los valores comunes son:

<form action="/submit-form.php" method="POST" enctype="multipart/form-data">
  <!-- elementos del formulario -->
</form>

Los datos del formulario se codificarán utilizando el tipo de codificación "multipart/form-data", permitiendo que las cargas de archivos se incluyan en el envío del formulario.

required

El atributo required indica que un campo de formulario debe completarse antes de que el formulario pueda enviarse. Cuando se añade el atributo required a un campo de entrada, el navegador comprobará si el campo tiene un valor antes de permitir el envío del formulario. Si el campo está vacío, el navegador mostrará un mensaje de error e impedirá que el formulario se envíe.

<form>
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name" required>
  <input type="submit" value="Enviar">
</form>

El campo "Nombre" está marcado como obligatorio. Si intentas enviar el formulario sin introducir un valor en el campo "Nombre", el navegador mostrará un mensaje de error e impedirá el envío del formulario.

min y max

Los atributos min y max establecen los valores mínimo y máximo para los campos de entrada numéricos, como los tipos number, range y date. Estos atributos te ayudan a establecer límites en los valores permitidos para esos campos.

<form>
  <label for="quantity">Cantidad:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
  <input type="submit" value="Enviar">
</form>

El campo "Cantidad" tiene un valor mínimo de 1 y un valor máximo de 10. Si intentas introducir un valor fuera de este rango, el navegador mostrará un mensaje de error cuando envíes el formulario.

minlength y maxlength

Los atributos minlength y maxlength establecen el número mínimo y máximo de caracteres permitidos en un campo de entrada de texto. Estos atributos te ayudan a controlar la longitud de la entrada del usuario.

<form>
  <label for="username">Nombre de usuario:</label>
  <input type="text" id="username" name="username" minlength="4" maxlength="10">
  <input type="submit" value="Enviar">
</form>

El campo "Nombre de usuario" debe tener un mínimo de 4 caracteres y un máximo de 10 caracteres. Si el valor introducido no cumple estos requisitos, el navegador mostrará un mensaje de error cuando envíes el formulario.

pattern

El atributo pattern establece un patrón de expresión regular que debe coincidir con el valor de entrada. Te permite establecer un formato o patrón que debe seguir la entrada del usuario. Si el valor introducido no coincide con el patrón, el navegador mostrará un mensaje de error.

<form>
  <label for="phone">Número de teléfono:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  <input type="submit" value="Enviar">
</form>

El campo "Número de teléfono" tiene un patrón que requiere que la entrada esté en el formato de tres dígitos, seguidos de un guion, tres dígitos más, otro guion y cuatro dígitos (por ejemplo, 123-456-7890). Si el número de teléfono introducido no coincide con este patrón, el navegador mostrará un mensaje de error cuando envíes el formulario.

autocomplete

El atributo autocomplete indica si un campo de formulario debe tener el autocompletado activado o desactivado. El autocompletado sugiere posibles valores basados en valores ingresados previamente para el mismo campo. Por defecto, el autocompletado está activado para la mayoría de los campos de formulario. Sin embargo, puedes controlar este comportamiento usando el atributo autocomplete.

Los posibles valores para el atributo autocomplete son:

<form>
  <label for="username">Nombre de usuario:</label>
  <input type="text" id="username" name="username" autocomplete="off">
  <input type="submit" value="Enviar">
</form>

El campo "Nombre de usuario" tiene el autocompletado desactivado. El navegador no sugerirá valores ingresados previamente para este campo.

readonly

El atributo readonly especifica que un campo de formulario es de solo lectura y no puede ser modificado por el usuario. Cuando agregas el atributo readonly a un campo de entrada, el usuario aún puede ver el valor del campo pero no puede cambiarlo. El valor del campo se enviará cuando se envíe el formulario.

<form>
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" value="usuario@ejemplo.com" readonly>
  <input type="submit" value="Enviar">
</form>

El campo "Correo electrónico" está marcado como de solo lectura. El usuario no puede cambiar el valor del campo, pero se incluirá en el envío del formulario.

disabled

El atributo disabled indica que un campo de formulario está desactivado y no puede ser utilizado por el usuario. Cuando agregas el atributo disabled a un campo de entrada, el campo se vuelve gris y no se puede hacer clic en él. El valor del campo no se enviará cuando se envíe el formulario.

<form>
  <label for="country">País:</label>
  <select id="country" name="country" disabled>
    <option value="US">Estados Unidos</option>
    <option value="CA">Canadá</option>
    <option value="UK">Reino Unido</option>
  </select>
  <input type="submit" value="Enviar">
</form>

El menú desplegable "País" está desactivado. El usuario no puede seleccionar un valor y el valor del campo no se incluirá en el envío del formulario.

El uso de los atributos readonly y disabled puede ayudar a mejorar la accesibilidad al proporcionar indicaciones visuales a los usuarios sobre la interactividad de los campos del formulario. Es importante usar estos atributos correctamente según los requisitos específicos de tu formulario.

accept-charset

El atributo accept-charset especifica las codificaciones de caracteres que el servidor acepta para el envío de formularios. Le indica al navegador qué codificaciones de caracteres puede manejar el servidor. Por defecto, los datos del formulario se envían utilizando la codificación de caracteres de la página que contiene el formulario.

<form action="/submit-form.php" accept-charset="UTF-8">
  <!-- elementos del formulario -->
</form>

Los datos del formulario se enviarán utilizando la codificación de caracteres UTF-8, según lo especificado por el atributo accept-charset. Si el servidor no admite la codificación de caracteres especificada, es posible que no pueda procesar los datos del formulario correctamente.

Es importante tener en cuenta que el atributo accept-charset se usa rara vez en la actualidad porque la mayoría de los servidores están configurados para manejar la codificación de caracteres de la página por defecto. Sin embargo, si necesita especificar una codificación de caracteres diferente para el envío del formulario, puede usar este atributo.

novalidate

El atributo novalidate indica que el formulario no debe validarse cuando se envía. Por defecto, los formularios HTML5 realizan una validación del lado del cliente antes de enviar los datos del formulario al servidor. El atributo novalidate omite este paso de validación.

<form action="/submit-form.php" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Enviar">
</form>

Cuando envíe el formulario, el navegador no realizará la validación del lado del cliente en los campos del formulario. Los datos del formulario se enviarán al servidor sin verificar si la entrada es válida.

El atributo novalidate es útil en situaciones donde desea manejar la validación del formulario solo del lado del servidor, o cuando tiene su propia lógica de validación personalizada implementada usando JavaScript.

Tenga en cuenta que usar el atributo novalidate no significa que deba omitir por completo la validación del formulario. Sigue siendo importante realizar la validación del lado del servidor para asegurarse de que los datos enviados sean válidos y seguros de procesar. La validación del lado del cliente es una capa adicional de validación que ayuda a detectar errores de entrada temprano y ahorrar recursos del servidor.

Al usar los atributos accept-charset y novalidate de manera apropiada, puede controlar la codificación de caracteres y el comportamiento de validación de sus formularios HTML para adaptarse a las necesidades de su aplicación.