Formularios html5

 

Desde el enfoque de un programador web los formularios son la parte más importante en una aplicación ya que con los formularios adquirimos información de los usuarios finales, pero si lo vemos desde la perspectiva de un usuario tiene que ser lo más sencillo posible, agradable y en algunas ocasiones rápido.

En el ámbito laboral esta parte para muchos es desarrolladores es el pan de cada día, esto es debido a  que la mayoría de los clientes  desea tener interacción con los usuarios, ya sea creando nuevo contenido, quitándolo o actualizándolo y todo esto es fácil de hacer con html.

En este pequeño tutorial hablaremos de la construcción de un formulario de registro tomando en cuenta los nuevas etiquetas de html5 y nos enfocaremos a dos etiquetas básicas para el desarrollo de un formulario las cuales son : “form” e “input”.
La etiqueta Form

Esta etiqueta es la que definirá el formulario también el método de envió de los datos ya sea de tipo GET o POST más adelante explicare como  se usan estos métodos de envió. También podemos darle un nombre a nuestro formulario en caso de ocupar más de uno.

para inicializar un formulario escribiremos la siguiente línea :

<form  action=”#” name=”registro_usuario” method=”post”>

</form>

Nota: action define hacia que archivo se enviaran los datos obtenidos podemos dejarla vacía o poner un símbolo de gato lo cual representa que se envían al mismo archivo.

La etiqueta input

Esta es la que define muchos de los datos básicos del formulario en esta podemos encontrar

el tipo de casilla: checkbox ,text,password,email,y otros tipos.

al igual que la etiqueta form tendrá un nombre y gracias a las nuevas propiedades de html5 podemos agregarle texto predefinido validaciones mínimo y máximo de caracteres.

el siguiente codigo es un ejemplo de un formulario.

<article id=”form”>

<h2>Registrate</h2>

<form  action=”#” name=”registro_usuario” method=”post”>

<input type=”text” name=”nombre_usuario” id=”usuario” placeholder=”escribe tu nombre”/><br/>

<input type=”text” name=”appellido_paterno_usuario” id=”apellido_materno” placeholder=”escribe tu apellido materno” /><br/>

<input type=”text” name=”appellido_materno_usuario” id=”appellido_paterno” placeholder=”escribe tu apellido paterno” /><br/>

<input type=”text” name=”nickname_usuario”  id=”nickname” placeholder=”escribe tu nombre de usuario”/><br/>

<input type=”text” name=”email_usuario”  id=”email” placeholder=”escribe tu correo electronico” pattern=”[^ @]*@[^ @]*”/><br/>

<h3>acepto las <a href=”#”> politicas de privacidad</a></h3><input type=”checkbox” name=”politicas_usuario” id=”politicas” /><br/>

<input type=”submit” name=”aceptar” /><br/>

</form>

Ya que hemos agregado el formulario a nuestra página le agregaremos las siguientes líneas a nuestro archivo de css.

#form {

width: 30%;

background: rgb(165, 165, 165);

}

input {

position: relative;

margin: 4pt 70pt;

width: 130pt;

height:15pt

}

input[type=”submit”] {

width: 60pt;

}

nos dará el  resultado siguiente:

 

type: esta propiedad define que tipo de campo sera el que utilizamos y puede tomar cualquiera de los siguientes valores:

text,radio,checkbox,password,color,date,datetime,datetime-local,email,month,number,range,search,week,tel,time y url.

su formato es :

type=”[tipo]”

placeholder: es una propiedad que nos permite incrustar texto en nuestro formulario

su formato es :

placeholder=”[texto]”

 

pattern: esta propiedad nos permite hacer validaciones  mediante expresiones regulares, en este momento no es una buena práctica realizar las validaciones con esta etiqueta pero más adelante ayudara mucho para realizar las validaciones.

su formato es:

pattern=”[exprecion regular]”

 

Como se puede notar agregue un checkbox con un link que debe guiarnos hacia las políticas de privacidad, esto antes no se ocupaba pero debido a que nosotros podemos trabajar con datos sensibles de nuestros usuarios tenemos que tener en cuenta un esquema en el cual aclaremos a los usuarios acerca del tratamiento de su información.

Como se puede notar agregue un checkbox con un link que debe guiarnos hacia las políticas de privacidad. Esto antes no se ocupaba, pero debido a que nosotros podemos trabajar con datos sensibles de nuestros usuarios, tenemos que tomar en cuenta un esquema en el cual aclaremos a los usuarios acerca del tratamiento de su información.