Funciona en:
La estructura de los formularios con HTML 5 no varía en nada con las versiones más antiguas de HTML aunque añadiendo muchas funciones, es decir para crear un formulario con nombre, e-mail, edad y pagina web como el que utilizaremos de ejemplo:
Su codigo sería:
<form id="form1" name="form1" method="post" action="consultar.php"> Nombre: <input type="text" name="nombre" id="nombre" /> Edad:<input type="text" name="edad" id="edad" /> E-mail:<input type="text" name="email" id="email" /> Web:<input type="text" name="web" id="web" /> </form>Como podemos ver en el codigo todos los campos de texto son type="text" ya sea para numero en caso de edad o para URL en este caso con el nombre de web, también existen existen otros "types" como password para que el texto se viera con asteriscos.
En el caso de HTML5 tiene muchos "type" diferentes, cada uno específico para cada tipo de datos, són los siquientes:
| text | Para introducir texto, simplemente. |
| search | Específico para input en un buscador. |
| url | Específico para direcciones de página web. Requiere http:// o http: simplemente. |
| tel | Se supone que para números de teléfono aunque no he conseguido que haga nada. |
| El nombre lo dice. | |
| password | Escribe el contenido en asteriscos. |
| De tiempo | datetime, date, month, week, time y datetimelocal. |
| number | Específico para numeros. |
| range | Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min="10" y un max="12" (los números son de ejemplo.) |
| checkbox | Para seleccionar y deseleccionar. |
| radio button | Para seleccionar, uno obligatorio. |
Ahora aplicando estos types a nuestro ejemplo de formulario anterior quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php"> Nombre: <input type="text" name="nombre" id="nombre" /> Edad:<input type="range" max="100" min="5" name="edad" id="edad" /> <output onformchange="value = edad.value">0</output> E-mail:<input type="email" name="email" id="email" /> Web:<input type="url" name="web" id="web" /> </form>Como vemos esta vez hemos tenído que introducir un "output" que será un número mostrando la edad que ha señalado en el type="range" (solo funciona en Opera), como ahora veremos ese type "range" crea una barra desplazable para señalar el numero deseado.
Podemos pensar que esto de los type está muy bien pero que obtenemos el mismo resultado con type="text" simplemente. Pero para sacarle el máximo partido a todo este tutorial y grácias a HTML 5 tenemos el parámetro " required "
que se tendrá que añadir a las lineas de codigo de los imput que sean obligatorios, es decir, que no puedan tener un valor en blanco, gracias a este "required" el formulario no será enviado si algun campo está en blanco.
Pensemos un poco, si ponemos cada type correctamente con los datos que pedimos y además añadimos el "required" el formulario no será enviado hasta que en el campo email este relleno por un email correcto y lo mismo pasa con los demás type por ejemplo el URL.
De esta manera que hemos aprendido podremos validar formularios sin ningún esfuerzo y sin necesidad de javascript. El codigo finalmente quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php"> Nombre: <input type="text" name="nombre" id="nombre" required/> Edad:<input type="range" max="100" min="5" name="edad" id="edad" /> <output onformchange="value = edad.value">0</output> E-mail:<input type="email" name="email" id="email" required/> Web:<input type="url" name="web" id="web" required/> <input type="submit" name="enviar" id="enviar" value="Enviar"> </form>Con este codigo se puede jugar todo lo que quieras, podemos hacer por ejemplo que cuando el valor introducido sea correcto, es decir, que en un campo email hayan introducido un email el campo pase de ser de color rojo a verde, simplemente sería introducir entre el "head" el siquiente codigo:
<head> <style> #for input:valid { background:green;} #for input:invalid { background:red;} </style> </head>Este codigo modifica los colores de todos los input cuando son válidos o inválidos pero si no queremos que cambien todos los imput podemos añadir labels con cualquier nombre. Introducimos entre el "#for" y "input" una palabra, por ejemplo "este". Y encerramos el input que queramos modificar con esos colores con etiquetas que se llamen igual, en este caso "este". Aqui el codigo de ejemplo:
<head> <style> #for este input:valid { background:black;} #for input:valid { background:green;} #for input:invalid { background:red;} </style> </head> <body> <form id="for"> <p>Name: <este><input type="text" name="name" required></este></p> <p>E-mail: <input type="email" name="email" required></p> <p>URL: <input type="url" name="url" required></p> <p>Edad: <input type="range" name="edad"></p> <p><input type="submit" value="enviar"></p> </form> </body>
En este caso el input "name" será el unico que se volverá negro al ser válido su contenido.
esto ha sido todo, la proxima semana un tutorial HTML 5 más, muchas grácias.
Hola!!! y consultar.php que hace? como envías la información a un correo??? Gracias
ResponderEliminarPrimero en el consultar.php se recojen los datos enviados des del formulario:
ResponderEliminar//recogemos el email
$email = $_POST['email'];
//recogemos el nombre
$nombre = $_POST['name'];
y para enviarlo por correo sería:
mail($email,"asuntillo",$nombre) ;
siempre y cuando el hosting tenga activada la funcion email email().
hola, podrias explicar mas el consultar.php ya que con esos comandos no me pasa nada
ResponderEliminarEl archivo consultar.php debe iniciarse con
EliminarEn este aso el formulario lo enviamos con method="post" entones para recoger el valor de un campo del formulario sería:
$nombre = $_POST['nombredelampo'];
$email = $_POST['email'];
y para enviar el e-mail utilizando la función que se comenta en el tutorial. Para comprobar si el php recibe los datos se pueden mostrar por pantalla con alguna función como por ejemplo:
Recuerda comprobar que tu hosting tenga activada la funcion email email().
Comenta los resultados o más problemas. gracias
Me uno a la petición, pero en el *.php no es para enviar los datos obtenidos y ya validados por el html? no deberia llamarse enviar.php o envio.php? Podrias explicar como hacer para recibir en 2 direcciones de correo los mismos datos de los formularios? Mil Gracias por tus tutoriales. Saludos desde Peru.
ResponderEliminarBuenas, el archivo .php se puede llamar de la manera que quieras mientras coincida con el del formulario. En este caso se llama consulta.php aunque envía un email, para enviar dos emails no lo he probado pero supongo que bastaría con ponerlo dos veces:
Eliminarmail($email_1,"asuntillo",$nombre);
mail($email_2,"asuntillo",$nombre);
Espero avetrte ayudado. Gracias!
dónde se ingresa el email al que va dirigido el mensaje? o eso no debo indicarlo en el .php? muchas gracias
ResponderEliminarEste formulario es solo para introducir datos con HTML.
ResponderEliminarPara tratarlos posteriormente abría que recibirlos con el PHP y utilizar por ejemplo la función mail(). Podrás encontrar mucha información in esfuerzo:
https://www.google.es/#hl=es&output=search&sclient=psy-ab&q=enviar+mail+desde+php&oq=enviar+mail+desde+php&aq=f
Muchas gracias!
Que tal amigo, bueno tengo una pregunta, como le hago para darle formato al formulario es decir, darle una posición especifica a cada etiqueta y que no me aparezcan todas en fila.
ResponderEliminarGracias
El último trozo de código ya tiene algo de formato, está dividido en párrafos. \
ResponderEliminarDe todas maneras para darle una posición en concreto deberías leer sobre CSS , o si buscas algo más sencillo utiliza tablas con borde 0.
Muchas gracias por comertar
Listo gracias, ya logre darle formato con el css, pero ahora tengo otra duda, lo que pasa es que no me funciona type "date" para que me salga el calendario en un campo el cual necesito que se ingrese una fecha de nacimiento, me sigue saliendo el campo normal como tipo texto.
ResponderEliminarEstoy usando el Firefox 11.0
¿Qué estoy haciendo mal?
Gracias.
Pruebalo en Opera 11, creo que és el único que lo hace.
ResponderEliminarPrueba buscar algún calendario en Javascript. Aunque de una manera más simple etroduce tres listas para día, mes y año. Ejemplo para días del 1 al 3:
<select id="dia">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select />
Compadre muchas gracias =D!!! es muy util tu Tutorial =D!... y sos muy paciente para dar respuestas ;)!!!!!
ResponderEliminarGRACIAS... =D!
Muchas gracias! el +1 siempre ayuda :)
Eliminarhola, mi duda es sobre la conexion con una base de datos, estoy haciendo mi sitio en html5 y quisiera saber como realizar la conexion, ya qe se, qe todo va desde donde se programa la interfaz o en este caso, el formulario
ResponderEliminarHola cesqcho, crearé un tutorial sobre como insertar los datos desde un formulario a la base de datos SQl.
EliminarMuchas gracias por tu comentario, agradecería un +1 :)
Wow!!! ¿Eso se puede hacer desde HTML 5? Que yo sepa, hasta ahora, el tema de conectar con la base de datos había que hacerlo con un lenguaje de servidor (php, asp...) y no con el HTML, que se ejecuta en el cliente (el navegador que estés usando). No sé si es que entendí mal la pregunta...
ResponderEliminarPor cierto, Victor, muy útil el tutorial, enhorabuena y gracia.
jejeje Muchas Gracias! pero creo que no lo has entendido bien, igualmente hace falta un lenguaje servidor. Este formulario lo que hace es filtrar los datos sin tener que hacer la comprobación por ejemplo en PHP.
EliminarHola! estoy recién empezando con HTML, tus post son muy buenos pero necesito aún empezar por lo más básico... alguna recomendación?? (el año pasado empecé a estudiar análisis de sistemas pero no me alcanza con el contenido de la carrera, hasta ahora vi únicamente C# y quiero más!!!)Gracias y saludos!!
ResponderEliminarLo primero para empezar con HTML te recomendaría ejercicios simples como poner en negrita las letras, crear párrafos y practicar con las tablas. Gracias! :D
Eliminarno funciona con internet explore 9...
ResponderEliminarTu tuto esta genial... quisiera que publicaras algo de bases de datos, como enlazar la bases de atos a un docuento php y asu vez como enlazarlo con la pagina en html..... estoy prendiendo un poco de programacion orientada a la web pero con lo del curso no me basta!!!!
ResponderEliminarEsta misma tarde crearé un tutorial completo sobre este tema. Espero un +1 :d
EliminarMuchas gracias!
Hola Victor muy buen tutorial sobre los form en html5 en especial ahora que casi todos los navegadores incluyen este tipo de características ... los invito a revisar un form con codigo de envio php en http://www.ideaschile.cl/validacion-formularios-html5.php espero me puedan dar sus opiniones gracias
ResponderEliminaren mi caso me ha servido pero tengo un problema los archivos que deberia de guardar automaticamente sin el localhost no se guardan que hago
ResponderEliminar