formularios html5html.formacionatomica.com/assets/recursos/formularios css.pdf · formularios html5...

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 | 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.


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.


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.


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="[email protected]" 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 ([email protected]). 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"/>


● 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)


● 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/*" />


● 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 | ¿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.


<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


<?php

$destinatario = '[email protected]';$asunto = 'Petición de presupuesto';

$usuario = $_POST['nombre'];$remitente = $_POST['mail'];$proyecto = $_POST['descripcion'];$estado = $_POST['proceso'];$presu = $_POST['presupuesto']."€";

if (!$_POST){?><?php}else{

$cuerpo = "<span style='color:#781D22'> Petición de información de </span>: " . $usuario . "<br>"; $cuerpo .= "<span style='color:#781D22'><b> Email </b></span>: " . $remitente . "<br><br><dd>";

$cuerpo .= "<span style='color:#781D22'> Descripción del proyecto </span>: " . $proyecto . "<br>";

$cuerpo .= "<span style='color:#781D22'> Estado actual </span>: " . $estado . "<br>";

$cuerpo .= "<span style='color:#781D22'><b> Presupuesto aproximado </b></span>: " . $presu . "</dd>";

$headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; $headers .= "From:".$remitente."\r\n";

mail($destinatario, '=?UTF-8?B?'.base64_encode($asunto).'?=', $cuerpo, $headers); include 'confirma.html';

}?>

formularios html5html.formacionatomica.com/assets/recursos/formularios css.pdf · formularios html5...

Documents