La <form> Element
formularios HTML se utilizan para recolectar información del usuario.
La <form> elemento define un formulario HTML:
<form>
.
Formularios HTML contienen elementos de formulario. Los elementos de formulario son diferentes tipos de elementos de entrada, casillas de verificación, botones de opción, botones de envío, y mucho más.
La <input> Element
La <input> elemento es el elemento de forma más importante.
La <input> elemento tiene muchas variaciones, dependiendo del type de atributo.
Estos son los tipos utilizados en este capítulo:
Tipo Descripción text Define la entrada de texto normal radio Define la entrada botón de radio (for selecting one of many choices) submit Define un botón de envío (for submitting the form)
Usted va a aprender mucho más acerca de los tipos de entrada más adelante en este tutorial.
Entrada de texto
<input type="text"> define un campo de entrada de una línea para la introducción de texto:
Ejemplo
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Inténtalo tú mismo " Esta es la forma en que se verá como en un navegador:
Nombre de pila:
Apellido:
Note: La forma en sí misma no es visible. También tenga en cuenta que el ancho predeterminado de un campo de texto es de 20 caracteres.
Radio de entrada Botón
<input type="radio"> define un radio botón.
Radio botones permiten al usuario seleccionar uno de un número limitado de opciones:
Ejemplo
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Masculino
Hembra
Otro
El botón Enviar
<input type="submit"> define un botón para la presentación de una forma a una forma-handler.
La forma-manejador es típicamente una página del servidor con una secuencia de comandos para el procesamiento de datos de entrada.
La forma-manejador se especifica en forma de la action de atributos:
Ejemplo
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Nombre de pila:
Apellido:
La Action Atributo
La action atributo define la acción que debe realizarse cuando se envía el formulario.
La forma habitual de presentar un formulario a un servidor, es mediante el uso de un botón de envío.
Normalmente, el formulario se envía a una página web en un servidor web.
En el ejemplo anterior, un script del lado del servidor se especifica para manejar el formulario enviado:
<form action="action_page.php ">
Si la action se omite el atributo, la acción se establece en la página actual.
El Method Atributo
El method atributo especifica el método HTTP ( GET o POST ) para ser utilizado cuando la presentación de las formas:
<form action="action_page.php" method="get" > o:
<form action="action_page.php" method="post" >
Cuándo utilizar GET ?
Puede usar GET (the default method) :
Si el envío del formulario es pasiva (like a search engine query) , y sin información sensible.
Cuando se utiliza GET , los datos del formulario serán visibles en la dirección de la página:
action_page.php?firstname=Mickey&lastname=Mouse GET es el más adecuado para cortos períodos de datos. Las limitaciones de tamaño se fijan en su navegador.
Cuándo utilizar POST ?
Debe utilizar POST :
Si el formulario de actualización de datos es, o incluye información sensible (password) .
POST ofrece una mayor seguridad ya que los datos presentados no está visible en la dirección de la página.
El Name Atributo
Para ser presentado correctamente, cada campo de entrada debe tener un name atributo.
Este ejemplo solamente presentará el "Last name" campo de entrada:
Ejemplo
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo "
La agrupación de formulario de datos con <fieldset>
Los <fieldset> grupos de elementos de datos relacionados en una forma.
La <legend> elemento define un título para el <fieldset> elemento.
Ejemplo
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
HTML Form Atributos
Un HTML <form> elemento, con el conjunto de todos los atributos posibles, se verá así:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Ponte a prueba con los ejercicios! Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»
Aquí está la lista de <form> atributos:
Atributo Descripción accept-charset Especifica el conjunto de caracteres utilizado en el formulario enviado (por defecto: la página de juego de caracteres). action Especifica una dirección (url) donde enviar el formulario (por defecto: la página de remitentes). autocomplete Especifica si el navegador debe autocompletar la forma (default: on) . enctype Especifica la codificación de los datos presentados (default: is url-encoded) . method Especifica el método HTTP utilizado al presentar el formulario (default: GET) . name Especifica un nombre usado para identificar la forma (para el uso de DOM: document.forms.name). novalidate Especifica que el navegador no se debe validar el formulario. target Especifica el destino de la dirección de la action atributo (por defecto: _self).
Va a aprender más acerca de los atributos en los próximos capítulos.
Más ejemplos
Enviar correo electrónico desde un formulario
¿Cómo enviar correo electrónico desde un formulario.