Con la aparición del HTML5 se han mejorado muchas cosas que antes eran mucho más complejas, como hemos visto introducir un vídeo ahora es muy sencillo. Pero desde mi punto de vista una de las tareas que más se han facilitado con el HTML5 es la creación de formularios, antes era muy complejo controlar que los campos se usen de forma adecuada, por ejemplo que un campo numérico tenga números, que tenga formato fecha, etc. Ahora todo se hace mucho más sencillo.
Elementos básicos de un formulario
En primer lugar vamos a ver qué elementos se necesitan para crear un formulario básico:
<form action="html5-formularios.html" method="get"> <label form="nombre">Nombre:</label><label form="nombre">Nombre:</label> <input name="nombre" type="text"> <br><br> <input type="submit" value="ENVIAR"> </form>
- Form: Es la etiqueta que define que estamos creando un formulario. Los atributos básicos son:
- action: Establece que página se carga una ve enviado un formulario, en este ejemplo estamos diciendo que se cargue la misma página pero podríamos enviar al usuario a una de agradecimientos.
- method: Es la forma en la que se envían los datos recogidos en el formulario. Al final lo que queremos con un formulario es recoger la información que rellena el usuario, y debemos establecer si lo mandamos vía URL (get – No recomendable) o POST (ocultos en la petición). La recogida de la información se hace mediante programación sea con: PHP, ASP, Javascript, etc.
- Label: Es una etiqueta para relacionar campos (inputs) con sus textos. Es decir si tenemos 2 campos necesitaremos identificarlos para que el cliente spa que meter en cada uno de ellos, el atributo form es de uso interno y sirve de identificación: este texto es para este campo, etc.
- Input type=»text»: Los inputs son campos que debe rellenar el usuario.
- Type = text: Define el tipo de campo. En este caso es text, por que queremos crear un campo de tipo texto.
- Name: Es el identificador del input y se usa en programación para recoger su información.
- Input type=»submit»:
- Type = submit: Indicamos que es un campo de envió, y su diseño será tipo botón. (Este diseño podemos cambiarlo con CSS)
- Value: se establece el valor por defecto del campo, en este caso ponemos ENVIAR, que es lo que verá el usuario. Los campos de typo: text, number, etx. También pueden llevar un valor por defecto.
Los tipos de campos
En la parte de abajo de esta entrada puedes ver un enlace con los ejemplos visuales de estos campos:
- Input type=»text»: Hemos visto este tipo de campo arriba.
- Input type=»radio»: Se usan para que el usuario tenga que seleccionar una opción entre varias disponibles.
- select: Su uso es un poco diferente de los inputs, y se usa para lo mismo que el input type radio pero en formato desplegable.
- textarea: Es un campo de texto pero más grande, pensado para que el usuario pueda meter texto sin límites. Los inputs están pensados para asuntos o textos más cortos (hasta 255 caracteres).
- datalist: Su funcionamiento es el mismo que el select pero en este caso se puede buscar, es muy útil si el listado es muy grande.
- input type=»password»: Se usa para campos que tienen que ir cifrados, al escribir se muestra puntos no lo que se escribe.
- input type=»checkbox»: Es similar al input type radio, pero con la diferencia que en este se pueden seleccionar varias opciones.
- input type=»color»: Este campo genera un selector de colores.
- input type=»date»: Con este formato forzamos a que el usuario meta una fecha con día, mes y año. Puede seleccionar una fecha de un calendario.
- input type=»datetime»: Igual que el anterior solo que fuerza a que exista hora y minuto.
- input type=»email»: Fuerza a que la entrada sea un email comprobando que tenga el formato adecuado.
- input type=»number»: Fuerza a que la entrada sea un número, existen atributos que hacen que su funcionamiento varié considerablemente, los vemos en el siguiente bloque.
- input type=»range»: Muestra una barra desde la que el usuario tiene que establecer un valor (arrastrando el ratón sobre la barra) dentro de los límites de la barra.
- input type=»search»: Es un input con formato de buscador.
- input type=»time»: Input para insertar hora y minuto.
- input type=»url»: Es un campo que se usa para insertar URLs, los navegados validan que tenga un formato adecuado, incluso algunos móviles añaden .com automáticamente.
- input type=»week»: Te permite introducir número de semana y año.
- input type=»file»: Es un campo especial ya que permite insertar adjuntos.
Los atributos generales y particulares
Los atributos son características que se pueden añadir a los campos para modificar su comportamiento por defecto, empecemos con los atributos (más importantes que no únicos) que modifican el funcionamiento general del formulario:
- Form:
- Action: Como he comentado se usa para indicar a que página ir cuando el usuario envié los datos del formulario.
- Method: Existen 2 opciones POST que envía la información oculta (recomendado) o GET que envía la información por la URL (la URL tiene límite de caracteres).
- enctype: Se usa solo con POST, y es necesario incluirla para el envió de archivos: adjuntos: enctype=»multipart/form-data»
- Generales para todos:
- Id: Se usa para identificar y dar estilos o trabajar con javascript con el campo, el ID tiene que ser único por página es decir no pueden existir varios IDs iguales por página.
- Class: El uso es el mismo que el ID, la diferencia es que en este caso pueden exitir varios campos con el mismo nombre, por ejemplo: 4 campos con el mismo tamaño pueden llamarse class=»tamanio».
- readonly: Se usa para que el campo solo pueda ser visto pero no modificado.
- disabled: Se usa para marcar el campo como deshabilitado.
- size: Tamaño del campo.
- name: Es el nombre del campo, es importante ya que es la forma de enviar la información.
- Inputs:
- maxlenght: Número de caracteres permitidos.
- placeholder: Texto que se presenta dentro del campo, y que se borra cuando el usuario escribe.
- pattern: Permite crear reglar de forma que el usuario tenga que, como en el ejemplo de abajo, introducir solo 3 caracteres.
- Radio y checkbox:
- Checked: Indica que opción esta seleccionada por defecto.
- Textarea:
- Row y cols: Sirven para establecer las dimensiones del área de escritura.
- Select y datalist:
- Selected: Se usa para indicar que opción esta seleccionada por defecto.
- date y datetime:
- min y max: Establece los límites entre fechas. Fecha desde y fecha hasta.
- number:
- min y max: igual que el caso anterior permite establecer límite superior e inferior, y el usuario no puede seleccionar otro valor.
- step: Permite establecer el salto entre los números seleccionables. por ejemplo, si establecemos un salto de 3, solo podremos elegir el 3,6,9,12, etc.
- file:
- multiple: Permite que se suban varios ficheros a la vez.
Existen otros atributos y en caso de necesitas algo especial te recomiendo que escribas en Google el campo y busques información detallada de cada uno de ellos.
Código fuente final
<form action="html5-formularios.html" method="get" autocomplete>
<h3>text</h3>
<label form="nombre">Nombre:</label>
<input name="nombre" type="text" value="" readonly disabled size="40" maxlength="10" pattern="[A-Za-z]{3}"
placeholder="First name">
<h3>radio</h3>
<input type="radio" name="gender" value="male" checked> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
<h3>select</h3>
<label form="cars">cars:</label>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<h3>textarea</h3>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<h3>datalist</h3>
<label form="nombre">Buscador:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<h3>password</h3>
<label form="password">Keyword:</label>
<input type="password" name="psw" required>
<h3>checkbox</h3>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
<h3>Color</h3>
<label form="color">Color:</label>
<input type="color" name="favcolor">
<h3>Fecha</h3>
<label form="date">Fecha:</label>
<input type="date" name="bday" min="2000-01-02">
<h3>datetime</h3>
<label form="datetime-">datetime:</label>
<input type="datetime-local" name="bdaytime">
<h3>email</h3>
<label form="email">email:</label>
<input type="email" name="email" autocomplete="off">
<h3>number</h3>
<label form="number">numero:</label>
<input type="number" name="quantity" min="1" max="25" step="3">
<h3>points</h3>
<label form="points">numero desde y hasta:</label>
<input type="number" name="points" min="0" max="100" step="10" value="30">
<h3>range</h3>
<label form="range">rango:</label>
<input type="range" name="points" min="0" max="10">
<h3>search</h3>
<label form="search">search:</label>
<input type="search" name="googlesearch">
<h3>time</h3>
<label form="time">Hora:</label>
<input type="time" name="usr_time">
<h3>url</h3>
<label form="url">url:</label>
<input type="url" name="homepage">
<h3>week</h3>
<label form="week">semana año:</label>
<input type="week" name="week_year">
<h3>file</h3>
<label form="fichero">ficheros:</label>
<input type="file" name="img" multiple>
<br><br>
<input type="submit" value="Submit">
</form>
Deja una respuesta