Hola que tal en esta nueva parte vamos a ver los formularios
En muchas ocasiones nos ha tocado llenar formularios en la
que tenemos que colocar datos y enviar
esos datos para muchos intereses como iniciar sesión en Facebook o en youtube
Todo mundo detesta llenar formularios así que en lo personal
vamos a pensar en cómo deben ser los formularios y en las categorías en las que
se pueden dividir
En primera si tú entras en una página y quieres
registrarte pero como nos da flojera
cuando vemos un formulario que pide más de lo necesario por ejemplo: la dirección,
la edad, etc etc.
Esto termina aburriendo a la gente y consigues menos
usuarios así que cuando estés en esto de los formularios e intenta que solo
pidan lo necesario, como por ejemplo Facebook y twitter
Puedes ver que no es mucho lo que te piden, entonces intenta
pedir lo necesario y nunca hagas formularios excesivos y aburridos
Las categorías
Estas son sacadas de mi mente así que tú saca tus
conclusiones
Tenemos los formularios de
Registro
Inicio de sesión
Datos personales
Antirobots
Búsqueda
Solicitud
Mmm y puede que existan muchos más pero estos son los más
comunes
Asi que mejor vemos las etiquetas que existen y veremos un
ejemplo para cada categoría
Primero veamos un formulario totalmente largo pero que
contenga la mayoría de tipo de inputs y y después explicare cada uno
<form action="#" method="get"> <!-- input de texto--> <input type="text" name="" value="" placeholder="input tipo texto"><br> <!-- input de password--> <input type="password" name="" value="" placeholder="input tipo password"><br> <!-- input de hidden(oculto)--> <input type="hidden" name="" value=""> <!-- input de radio--> <input type="radio" name="" value="" placeholder=""><br> <!-- input de checkbox--> <input type="checkbox" name="" value=""><br> <!-- input de submit--> <input type="submit" name="" value="input tipo submit"><br> <!-- input de color--> <input type="color" name="" value="" placeholder="input tipo Color"><br> <!-- input de date--> <input type="date" name="" value="" placeholder="input date"><br> <!-- input de datetime--> <input type="datetime" name="" value="" placeholder="input datetime"><br> <!-- input de datetime-local--> <input type="datetime-local" name="" value="" placeholder="input datetime-local"><br> <!-- input de email--> <input type="email" name="" value="" placeholder="input email"><br> <!-- input de month--> <input type="month" name="" value="" placeholder="input Month"><br> <!-- input de range--> <input type="range" name="" value="" placeholder="input Range"><br> <!-- input de tel--> <input type="tel" name="" value="" placeholder="input Tel"><br> <!-- input de time--> <input type="time" name="" value="" placeholder="input Time"><br> <!-- input de url--> <input type="url" name="" value="" placeholder="input url"><br> <!-- input de week--> <input type="week" name="" value="" placeholder="input Week"><br> <!-- input de file--> <input type="file" name="" value="" placeholder=""><br> <!-- textarea--> <textarea rows="10" cols="30">este es un textarea</textarea><br> <!-- select con option--> <select name=""> <option value="">opcion 1</option> <option value="">opcion 2</option> <option value="">opcion 3</option> <option value="">opcion 4</option> <option value="">opcion 5</option> </select><br> <!-- button--> <button type="text">tag button</button><br> </form>
Puedes ver que son muchos así que seré breve con la
descripción de cada uno
form: etiqueta que indica el inicio de un formulario es muy importante que lleve los atributos
action, method
el action sirve para que la pagina que se coloque dentro de el es el que va a recibir los datos
method sirve para indicar el tipo con que se va a enviar los datos ya sea post o get(que se vera mas adelante)
el action sirve para que la pagina que se coloque dentro de el es el que va a recibir los datos
method sirve para indicar el tipo con que se va a enviar los datos ya sea post o get(que se vera mas adelante)
<form action="pruebas_submit" method="get" accept-charset="utf-8"> </form>
Input: etiqueta que sirve para colocar un espacio en donde
el usuario coloque un tipo de dato definido. Hay muchos así que explicaremos
cada uno
<input type="" name="" value="" placeholder="">
Así que veamos cada una de ellas
Text: son inputs de tipo texto
<input type="text" name="" value="" placeholder="input tipo texto">
Password: son inputs de tipo contraseña
<input type="password" name="" value="" placeholder="input tipo password">
hidden: input oculto que en muchas ocaciones se usa para enviar datos que el usuario no ve
<input type="hidden" name="" value="">
Radio: son inputs de tipo radio como botones redondo seleccionables
y que se puede seleccionar uno
<input type="radio" name="" value="" >
Checkbox: inputs de tipo Checkbox seleccionable cuadrados a
diferencia de los radio se pueden seleccionar varios
<input type="checkbox" name="" value="">
Submit: inputs de tipo submit el indicado de enviar los
datos que coloquemos en los demás inputs
<input type="submit" name="" value="input tipo submit">
Color: input que muestra una paleta de colores (funciona
solo en chrome y en opera)
<input type="color" name="" value="" placeholder="input tipo Color">
Date: input de tipo date que permite al usuario seleccionar
una fecha (funciona solo en chrome, opera,safari)
<input type="date" name="" value="" placeholder="input date">
Datetime: input que permite al usuario seleccionar hora y
fecha (funciona solo en opera y safari)
<input type="datetime" name="" value="" placeholder="input datetime">
datetime-local: input que permite seleccionar una fecha y
hora sin zona horaria (funciona solo en chrome, opera, safari)
<input type="datetime-local" name="" value="" placeholder="input datetime-local">
Email: input de tipo correo electrónico (funciona para todos
menos safari)
<input type="email" name="" value="" placeholder="input email">
Month: input que permite seleccionar el mes al usuario
(funciona solo en chrome, opera y safari)
<input type="month" name="" value="" placeholder="input Month">
Range: input que permite al usuario seleccionar un
rango(funciona solo en ultima versiones de los navegadores menos en firefox)
<input type="range" name="" value="" placeholder="input Range">
Tel: input de tipo teléfono (por el momento no funciona para
ningún navegador)
<input type="tel" name="" value="" placeholder="input Tel">
Time: input que
permite al usuario seleccionar el tiempo(funciona solo en chrome, safari y
opera)
<input type="time" name="" value="" placeholder="input Time">
url: input que permite colocar una url
<input type="url" name="" value="" placeholder="input url">
Week: input que permite seleccionar una semana al usuario
<input type="week" name="" value="" placeholder="input Week">
Se ven que son muchos no?
La verdad es que muchos de estos no los ocupes muy seguido
pero hay otros que si así que ya vimos los tipos ahora veremos otros tipos que
existen aparte de los inputs y son:
Textarea: sirve para colocar un texto de diferentes líneas
<textarea rows="10" cols="30">este es un textarea</textarea>
También hay un input en donde puedes subir archivos
File: input que permite subir archivos al servidor
<form enctype="multipart/form-data" action="#" method="POST"> <input name="uploadedfile" type="file" /> </form>
Label: etiqueta que sirve como identificador de un input
.generalmente tiene un atributo for
<label for="mujer">mujer</label>
Select: etiqueta que permite seleccionar varias opciones
<select name=""> <option value="">opcion 1</option> <option value="">opcion 2</option> <option value="">opcion 3</option> <option value="">opcion 4</option> <option value="">opcion 5</option> </select>
Button: etiqueta que sirve como input
<button type="text">tag button</button>
Por último y no hacer muy excesiva la entrada vamos a ver ejemplos
de la categoría que les explique anteriormente
Formulario de registro correcto:
<form action="#" method="post" accept-charset="utf-8"> <label for="nick">Nick</label><br> <input type="text" name="nick" value="" placeholder=""><br> <label for="correo">Tu correo</label><br> <input type="email" name="correo" value="" placeholder=""><br> <label for="password">Contraseña</label><br> <input type="password" name="password" value="" placeholder=""> </form>
Formulario de inicio de sesión:
<form action="#" method="post" accept-charset="utf-8"> <label for="nick">Nick</label><br> <input type="text" name="nick" value="" placeholder=""><br> <label for="password">Contraseña</label><br> <input type="password" name="password" value="" placeholder=""> </form>
Mmm yo creo que el de datos personales es muy largo así que
ese lo dejamos para luego aaaa y también el de solicitud
Formulario de antirobots:
Estos son los que vemos comúnmente con imágenes y me imagino
que conoces el
Formulario de búsqueda:
Son muy sencillos solo un input de texto y un botón como el
de google
Así que fue muy algo y hasta aquí la dejamos y seguimos con la segunda parte en el otro
Saludos
No hay comentarios:
Publicar un comentario