Formularios HTML

GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Formularios en HTML
El elemento <form>
El elemento <table> define un formulario en HTML, el cual se utiliza para recolectar información
ingresada por los usuarios. Un formulario contiene elementos del formulario, los cuales pueden
ser de diversos tipos: entrada de texto, botones de radio, cajas de verificación, botones de envío
entre otros.
El elemento <input>
El elemento <input> es el elemento más importante del formulario. El elemento <input> puede
ser representado de distintas maneras dependiendo del valor del atributo asignado.
Tipo Descripción
<input type="text"> Define una línea de entrada de texto.
<input type="radio"> Define un botón de radio (para seleccionar una o varias

alternativas)
<input type="submit"> Define un botón de enviar (para enviar los datos del
formulario)
Entrada de texto
El elemento <input type="text"> define una línea de entrada de texto el elemento más
importante del formulario.
Ejemplo de Formulario
GERENCIA VIRTUAL
Botón de Radio
El elemento <input type="radio"> define un botón de radio (para seleccionar una o varias
alternativas).
Ejemplo de Formulario
El botón Enviar
El elemento <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.
El atributo de “action”
El atributo de action 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<form action="/pagina_accion.php">
Nombre:<input type="text" name="nombre" value=""><br><br>
Apellido:<input type="text" name="apellido" value=""><br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Código 102.html
En el ejemplo anterior, los datos del formulario se envían a una página del servidor llamada
"/pagina_accion.php". Esta página contiene una secuencia de comandos del lado del servidor que
maneja los datos del formulario.
Si se omite el atributo de acción, la acción se establece en la misma página.
GERENCIA VIRTUAL
El atributo de “target”
El atributo target determina si el resultado enviado se abrirá en una nueva pestaña del
navegador, un marco o en la ventana actual. El valor predeterminado es "_self", lo que significa
que el formulario se enviará a la ventana actual. Para hacer que el resultado del formulario se abra
en una nueva pestaña del navegador, use el valor "_blank".
<form action="/pagina_accion.php" target="_blank">
El atributo del “method”

El atributo method especifica el método HTTP (GET o POST) que se utilizará al enviar los datos del
formulario.
<form action="/pagina_accion.php" method="get">
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.
/pagina_accion.php?nombre=Luis&apellido=Pérez
Notas sobre GET:
 Añade datos de formulario en la URL en pares “nombre / valor”.

 La longitud de una URL es limitada (alrededor de 3000 caracteres).
 ¡Nunca use GET para enviar datos confidenciales! (será visible en la URL).
 Útil para envíos de formularios en los que un usuario desea marcar el resultado.
 GET es mejor para datos no seguros, como cadenas de consulta en Google.
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.
Notas sobre POST:
 POST no tiene limitaciones de tamaño y se puede usar para enviar grandes cantidades de
datos.
 Los envíos de formularios con POST no se pueden marcar como favoritos.
GERENCIA VIRTUAL
El atributo de “name”
Cada campo de entrada debe tener un atributo name lo que le confiere una identidad para ser
enviado. Si se omite el atributo name, los datos de ese campo de entrada no se enviarán en
absoluto.
Este ejemplo solo enviará el campo de entrada "apellido".
<form action="/action_page.php">
Nombre:<input type="text" value=""><br><br>
</form>
Formulario sin valor de atributo “name” en el campo nombre
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>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h2>Agrupar Datos con Fieldset</h2>
<p>El elemento fieldset se usa para agrupar datos relacionados en un formulario,
y el elemento legend define un título para el elemento fieldset.</p>
<form action="/pagina_accion.php">
<fieldset>
<legend>Información Personal</legend>
Nombre:<input type="text" name="nombre" value=""><br><br>
</fieldset>
</form>
</body>
</html>
Código 103.html
GERENCIA VIRTUAL
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).
action Especifica una dirección (url) donde enviar el formulario

(predeterminado: la página de envío).
autocomplete 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).
method Especifica el método HTTP utilizado al enviar el formulario

(predeterminado: GET).
name Especifica un nombre utilizado para identificar el formulario (para el uso

de DOM: document.forms.name).
novalidate Especifica que el navegador no debe validar el formulario.
target Especifica el destino de la dirección en el atributo de acción

(predeterminado: _self).

Formularios HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Formularios HTML

Încărcat de

Drepturi de autor:

Formate disponibile

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

<input type="text"> Define una línea de entrada de texto.

<input type="radio"> Define un botón de radio (para seleccionar una o varias

El atributo del “method”

Cuándo usar GET?

Notas sobre GET:

 Añade datos de formulario en la URL en pares “nombre / valor”.

Cuándo usar POST?

Notas sobre POST:

Formulario sin valor de atributo “name” en el campo nombre

Agrupar datos de formulario con <fieldset>

Lista de atributos <form>

accept-charset Especifica el juego de caracteres utilizado en el formulario enviado

action Especifica una dirección (url) donde enviar el formulario

autocomplete Especifica si el navegador debe autocompletar el formulario

enctype Especifica la codificación de los datos enviados (por defecto: está

method Especifica el método HTTP utilizado al enviar el formulario

name Especifica un nombre utilizado para identificar el formulario (para el uso

novalidate Especifica que el navegador no debe validar el formulario.

target Especifica el destino de la dirección en el atributo de acción

S-ar putea să vă placă și