Formulario de entrada HTML * Atributos
Este capítulo describe los diferentes form*
atributos para el elemento HTML <input>
.
El atributo de formulario
El form
atributo de entrada especifica el formulario al <input>
que pertenece el elemento.
El valor de este atributo debe ser igual al atributo id del elemento <form> al que pertenece.
Ejemplo
Un campo de entrada ubicado fuera del formulario HTML (pero que sigue siendo parte del formulario):
<form action="/action_page.php" id="form1">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last
name:</label>
<input type="text" id="lname"
name="lname" form="form1">
El atributo de formación
El formaction
atributo de entrada especifica la URL del archivo que procesará la entrada cuando se envíe el formulario.
Nota: Este atributo anula el
action
atributo del <form>
elemento.
El formaction
atributo funciona con los siguientes tipos de entrada: envío e imagen.
Ejemplo
Un formulario HTML con dos botones de envío, con diferentes acciones:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
El atributo formenctype
El formenctype
atributo de entrada especifica cómo se deben codificar los datos del formulario cuando se envían (solo para formularios con method="post").
Nota: Este atributo anula el atributo enctype del <form>
elemento.
El formenctype
atributo funciona con los siguientes tipos de entrada: envío e imagen.
Ejemplo
Un formulario con dos botones de envío. El primero envía los datos del formulario con la codificación predeterminada, el segundo envía los datos del formulario codificados como "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
El atributo formmethod
El formmethod
atributo de entrada define el método HTTP para enviar datos de formulario a la URL de acción.
Nota: Este atributo anula el atributo de método del <form>
elemento.
El formmethod
atributo funciona con los siguientes tipos de entrada: envío e imagen.
Los datos del formulario se pueden enviar como variables de URL (method="get") o como una transacción de publicación HTTP (method="post").
Notas sobre el método "obtener":
- Este método agrega los datos del formulario a la URL en pares de nombre/valor
- Este método es útil para envíos de formularios en los que un usuario desea marcar el resultado
- Hay un límite en la cantidad de datos que puede colocar en una URL (varía entre navegadores), por lo tanto, no puede estar seguro de que todos los datos del formulario se transfieran correctamente.
- ¡Nunca use el método "obtener" para pasar información confidencial! (la contraseña u otra información confidencial estarán visibles en la barra de direcciones del navegador)
Notas sobre el método "post":
- Este método envía los datos del formulario como una transacción posterior HTTP
- Los envíos de formularios con el método "publicar" no se pueden marcar
- El método "post" es más robusto y seguro que "get", y "post" no tiene limitaciones de tamaño
Ejemplo
Un formulario con dos botones de envío. El primero envía los datos del formulario con method="get". El segundo envía los datos del formulario con method="post":
<form action="/action_page.php" method="get">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit using
GET">
<input type="submit" formmethod="post" value="Submit using
POST">
</form>
El atributo formtarget
El formtarget
atributo de entrada especifica un nombre o una palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario.
Nota: Este atributo anula el atributo de destino del <form>
elemento.
El formtarget
atributo funciona con los siguientes tipos de entrada: envío e imagen.
Ejemplo
Un formulario con dos botones de envío, con diferentes ventanas de destino:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
El atributo formnovalidate
El formnovalidate
atributo de entrada especifica que un elemento <input> no debe validarse cuando se envía.
Nota: Este atributo anula el atributo novalidate del <form>
elemento.
El formnovalidate
atributo funciona con los siguientes tipos de entrada: enviar.
Ejemplo
Un formulario con dos botones de envío (con y sin validación):
<form action="/action_page.php">
<label for="email">Enter your
email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formnovalidate="formnovalidate"
value="Submit without validation">
</form>
El atributo novalidate
El novalidate
atributo es un <form>
atributo.
Cuando está presente, novalidate especifica que todos los datos del formulario no deben validarse cuando se envían.
Ejemplo
Especifique que no se deben validar datos de formulario al enviar:
<form action="/action_page.php" novalidate>
<label
for="email">Enter your email:</label>
<input type="email"
id="email" name="email"><br><br>
<input type="submit"
value="Submit">
</form>
Formulario HTML y elementos de entrada
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .