Los tipos de entrada que vamos a ver son:
text
drop-down
checkbox
radio buttons
submit o reset
Cuando rellenamos un formulario web y pulsamos el botón de enviar, toda la información incluida en el formulario es registrada en el servidor de la web.
Para crear un formulario web usaremos el elemento <form> que suele hacer uso de dos atributos:
action - indica la forma de actuar o que hacer cuando el usuario hace click en el botón enviar información
method - que se encarga de como enviar esa información, principalmente hay dos opciones: "GET" (cuando se envía poca información) y "POST" (cuando se envía gran cantidad de información)Una vez dentro del elemento <form> nos podemos encontrar con el elemento <legend> que es opcional y nos permite crear una leyenda encerrando todo el formulario web en una caja.
Otro elemento que podemos encontrarnos es <fieldset> que también es opcional y nos permite controlar el diseño y la accesibilidad.
Cuando tenemos la estructura de nuestro formulario web ya podemos crear las entradas para el usuario y para ello haremos uso del elemento <input>. Este elemento hace uso de dos atributos:
name - nombre identificativo de la entrada
type - tipo de entradaPara cada entrada de usuario podemos crear un nombre visual de dicha entrada gracias al elemento <label> que también es opcional pero totalmente recomendable. Nos permitirá crear un texto descriptivo para la entrada del usuario.
A continuación vamos a ver un ejemplo de formulario web básico sobre el que trabajaremos a lo largo del articulo añadiendo diferentes tipos de entrada de usuario.
<!doctype html> <html> <head> <title>Formulario web basico</title> </head> <body> <h1>Formulario web basico</h1> <hr> <form action="#"> <fieldset> <legend>Entradas de usuario</legend> <div> <label for="usuario">Nombre:</label> <input id="usuario" type="text" name="usuario"> </div><br> <div> <label for="email">Direccion email:</label> <input id="email" type="text" name="email"> </div><br> </fieldset> </form> </body> </html>El resultado es el siguiente:
1. Entradas de texto
Nos permite crear una caja donde el usuario puede introducir un texto. En el ejemplo anterior hemos visto como crear dos cajas de texto, para ello hemos indicado en el atributo "type" que es una entrada de texto.
Para una entrada de texto tenemos tres atributos que nos pueden ser útiles:
size - nos permite especificar el ancho de la entrada de texto. El ancho sera una valor entero que se mide en caracteres
maxsize - numero máximo de caracteres permitidos en la entrada de texto
value - nos da la posibilidad de mostrar un texto por defecto en la entrada de textoPartiendo del ejemplo anterior vamos a modificar la entrada de nombre de usuario y la vamos a dejar de esta manera:
<div> <label for="usuario">Nombre:</label> <input id="usuario" type="text" name="usuario" size="20" maxsize="30" value="Escribe tu nombre..."> </div><br>El resultado es el siguiente:
2. Drop-down
Nos permite crear un cuadro desplegable con una lista de opciones. Para crearlo tendremos que hacer uso del elemento <select> y por cada ítem de la lista usaremos un elemento <option>
Usaremos el atributo "value" para diferenciar cada ítem de la lista.
Por defecto cuando abrimos la lista desplegable, el primer ítem de la lista es la opción por defecto. Para cambiar esta característica tendremos que hacer uso del atributo "selected".
Vamos a ver un ejemplo, lo añadiremos al ejemplo anterior justo debajo del ultimo elemento div:
<div> <label for="ciudad">Ciudad:</label> <select name="ciudad"> <option value="TE">Teruel</option> <option value="VA">Valencia</option> <option value="BA">Barcelona</option> <option value="M">Madrid</option> <option value="" selected="selected">Selecciona ciudad...</option> </select> </div><br>Y el resultado sera el siguiente:
3. Checkbox
Nos permite crear una o varias casillas que el usuario podrá seleccionar. Pueden resultar útiles cuando el usuario tiene que seleccionar varias opciones.
En este caso usaremos el tipo "checkbox" con tres atributos útiles:
id - nombre identificativo, único para cada checkbox
value - suele usarse el mismo nombre identificativo para que el documento HTML sea valido
name - indicara a que lista de checkboxes perteneceVamos a ver el ejemplo que añadiremos justo debajo del ultimo elemento div del ejemplo anterior:
<div>Aficiones: <br> <input type="checkbox" id="deportes" name="aficiones" value="deportes"> <label for="deportes">Deportes</label><br> <input type="checkbox" id="coches" name="aficiones" value="coches"> <label for="coches">Coches</label><br> <input type="checkbox" id="musica" name="aficiones" value="musica"> <label for="musica">Musica</label><br> </div><br>El resultado es el siguiente:
4. Radio buttons
Nos permite crear una o varias casillas de las cuales el usuario solo puede seleccionar una. Crear una lista de radio buttons es exactamente igual que el ejemplo anterior pero en este caso el tipo de entrada es "radio".
Vamos a ver el ejemplo y lo añadimos a lo anterior:
<div>Sexo: <br> <input type="radio" id="masculino" name="sexo" value="masculino"> <label for="masculino">Masculino</label><br> <input type="radio" id="femenino" name="sexo" value="femenino"> <label for="femenino">Femenino</label><br> </div><br>El ejemplo se vera de la siguiente manera:
5. Finalizar el formulario web
Para terminar nuestro formulario web simplemente tenemos que añadir el boton que el usuario pulsara para enviar la información al servidor. Para ello usamos el tipo "submit" indicando en el atributo "value" el texto que se mostrara en el botón.
Existe otra posibilidad de botón que nos puede ser útil cuando el usuario a rellenado mal el formulario y quiere limpiar todas casillas, en este caso usaremos el tipo "reset" que nos permitirá restablecer el formulario limpiando todos los datos introducidos.
Veamos su ejemplo:
<div>Sexo: <br> <input type="submit" name="submit" value="Enviar informacion"> <input type="reset" name="reset" value="Limpiar formulario"> </div><br>Y el resultado final uniendo todo lo expuesto en el articulo sera el siguiente:
sukulento ella no te ama
ResponderEliminar-+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++84684616587461324984351564+6468782555554822425678416576165479815648941654891654891659999458489434684648946854+64+998/-**-/-/*--**-**-gfdgdfgdsgddsfdsgufsegkaufgefgbuyssudfcuysdcfycfysvfyejbfu cvhd cvd cdb csdcdcsdyucydcdcbdsuychdcvedhcvedcvedcvsdvsdvsdyghyeyuheefcvycscvycvccsc h d hc hdn dsjhbbvsdhjcv xhjvbdshvccvsdhvc hsdcvjcvhcvshvchsavcahbcdhsdvasvdas
ResponderEliminargugdugdudguwagduwgaduywgduwgudywgudygwydgwydgwydgwdgwdgwdgwdgdgwydgwdgufhdifiogiodfgidofioghiosdghdiohdsioghsioghsoidghdsioghdsoighdsioghsdiogsdhioghsdoighsdoighsdighsdoighsdoighsdoighdsoighsdoighsdoighsdoighdsioghsdoighdsioghdoighdsoighdiosghdsoighsiodhgdioghdsioghsdoighsdoighsdioghsdioghsdoighdsoighsdoighsodighsodidvsajvdahsv cshcs
me puedes ayudar ingresano datos en phpmyadmin
ResponderEliminarLa mejor lección q he encontrado en toda la web, felicidades
ResponderEliminarExcelente!!!!! te mando un abrazo y felicitaciones
ResponderEliminarMuy buena! Me sirvió mucho
ResponderEliminar