Crear formularios con HTML5

Home » Blog » Crear formularios con HTML5

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>

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023

Comentarios

Deja una respuesta