Formulario HTML

El formulario HTML se utiliza para recopilar diferentes tipos de entrada del usuario.

<form>

El formulario HTML se utiliza para recopilar la entrada del usuario.

<form> El elemento define el formulario HTML:

Ejemplo

<form>
 .
elementos de formulario
 .
</form>

El formulario HTML contieneElementos de formulario.

Los elementos de formulario se refieren a diferentes tipos de elementos <input>, casillas de verificación, botones de opción, botones de envío, etc.

Elementos <input>

<input> El elemento es el más importanteElementos de formulario.

El elemento <input> tiene muchas formas, dependiendo de diferentes type Atributo.

Estos son los tipos utilizados en este capítulo:

Tipo Descripción
text Definir la entrada de texto común.
radio Definir la entrada de botón de opción (seleccionar una de múltiples opciones)
submit Definir el botón de envío (enviar el formulario)

Nota:Aprenderás más sobre los tipos de entrada más adelante en este tutorial.

Entrada de texto

<input type="text"> Definir paraEntrada de textoEl campo de entrada de una sola línea de

Ejemplo

<form>
 Nombre:<br>
<input type="text" name="firstname">
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Pruebe personalmente

En el navegador, se verá así:

Nombre:


Apellido:

Nota:El formulario en sí no es visible. Además, tenga en cuenta que el ancho predeterminado del campo de texto es de 20 caracteres.

Entrada de botón de opción

<input type="radio"> DefinirBotones de opción.

Los botones de opción permiten al usuario elegir una de las opciones limitadas:

Ejemplo

<form>
<input type="radio" name="sex" value="male" checked>Masculino
<br>
<input type="radio" name="sex" value="female">Femenino
</form>

Pruebe personalmente

Los botones de opción se ven así en el navegador:

Masculino

Femenino

Botón de envío

<input type="submit"> Definir para enviar aProcesador de formularios（form-handler）EnviarLos botones del formulario.

El procesador de formularios es generalmente una página de servidor que contiene scripts para procesar datos de entrada.

El procesador de formularios en el formulario action Se especifica en el atributo:

Ejemplo

<form action="action_page.php">
Nombre:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Apellido:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Enviar">
</form>

Pruebe personalmente

En el navegador, se verá así:

Nombre:


Apellido:


Atributo action

Atributo actionDefinir la acción a realizar al enviar el formulario.

La práctica común para enviar un formulario a un servidor es usar un botón de envío.

Por lo general, el formulario se envía a una página web en el servidor web.

En el ejemplo anterior, se especifica un script de servidor para procesar el formulario presentado:

<form action="action_page.php">

Si se omite el atributo action, se establecerá action como la página actual.

Atributo Method

Atributo methodSe especifica el método HTTP utilizado al enviar el formulario (GET o POST)

<form action="action_page.php" method="GET">

o:

<form action="action_page.php" method="POST">

Cuándo usar GET?

Puede usar GET (método predeterminado):

Si el envío del formulario es pasivo (por ejemplo, consultas de motores de búsqueda) y no contiene información sensible.

Cuando usa GET, los datos del formulario son visibles en la barra de direcciones de la página:

action_page.php?firstname=Mickey&lastname=Mouse

Nota:GET es más adecuado para el envío de cantidades pequeñas de datos. El navegador establece límites de capacidad.

Cuándo usar POST?

Usted debe usar POST:

Si el formulario está actualizando datos o contiene información sensible (por ejemplo, contraseñas).

La seguridad de POST es mejor, ya que los datos enviados en la barra de direcciones de la página no son visibles.

Atributo Name

Cada campo de entrada debe tener una propiedad name configurada para que se envíe correctamente.

En este ejemplo, solo se enviará el campo de entrada "Apellido":

Ejemplo

<form action="action_page.php">
Nombre:<br>
<input type="text" value="Mickey">
<br>
Apellido:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Enviar">
</form>

Pruebe personalmente

Combine los datos del formulario con <fieldset>

<fieldset> Los elementos combinan datos relacionados en el formulario

<legend> El elemento <fieldset> define el título.

Ejemplo

<form action="action_page.php">
<fieldset>
<legend>Información personal:</legend>
Nombre:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Apellido:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Enviar"></fieldset>
</form>

Pruebe personalmente

Este código HTML se verá así en el navegador:

Información personal:
Nombre:


Apellido:


Atributos del formulario HTML

El elemento <form> de HTML, configurado con todos los atributos posibles, es así:

Ejemplo

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
elementos de formulario
 .
</form>

A continuación se muestra la lista de atributos de <form>:

Atributo Descripción
accept-charset Se especifica la familia de caracteres utilizada en el formulario enviado (por defecto: familia de caracteres de la página).
action Se especifica la dirección (URL) a la que se enviará el formulario (página de envío).
autocomplete Se especifica si el navegador debe completar automáticamente el formulario (por defecto: activado).
enctype Se especifica la codificación de los datos enviados (por defecto: url-encoded).
method Se especifica el método HTTP utilizado al enviar el formulario (por defecto: GET).
name Se especifica el nombre del formulario que se identifica (para DOM se usa: document.forms.name).
novalidate Se especifica que el navegador no verifique el formulario.
target Se especifica el destino de la dirección en la propiedad action (por defecto: _self).

Nota:En la sección siguiente aprenderá más sobre los atributos.