Formularios en HTML

Un formulario es un elemento que captura información en una página Web, se

puede decir que los elementos del formulario activan los escuchadores para
recibir la información del usuario.

La etiqueta form es un contenedor que contiene cada uno de los elementos

que van a recibir la información

Atributo Descripción Ejemplo

action La URL de destino que action="destino.php"
procesa la información del
formulario
enctype Define los elementos que van enctype="multipart/form-data"
a ser enviados por el
formulario

method Forma que el navegador usa method="post"

para enviar la información
puede se get o post
Id o name Identifica el formulario, debe id="miformulario"
ser único entre formularios

Ejemplo de etiqueta form

<form action="destino.php" method="post" enctype="multipart/form-data"
id="miformulario">

</form>

Etiqueta input

En los formularios se tienen diferentes tipos de captura de información en

HTML5 se tienen diferentes tipos o type que permiten captura de datos
especiales.
Valores del atributo type para formularios con HTML5

Valor Descripción Ejemplo

Text Captura textos en el digite su nombre<input
formulario type="text" id="nombre">

radio Selecciones el género<input

type="radio" id="genero"
value="h">Hombre
<input type="radio"
id="genero" value="m">Mujer

select Permite seleccionar objetos <select id="carrera">

de una lista <option value="ISV">Ing. de
sistemas</option>
<option value="ICD">Ing.
ciencia de datos</option>
<option value="ISIS">Ing. de
Sistemas</option>
</select>

color crea un campo con selector elija el color <input type="color"

de color, de acuerdo al id="color" value="#e66465">
sistema operativo, aparece
una paleta para escoger un
color
date se creará un campo de Fecha <input type="date"
fecha, en ella se pueden id="fecha">
colocar el día, mes y año

Datetime-lo permite ingresar Fecha <input

cal información de hora, minuto type="datetime-local" id="hora"
y segundo value="2018-06-12T19:30">

email para información de correo E-mail <input type="email"

electrónico id="correo">
month genera un campo para mes <input type="month"
ingresar un mes del año id="mes" value="2023-05">

number para recopilar datos numero <input type="number"

numéricos id="num" min="1" max="100">

range crea una barra con un botón rango <input type="range"

desplegable para elegir un id="rango">
rango, por defecto el rango

time crea un campo para ingresar Hora <input type="time" id="hora"

hora y minuto >
submit Botón que ejecuta el <input type="submit"
formulario value="enviar">

Atributos para formularios HTML5

● Autocomplete: El navegador trata de autocompletar los campos que el

usuario está completando, basándose en su actividad en el navegador.
● required: Sirve para establecer que el campo debe ser completado
obligatoriamente, en caso contrario no será posible enviar la información
del formulario.
● Placeholder: Se usa para colocar en su valor un breve texto que indique
al usuario el tipo de información que debe colocar en el campo.
● Autofocus: Sirve para enfocar automáticamente el campo deseado
cuando el formulario se carga.
● Size: Establece el tamaño de los campos, un número de caracteres para
campos de texto.
● Readonly: Sirve para que la información de un campo no pueda ser
modificada, solo de lectura.
● Disabled: Hace que un campo quede deshabilitado, de tal manera que
no se puede hacer nada con él.

Captura de información de formularios desde PHP

Para capturar la información que traen los formularios es necesario utilizar algún
lenguaje de programación, puede ser Javascript, o algún lenguaje del lado del
servidor como ASP o PHP. Para este ejemplo se va a utilizar PHP como lenguaje
de script que captura la información y la deja lista para ser usada dentro del
programa, para el ejemplo un sitio web

La manera de capturar la información es utilizando el paso de atributos, para

ello se utiliza el método post, get o request

$_GET y $_POST son variables super globales que forman arreglos de

identificadores y valores, los identificadores son los nombres del formulario
(atributo "id") y los valores son los datos de entrada de los usuarios.

$_GET es un arreglo de variables que se pasan al script a través de los

parámetros de la dirección URL. La información que se envía es visible para todo
el mundo y tiene limitada la cantidad de información que se puede enviar.

$_POST es un arreglo de variables que se pasan al script a través del método

HTTP POST. La información que se envía no es visible para los demás ya que los
nombres y variables van embebidas en el body del HTTP request. No tiene
límites en la cantidad de información a enviar.
$_REQUEST permite capturar variables enviadas desde formularios con los métodos GET o POST.
Es decir permite la captura de información desde formularios tanto get como post

Para capturar la información con estos métodos se hace necesario crear un

espacio en memoria que reciba la información del identificador del objeto input,
de acuerdo a la forma como se envíe será get o post, pero si se desea se puede
utilizar request para capturar cualquiera de los dos

Ejemplo de código de captura

Origen en el formulario Código de captura

Método post $nombre=$_POST['nombre'];
digite su nombre<input type="text" echo $nombre;
id="nombre">
Método get $fecha=$_GET['fecha'];
Fecha <input type="date" id="fecha"> echo $fecha;
Método Request $correo=$_REQUEST['correo'];
E-mail <input type="email" id="correo"> echo $correo;

Ejemplo completo de código

<DOCTYPE! html>
<html>
<head>
<title></title>
</head>
<body>

<form action="" method="post" enctype="multipart/form-data"

id="miformulario">
 digite su nombre<input type="text" id="nombre">
<br><br>
Selecciones el género<input type="radio" id="genero" value="h">Hombre
<input type="radio" id="genero" value="m">Mujer
<br><br>
<select id="carrera">
<option value="ISV">Ing. de sistemas</option>
<option value="ICD">Ing. ciencia de datos</option>
<option value="ISIS">Ing. de Sistemas</option>
</select>
<br><br>
elija el color <input type="color" id="color" value="#e66465">
<br><br>
Fecha <input type="date" id="fecha">
<br><br>
Fecha <input type="datetime-local" id="hora" value="2018-06-12T19:30">
<br><br>
E-mail <input type="email" id="correo">
<br><br>
mes <input type="month" id="mes" value="2023-05">
<br><br>
numero <input type="number" id="num" min="1" max="100">
<br><br>
rango <input type="range" id="rango">
<br><br>
Hora <input type="time" id="hora" >
<br><br>
<input type="submit" value="enviar">
</form>
<?php

$nombre=$_POST['nombre'];
$fecha=$_POST['fecha'];
$correo=$_REQUEST['correo'];
$genero=$_REQUEST['genero'];
$carrera=$_REQUEST['carrera'];
$color=$_REQUEST['color'];
$mes=$_REQUEST['mes'];
$numero=$_REQUEST['num'];
$rango=$_REQUEST['rango'];
$hora=$_REQUEST['hora'];

echo "bienvenido ".$nombre." tu color es: ".$color;

?>
</body>
</html>
</DOCTYPE>