Formularios HTML5 |

Vamos a diseñar un formulario que cumpla con lo siguiente:

● El cursor estará situado por defecto dentro del primer campo, para que el

usuario pueda escribir sin tener que hacer clic en él.

● Si sitúas el cursor encima de cualquier campo podrás leer una explicación

adicional sobre esa pregunta.

● Los primeros tres campos son obligatorios, por lo que estarán en rojo hasta

que sean rellenados y además de manera correcta.

● El correo electrónico, además sólo aceptará el valor introducido si detecta una

@ enmedio y un formato apropiado.

● Además, el correo electrónico ofrece un valor de ejemplo que se elimina

automáticamente al introducir cualquier valor.

● Al pulsar el botón "Enviar los datos" sin haber introducido los tres primeros

campos obligatorios o bien el correo electrónico con un formato no válido

aparecerá un mensaje de alerta con información adicional que informa de los
errores encontrados.
Formularios HTML5 | El código HTML
Formularios HTML5 | El código HTML
Formularios HTML5 | Estructura

Con <form ...> definimos el inicio del formulario. Con action="enviar.php"

dónde tiene que enviar la información al pulsar el botón "Enviar" y con
method="post" el método de envío.

Cada <fieldset> representa un apartado del formulario, y puede tener un título,

que se añade con <legend>.

Cada <input..> representa una caja de texto del formulario con sus atributos:

● <type> define el tipo de datos que debe introducir el usuario (text, email,
password).
● <name> define el nombre con el que se pasará los datos a PHP para que éste
los envíe.
● <size> define la longitud del campo de texto.
Formularios HTML5 | Estructura

Cada <input..> representa una caja de texto del formulario con sus atributos:

● <autofocus> indica que cuando se acceda a esta página el cursor estará

colocada en dicho campo de texto.
● <autocomplete> indica que al escribir en este campo se ofrecerá consejos
mostrando contestaciones anteriores.
● <placeholder> define el texto que aparecerá escrito en gris en el campo de
texto antes de que el usuario escriba algo.
● <required> define si el campo de texto será obligatorio.
● <title> da información sobre cada campo, tanto para cuando el usuario
coloque el cursor encima como cuando se produzca algún error.
Formularios HTML5 | Estructura

Un <textarea> es una gran caja de texto que está destinada a escribir una gran
cantidad de texto.

Los <input...> de type="radio" son controles en los que se debe seleccionar una
única respuesta de las 4 opciones planteadas.

Cada una de estas opciones se define con un <input type="radio"> diferente

que tenga el mismo name="proceso".
● El atributo value define el valor que se va a registrar (y enviar) cuando el

usuario seleccione cada opción (es invisible para el usuario).

● checked indica que este control estará actividado inicialmente.

El texto que hay detrás (por ejemplo 'En fase de planteamiento') será el que irá
detrás del 'radio button' y por lo tanto será el que podrá leer el usuario para
saber qué representa cada botón.
Formularios HTML5 | Estructura

Lo primero a tener en cuenta hace referencia a la estructura general. Así, todas

las etiquetas que vamos a utilizar para el formulario tienen que estar ubicadas
dentro de las etiquetas del formulario <form> y </form>.

<form action="enviarmail.php" method="post">

</form>

En este caso, detrás de action hemos añadido la ruta del fichero .php que
enviará los datos introducidos en el formulario y al final con method indicamos
el método "post", que garantiza una mayor seguridad para los datos enviados.

Vamos a echar un vistazo a las diferentes etiquetas o <inputs> que componen el

formulario de ejemplo superior para poder ver las nuevas características que
HTML5 aporta
Formularios HTML5 | Tu nombre...

<input type="text" size="40" title="Escribe tu nombre real. Es el que

aparecerá en tu..." name="nombre" autofocus required/>

● Con type indicamos qué tipo de datos estamos pidiendo (en este caso 'texto
normal').
● Si queremos un campo de texto más largo o extenso podemos especificarlo
con size.
● Con title podemos incluir un texto adicional que aparecerá cuando el usuario
coloque el cursor encima.
● name es importante ya que es la manera en la que se identificará este valor al
enviar la información.
● En todo el formulario sólo puede haber un campo con autofocus, ya que este
parámetro señala qué campo del formulario estará inicialmente seleccionado
por defecto para que el usuario pueda escribir sin tener que seleccionarlo.
● El parámetro required indica que este campo es obligatorio y que sino se
rellena no se podrá enviar la información.
Formularios HTML5 | Contraseña...

<input type="password" size="7" title="Escribe la contraseña que

desee..." name="password" required/>

Al detectar que en type se especifica el valor 'password' lo que el usuario

escribe se enmascara con círculos de forma automática.

El required final nos indica que este campo también es obligatorio.

Formularios HTML5 | Email...

<input type="email" placeholder="usuario@dominio.com" size="40"

title="Escribe tu correo electrónico..." name="mail" required/>

Como en type se especifica 'email' la autovalidación de este dato incluirá la

búsqueda de una @ y un mínimo formato apropiado.
En este caso observamos el parámetro placeholder, que es el responsable de
que inicialmente aparezca ya escrito en gris flojo (usuario@dominio.com).
Automáticamente cuando el usuario escribe cualquier valor dicho texto se
elimina, igualmente si el usuario borra todo el contenido, el texto especificado
con placeholder vuelve a aparecer.
Formularios HTML5 | Fechas...

<input type="date" value="2000-01-01" name="nacimiento"

title="La fecha en la que naciste, ya que..."/>

El valor 'date' dentro de type identifica que el valor a utilizar es una fecha y que
por lo tanto aparecerá el acceso a un calendario, que se puede ubicar
directamente en una fecha inicial utilizando el parámetro 'value'.

Así, value permite especificar la fecha inicial por defecto que aparecerá
inicialmente en el calendario. Sino se indica ningún valor aparecerá la fecha
actual.
Formularios HTML5 | Rangos...

<input type="range" min="1" max="7" value="2" step="1"

title="Necesitamos saber..." name="adiccion"/>

Al indicar en type el valor 'range' aparece una barra (slider) con la que el
usuario puede introducir un valor numérico arrastrando la barra hasta el valor
que corresponda.
Con min y max se especifica el valor mínimo y máximo que el usuario podrá
introducir.
Para especificar un valor inicial utilizamos el parámetro value.
Con step podemos especificar el valor de incremento (o decremento) de cada
punto del slider. Por ejemplo, un valor de "1" quiere decir que cada vez que el
usuario mueve un espacio del slider se aumenta o se disminuye el valor de 1 en
1, y que además no serán válidos los decimales.
Formularios HTML5 | Colores...

<input type="color" value="#FF0000" title="Con esta votación..."

name="color_preferido"/>

Al indicar en type el valor 'color' aparece un selector de colores en el que se

podrá escoger el color deseado de entre los que aparecen, o bien indicando el
código RGB del color.

Para especificar un color inicial por defecto utilizamos el parámetro value

indicando el código de color inicial en hexadecimal.
Formularios HTML5 | Enviar...

<input type="submit" value="Enviar los datos"/>

Con type="submit" estamos añadiendo el típico botón "Enviar", en el que a

través del parámetro value podemos indicar el texto que se mostrará dentro del
botón.

En este caso la acción de enviar la información se realizará de la manera

automática, enviando los datos a la dirección que se ha indicado en <form>.
Formularios HTML5 | Otros input...

Existen múltiples tipos de <input> type, como son:

● button: Crea un botón 'vacío'. La acción que se ejecutará cuando el usuario

haga clic en él. La acción a ejecutar se tendrá que añadir posteriormente con
JavaScript indicando su nombre de id.

<input type="button" value="Vótame" id="boton1"/>

Formularios HTML5 | Otros input...

● checkbox: Crea cuadros de selección en el que se puede seleccionar más de

un valor. Todos los checkbox tienen que tener el mismo valor en name.
Además, si queremos que uno de los valores esté marcado inicialmente por
defecto, le añadiremos la propiedad checked (como es el caso de Kabul, -ideal
en Agosto-).
<input type="checkbox" name="vacaciones" value="Damasco" />
Damasco (Siria)
<input type="checkbox" name="vacaciones" value="Kabul"
checked/> Kabul (Afganistán)
<input type="checkbox" name="vacaciones" value="Belgrado" />
Belgrado (Serbia)
Formularios HTML5 | Otros input...

● file: Permite que el usuario pueda seleccionar un fichero de su disco duro.

Además, es posible indicar un filtro para poder seleccionar únicamente un
tipo de fichero determinado. (Posteriormente para subirlo al servidor o
realizar cualquier otra acción con dicho fichero se tendrá que recurrir a
JavaScript).

<input type="file" name="fichero" accept="image/*" />

Formularios HTML5 | Otros input...

● radio: Crea círculos de selección en el que únicamente se puede seleccionar

uno de ellos. Todos los radio button tienen que tener el mismo valor en name.
Si además queremos que un valor esté seleccionado inicialmente, añadiremos
el parámetro 'checked' a la opción deseada (como 'Mujer' en el siguiente
ejemplo).

<input type="radio" name="sexo" value="Mujer" checked/> Mujer

<input type="radio" name="sexo" value="Hombre"/> Hombre y sus
derivados
<input type="radio" name="sexo" value="NS/NC"/> No estoy muy
seguro/a
Formularios HTML5 | Otros atributos...

Los nuevos atributos para las etiquetas <input> más habituales e importantes
son:
● required: El campo es obligatorio.

● autofocus: Inicialmente el campo está seleccionado (sólo puede haber uno

por formulario).
● placeholder: Se muestra un valor por defecto en gris que se elimina cuando el

usuario introduce algún valor.

● autocomplete: Permite el rellenado automático del <input> en base al texto

que vaya escribiendo el usuario, según los valores introducidos en ocasiones

anteriores.
Formularios HTML5 | Maquetacion CSS

Para maquetar y dar un estilo determinado al formulario en general podemos

utilizar el selector form {, mientras que para maquetar y dar un estilo visual a los
diferentes <input...> utilizamos el selector input {:

form {
background-color:orange;
color:black;
}
input {
color:grey;
}
Formularios HTML5 | Maquetacion CSS
Para que el formulario pueda resaltar visualmente qué campos obligatorios es
necesario rellenar o qué campos tienen valores incorrectos utilizamos el selector
:invalid{, mientras que el selector [required]{ señala aquellos campos que son
obligatorios y que los valores introducidos son correctos.
[required] {
border-color:green;
box-shadow:0px 0px 8px green;
}
:invalid {
border-color:red;
box-shadow:0px 0px 8px red;
}
Con este código CSS todos los campos con valores obligatorios (es decir, que tengan el
atributo required) que tengan un valor correcto tendrán el borde de color verde y una
sombra interna también verde. Mientras que aquellos campos que tienen valores
incorrectos o bien están sin rellenar, siendo obligatorios tendrán un borde y una sombra
interna de 8 píxeles de color rojo.
Formularios HTML5 | Maquetacion CSS
Para que el formulario pueda resaltar visualmente qué campos obligatorios es
necesario rellenar o qué campos tienen valores incorrectos utilizamos el selector
:invalid{, mientras que el selector [required]{ señala aquellos campos que son
obligatorios y que los valores introducidos son correctos.
[required] {
border-color:green;
box-shadow:0px 0px 8px green;
}
:invalid {
border-color:red;
box-shadow:0px 0px 8px red;
}
Con este código CSS todos los campos con valores obligatorios (es decir, que tengan el
atributo required) que tengan un valor correcto tendrán el borde de color verde y una
sombra interna también verde. Mientras que aquellos campos que tienen valores
incorrectos o bien están sin rellenar, siendo obligatorios tendrán un borde y una sombra
interna de 8 píxeles de color rojo.
Formularios HTML5 | ¿Cómo enviar los datos?

Como HTML (por si solo) no envía datos, vamos a utilizar un lenguaje llamado PHP.
Así, cuando el usuario haga clic en el botón enviar:

● El formulario cogerá individualmente cada uno de los datos que hay dentro del
<form>, les pondrá un nombre (el especificado con el atributo name) y se los pasará a
un fichero PHP correctamente empaquetados.
● Este fichero PHP recogerá los datos.
● Desempaquetará cada uno de los datos y mirará el nombre que le ha dado el
formulario (el name) a cada uno de los datos para poder identificarlos.
● Con todo correctamente identificado enviará los datos a una dirección de correo
electrónico, con un asunto y un cuerpo bien estructurado.
Formularios HTML5 | ¿Cómo enviar los datos?

<form action="enviar.php method="post">

El primer paso se cumple gracias al atributo action="enviar.php" que añadimos en el
<form> del formulario que creamos en el tema anterior.
Evidentemente nos falta este archivo enviar.php, que deberá estar en la misma carpeta
del servidor que contacto.html.
IMPORTANTE: Un archivo PHP sólo se ejecuta si se encuentra en un servidor de Internet
(en nuestro equipo local no funcionará).
Copia el siguiente código en cualquier editor y guárdalo como tipo de fichero:php con el
nombre 'enviar.php' en la misma carpeta donde tienes 'contacto.html'
El texto resaltado en verde corresponde a variables de PHP (que puede ser cualquier
nombre sin espacios). Los textos en rojo tienen que corresponder obligatoriamente con
los name especificados en el formulario, mientras que los textos azules son aquellos
datos que no corresponden con ningún dato y que los podemos modificar a nuestro
gusto
Formularios HTML5 | ¿Cómo enviar los datos?

<?php $cuerpo .= "<span style='color:#781D22'>

Descripción del proyecto
$destinatario = 'nombre@servidor.es'; </span>: " . $proyecto . "<br>";
$asunto = 'Petición de presupuesto';
$cuerpo .= "<span style='color:#781D22'>
$usuario = $_POST['nombre']; Estado actual </span>: " .
$remitente = $_POST['mail']; $estado . "<br>";
$proyecto = $_POST['descripcion'];
$estado = $_POST['proceso']; $cuerpo .= "<span style='color:#781D22'><b>
$presu = $_POST['presupuesto']."€"; Presupuesto aproximado
</b></span>: " . $presu . "</dd>";
if (!$_POST){
?> $headers = "MIME-Version: 1.0\r\n";
<?php $headers .= "Content-type: text/html; charset=utf-8\r\n";
}else{ $headers .= "From:".$remitente."\r\n";

$cuerpo = "<span style='color:#781D22'> mail($destinatario, '=?UTF-8?B?'.base64_encode($asunto).'?=',

Petición de información de $cuerpo, $headers);
</span>: " . $usuario . "<br>";
$cuerpo .= "<span style='color:#781D22'><b> include 'confirma.html';
Email
</b></span>: " . $remitente . "<br><br><dd>"; }
?>