En esta nueva entrega del curso de HTML os voy a explicar que son los formularios y para que os pueden servir. Los formularios nos servirán para varias cosas como recibir información por parte del visitante y con ello podemos gestionar el alta de dicho usuario y poder tramitar una compra o que rellene una encuesta, entre otras muchas cosas. Hay que tener en cuenta que con HTML solo vamos a recoger los datos, diseñar el formulario y enviar dichos datos al servidor, pero no podemos tratar dicho datos, para ello necesitaremos de un lenguaje de programación como PHP.
Los formularios comienzan con la etiqueta “form”, y entre la etiqueta de apertura y la de cierre van los distintos elementos del formulario. Os pongo un ejemplo con la sintaxis de un formulario que lo único que hace es mostrar en la pantalla del navegador un recuadro para introducir texto:
<html> <head></head> <body> <form> Introduzca su nombre: <input type="text" name="nombre"> </form> </body> </html>
1234567891011 <html> <head></head> <body> <form> Introduzca su nombre:<input type="text"name="nombre"> </form></body> </html>
Podemos ver la etiqueta “form” y entre su apertura y su cierre mostramos el texto “Introduzca su nombre: ” y luego otra etiqueta “input” que tiene como atributos “type” con valor “text” y “name” con valor “nombre”. Esto quiere decir que aparecerá el mensaje de texto y luego un recuadro en el cual introduciremos nuestro nombre y lo que tecleemos se guardara en una variable que se llama nombre. El contenido de la variable “nombre” es lo que se mandara al servidor para ser tratado posteriormente.
A la etiqueta “input” podemos añadirle mas atributos como “size” que indica el tamaño que tendrá el cuadro de texto. El tamaño se indicara en caracteres, si ponemos, por ejemplo, 10 y el usuario quiere introducir un nombre que tiene 20 caracteres, podrá hacerlo, pero solo vera mientras escribe 10, aunque el nombre se mandara completo al servidor. También podemos ponerle el atributo “maxlenght” que es el numero máximo de caracteres que podrá tener el elemento, es decir, si ponemos 20 como valor, el usuario solo podrá poner un nombre que tenga de máximo 20 letras, incluyendo espacios en blanco.
También podemos indicarle el atributo “value” que es el valor inicial que tendrá el campo de texto, seguro que lo habéis visto en muchas paginas, cuando hay un campo de búsqueda y dentro del cuadro pone algo así como “Introduzca aquí su búsqueda” para informar al usuario.
Al “input” también podemos indicarle que se comporte como una contraseña, es decir, que cuando el usuario que esta visitando la pagina introduzca texto en un cuadro en vez de verse los caracteres que escribe, se vean asteriscos, esto se hace poniéndole “password” como valor a “input”, os muestro como:
Introduzca su contraseña: <input type="password" name="contraseña">
1 Introduzca su contraseña:<input type="password"name="contraseña">
Si queremos añadir al formulario un recuadro en el cual el usuario pueda escribir un texto largo como un comentario o algo asi lo haremos con la etiqueta “textarea”, indicándole el tamaño del recuadro en filas y columnas de la siguiente manera:
<textarea name="comentario" rows="10" cols="40">Escriba aqui su comentario ...</textarea>
1 <textarea name="comentario"rows="10"cols="40">Escriba aqui su comentario</textarea>
En este caso el recuadro tendrá 10 lineas de largo por 40 columnas de ancho, una columna es el tamaño ocupado por una letra. El ejemplo mostrara un mensaje dentro del recuadro informándole de lo que puede escribir en el.
Si queremos poner una lista de opciones para que el usuario seleccione una de ellas en un desplegable se hará de la siguiente forma:
<select name="estacion"> <option>Primavera</option> <option>Verano</option> <option>Otoño</option> <option>Invierno</option> </select>
123456 <select name="estacion"> <option>Primavera</option> <option>Verano</option> <option>Otoño</option> <option>Invierno</option></select>
Esto nos mostrara un recuadro y al pinchar en el se verán todas las opciones pudiendo seleccionar solo una de ellas. Si queremos que el usuario pueda elegir mas de una opcion lo conseguiremos añadiendo el atributo “multiple” sin ningún valor y con el atributo “size” con una valor numérico para indicar su tamaño de la siguiente forma:
<select name="estacion" size="3" multiple>
1 <select name="estacion"size="3"multiple>
Para hacer una selección múltiple hay que tener presionada la tecla “CTRL”, para marcar varias opciones de una en una o “SHIFT” para marcar varias de una vez. Es conveniente poner un texto informando sobre el uso de las teclas al usuario.
Si queremos de una de las opciones del ejemplo anterior apareciese como la opción marcada por defecto solo tendríamos que añadir el atributo “selected” sin valor a la opción que queremos que sea la marcada por defecto de la siguiente manera:
<option selected>Otoño</option>
1 <option selected>Otoño</option>
Si queremos que al enviar el formulario sea procesado por el servidor según la opción elegida tenemos que poner un atributo con su valor, os pongo un ejemplo:
<select name="estacion"> <option value="1">Primavera</option> <option value="2">Verano</option> <option value="3">Otoño</option> <option value="4">Invierno</option> </select>
123456 <select name="estacion"> <option value="1">Primavera</option> <option value="2">Verano</option> <option value="3">Otoño</option> <option value="4">Invierno</option></select>
De esta forma según la opción que elijamos el servidor cogería el valor de cada opción y lo procesaría como tuviese establecido.
Otro tipo de formulario que podemos hacer es con distintas opciones que se muestran y poder elegir una de ella marcando un circulo que corresponde a cada opción y que solo podamos elegir una de ellas. Esto se haría de la siguiente forma:
<input type="radio" name="estacion" value="1">Primavera<br> <input type="radio" name="estacion" value="2">Verano<br> <input type="radio" name="estacion" value="3">Otoño<br> <input type="radio" name="estacion" value="4">Invierno
1234 <input type="radio"name="estacion"value="1">Primavera<br><input type="radio"name="estacion"value="2">Verano<br><input type="radio"name="estacion"value="3">Otoño<br><input type="radio"name="estacion"value="4">Invierno
Con el valor “radio” del atributo “type” indicamos que nos muestre un circulo antes de cada opción y así podemos marcar una de ellas. Todos tienen el mismo “name”, de esta forma al atributo “name” solo podemos asignarle un valor que puede ser 1,2,3 o 4 en función de la opción elegida, esta información sera enviada al servidor y posteriormente procesada. Si queremos que una de las opciones este marcada por defecto habría que añadir el atributo “checked” a la opción que queramos.
También podemos podemos poner cuadros de validación de la siguiente manera:
<input type="checkbox" name="paella">Me gusta la paella
1 <input type="checkbox"name="paella">Me gusta la paella
Esto nos mostrara un cuadradito antes del texto que podremos marcar o no.
Ahora, si hemos mostrado un formulario y queremos que al final aparezca un botón que nos permita enviar la información al servidor lo pondremos asi:
<input type="submit" value="Enviar">
1 <input type="submit"value="Enviar">
Esto nos mostrara el botón con el texto “Enviar” dentro y cuando pulsemos en dicho botón la información del formulario sera enviada al servidor para su posterior procesamiento. Si queremos añadir también un botón que nos permita borrar lo que hemos escrito en el formulario se pondría de la siguiente manera:
<input type="reset" value="Borrar">
1 <input type="reset"value="Borrar">
Puede que queramos que se envíen datos que no queremos que el usuario vea por alguna motivo, como una referencia al mensaje si tenemos varios formularios o la hora, esto se hace la siguiente manera:
<input type=hidden name="sitio" value="www.elblogdeliher.com">
1 <input type=hidden name="sitio"value="www.elblogdeliher.com">
Si queremos poner botones que al pulsarlos se haga una tarea en concreto que hayamos preestablecido con javascript, por ejemplo, lo podemos poner de la siguiente manera:
<input type=button value="Texto escrito en el botón">
1 <input type=button value="Texto escrito en el botón">
Esto lo dejaremos para mas adelante, pero esta bien conocerlo.
Si queremos que el formulario este agrupado y tenga una linea que lo rodea podemos hacerlo de la siguiente forma:
<fieldset> Elemento de formulario: <input type="text" name="elemento1"><br> Otro elemento: <input type="text" name="otro"> </fieldset>
1234 <fieldset> Elemento de formulario:<input type="text"name="elemento1"><br> Otro elemento:<input type="text"name="otro"></fieldset>
Si ademas queremos que aparezca un texto como si fuese el titulo del formulario habría que hacerlo así:
<form> <fieldset> <legend align="right">Datos personales</legend> Nombre: <input type="text" name="nombre"><br> Edad: <input type="text" name="edad" size="2"><br> Dirección: <input type="text" name="direccion"> </fieldset> </form>
12345678 <form> <fieldset> <legend align="right">Datos personales</legend> Nombre:<input type="text"name="nombre"><br> Edad:<input type="text"name="edad"size="2"><br> Dirección:<input type="text"name="direccion"> </fieldset></form>
En “legend” mostramos el texto que sera el titulo del formulario.
Todo esto os lo explico en el siguiente vídeo con ejemplos:
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure