Etiqueta HTML <form>
La etiqueta <form> se utiliza para añadir formularios HTML a la página web para la entrada de datos por parte del usuario. Los formularios se usan para enviar al servidor los datos enviados por el usuario. Los datos se envían al pulsar el botón "Submit". Si no existe ese botón, la información se envía al pulsar la tecla "Enter".
TIP
Si los elementos individuales dentro de la etiqueta <form> son válidos, puedes usar la pseudoclase CSS :valid para dar estilo a la etiqueta, y la pseudoclase :invalid, en el caso de que no sean válidos.
Sintaxis
La etiqueta <form> viene en pares. El contenido se escribe entre las etiquetas de apertura (<form>) y cierre (</form>).
El elemento <form> contiene otras etiquetas HTML, que definen el método de entrada de los datos:
- La etiqueta
<input>define un campo de entrada del usuario. - La etiqueta
<textarea>define un campo de formulario para crear un área de entrada multilínea. - La etiqueta
<button>se usa para colocar un botón dentro de un formulario. - La etiqueta
<select>configura un control para crear un cuadro de lista desplegable. - La etiqueta
<option>define los elementos de la lista desplegable establecida por la etiqueta<select>. - La etiqueta
<optgroup>agrupa datos relacionados en la lista desplegable establecida por la etiqueta<select>. - La etiqueta
<fieldset>agrupa visualmente los elementos dentro del formulario establecido por la etiqueta<form>. - La etiqueta
<label>establece la etiqueta de texto para el elemento<input>. - La etiqueta
<legend>define el encabezado del elemento<fieldset>.
Ejemplo de la etiqueta HTML <form>:
Ejemplo de la etiqueta HTML <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <form> con las etiquetas <input> y <label>:
Ejemplo de la etiqueta HTML <form> con las etiquetas <input> y <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Ejemplo de la etiqueta HTML <form> con la etiqueta <textarea>:
Ejemplo de la etiqueta HTML <form> con la etiqueta <textarea>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<textarea rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Atributos
| Attribute | Value | Description |
|---|---|---|
| accept | file_type | Especifica una lista separada por comas de tipos de archivo que el servidor acepta. Compatible en HTML5 para <input type="file">. |
| accept-charset | character_set | Especifica la codificación en la que el servidor puede recibir y procesar datos. |
| action | URL | Indica la dirección a la que se envían los datos y donde se procesarán. Al usar este atributo, cambia el "script name" por el nombre y la ubicación del archivo de script. |
| autocomplete | on off | Habilita o deshabilita el autocompletado de los campos del formulario. El valor predeterminado es on. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Determina cómo se codifican los datos del formulario al enviarse. (El valor predeterminado es application/x-www-form-urlencoded). (Se usa solo con el método POST). |
| method | get post | Especifica el método HTTP para enviar datos del formulario. (el método predeterminado es GET). Envía los datos del formulario en la barra de direcciones ("name = value"), que se añaden a la URL de la página después del signo de interrogación y se separan por un ampersand (&). (http://example.ru/doc/?name=Ivan&password=vanya) - El navegador se conecta al servidor y envía los datos para su procesamiento. |
| name | text | Define el nombre del formulario. |
| novalidate | novalidate | Establece que los datos introducidos en el formulario no se comprobarán antes de enviarse. |
| target | _blank, _self, _parent, _top, framename | Determina dónde mostrar la respuesta recibida después de enviar el formulario. |
La etiqueta <form> también admite los atributos globales y los atributos de evento.
Practice
Which of the following methods are used to send form data in HTML?