Formularios HTML

❮ AnteriorSiguiente ❯

---

Ejemplo de formulario HTML

First name:

Last name:

Pruebelo usted mismo »

---

El elemento <form>

El elemento HTML <form> define un formulario que se utiliza para recopilar la entrada del usuario:

<form>
.
form elements
.
</form>

Un formulario HTML contiene elementos de formulario .

Los elementos de formulario son diferentes tipos de elementos de entrada, como campos de texto, casillas de verificación, botones de opción, botones de envío y más.

---

El elemento <input>

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

El elemento <input> se puede mostrar de varias maneras, dependiendo delatributo de tipo .

Aquí hay unos ejemplos:

Tipo	Descripción
<input type = "text">	Define un campo de entrada de texto de una línea
<input type = "radio">	Define un botón de radio (para seleccionar una de muchas opciones)
<input type = "submit">	Define un botón de envío (para enviar el formulario)

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

---

www.micompraventa.net

---

Entrada de texto

<input type = "text"> define un campo de entrada de una línea para la entrada de texto :

Ejemplo

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Pruebelo usted mismo »

Así es como se verá en un navegador:

Nombre de pila:

Apellido:

Nota: el formulario en sí no es visible. También tenga en cuenta que el ancho predeterminado de un campo de texto es de 20 caracteres.

---

Entrada de botón de radio

<input type = "radio"> define un botón de opción .

Los botones de opción permiten a un 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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

 Masculino
 Hembra
 Otro

---

El botón Enviar

<input type = "submit"> define un botón para enviar los datos del formulario a un manejador de formularios .

El manejador de formularios suele ser una página de servidor con un script para procesar datos de entrada.

El controlador de formulario se especifica en el atributo de acción del formulario :

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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

Nombre de pila:

Apellido:

---

El atributo de acción

El atributo de acción define la acción que se realizará cuando se envíe el formulario.

Normalmente, los datos del formulario se envían a una página web en el servidor cuando el usuario hace clic en el botón Enviar.

En el ejemplo anterior, los datos del formulario se envían a una página del servidor llamada "/action_page.php". Esta página contiene una secuencia de comandos del lado del servidor que maneja los datos del formulario:

<form action="/action_page.php">

Si se omite el atributo de acción, la acción se establece en la página actual.

---

El atributo del método

El atributo de método especifica el método HTTP ( GET o POST ) que se utilizará al enviar los datos del formulario:

<form action="/action_page.php" method="get">

o:

<form action="/action_page.php" method="post">

---

Cuándo usar GET?

El método predeterminado al enviar datos de formulario es GET.

Sin embargo, cuando se utiliza GET, los datos del formulario enviado serán visibles en el campo de dirección de la página :

/action_page.php?firstname=Mickey&lastname=Mouse

Nota: ¡ GET NO se debe usar cuando se envía información sensible! GET es más adecuado para cantidades de datos cortas, no sensibles, porque también tiene limitaciones de tamaño.

---

Cuándo usar POST?

Utilice siempre POST si los datos del formulario contienen información sensible o personal. El método POST no muestra los datos del formulario enviado en el campo de dirección de la página.

POST no tiene limitaciones de tamaño y se puede usar para enviar grandes cantidades de datos.

---

El atributo de nombre

Cada campo de entrada debe tener un atributo de nombre para ser enviado.

Si se omite el atributo de nombre, los datos de ese campo de entrada no se enviarán en absoluto.

Este ejemplo solo enviará el campo de entrada "Apellido":

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>

Pruebelo usted mismo »

---

Agrupar datos de formulario con <fieldset>

El elemento <fieldset> se usa para agrupar datos relacionados en un formulario.

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

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>

Pruebelo usted mismo »

Así es como se mostrará el código HTML de arriba en un navegador:

Informacion personal:

Nombre de pila:

Apellido:

---

Más ejemplos

Enviar un correo electrónico desde un formulario
Cómo enviar un correo electrónico desde un formulario.

---

Ponte a prueba con ejercicios!

Ejercicio 1 »   Ejercicio 2»   Ejercicio 3 »   Ejercicio 4»

---

Aquí está la lista de atributos <form>:

Atributo	Descripción
accept-charset	Especifica el juego de caracteres utilizado en el formulario enviado (predeterminado: el juego de caracteres de la página).
acción	Especifica una dirección (url) donde enviar el formulario (predeterminado: la página de envío).
autocompletar	Especifica si el navegador debe autocompletar el formulario (predeterminado: activado).
enctype	Especifica la codificación de los datos enviados (por defecto: está codificada en url).
método	Especifica el método HTTP utilizado al enviar el formulario (predeterminado: GET).
nombre	Especifica un nombre utilizado para identificar el formulario (para el uso de DOM: document.forms.name).
no validar	Especifica que el navegador no debe validar el formulario.
objetivo	Especifica el destino de la dirección en el atributo de acción (predeterminado: _self).

Aprenderá más sobre los atributos de formulario en los próximos capítulos.

❮ AnteriorSiguiente ❯