Creación de formularios html

formulario html responsive

Creación de formularios html

Print Friendly, PDF & Email
Creación de formularios html
Valora esta entrada
Existen muchísima bibliografía sobre como crear formularios con html.

Sin embargo la gran mayoría de formularios son relativamente sencillos y no es necesario un conocimiento tan profundo de las etiquetas y atributos que las acompañan. Aunque esto no quita que se debe conocer el mayor número posible.

Personalmente defiendo la idea que hay que ser capaces de encontrar la información contrastada siempre que sea necesario. Y para su uso adecuado a las necesidades de cada formulario.

En la entrada de hoy hago un resumen de clase de las etiquetas y atributos que considero más importantes.

Para que saquéis provecho a esta entrada asumo que ya tenéis conocimientos previos y que esto es simplemente un repaso.

Etiquetas imprescindibles para crear formularios

Las etiquetas imprescindibles para crear formularios son:

  1. <form>  Para indicar que se trata de un formulario. <form> debe llevar como mínimo el atributo action=”” que indica a que página se enviará al usuario una vez enviado el formulario. Existe un atributo muy importante que es method=”get | post” y que si no se dice lo contrario siempre se asume como get. Recordar que el get sirve para pasar los datos vía url del navegador y que el post lo hace via el servidor.
  2. <input/> Fijaros que la etiqueta input sólo es de apertura. Los input más importantes son los que lleven el atributo type =”text | radio | checkbox | submit | reset”. Existen muchos más como number, email, date, … pero tener en cuenta que no todos los navegadores lo van a entender siempre.
  3. <select> y las etiquetas <option> que irán anidadas dentro del select.
  4. <textarea>
  5. <label> Añadiendo el atributo for=”” y el identificador id=”” al <input/> respectivo ayudaremos a que nuestro formulario sea usable y accesible. Pensar que para ordenador los dedos rechonchos no tienen problema, pero para móvil ya es otra historia. Recordar que nn dedo mide 48px aproximadamente.

Considerar que existen más etiquetas como optgroup y fieldset. Podéis consultar sobre ellas aquí.

Atributos imprescindibles

El atributo estrella es name, pues cualquier etiqueta lo puede llevar. Sirve para identificar cada etiqueta en un formulario web.

La lista de atributos imprescindibles la siguen:

  1. value muy útil cuando queremos rellenar un cajetín con un texto por defecto.
  2. placeholder muy útil cuando queremos dar instrucciones en el propio cajetín de como rellenarlo y queremos que cuando el visitante empiece a escribir este texto desaparezca.
  3. required por ejemplo pueden ser el punto crucial de cualquier validación web.
  4. hidden muy práctico cuando queremos pasar informaciones de formulario como por ejemplo el origen de los datos, alguna fecha en particular, …
  5. readonly usado por ejemplo cuando se quiere que el usuario tenga constancia de un dato pero no se quiere que pueda ser modificado.
  6. checked para indicar en un input de tipo radio o checkbox si una determinada opción está seleccionada por defecto o no.

Seguramente podríamos profundizar con más atributos como min, max, enctype,  pero pienso que lo mejor es consultar estos y otros cuando os encontréis con la necesidad de validar determinadas informaciones mediante html5.

formulario html
visionado por el formulario del formulario html de la cabecera

Entradas relacionadas:

¿Se pueden hacer listas númeradas negativas con HTML?
- 43
Ejemplos de listas numeradas negativas. Incluye código e imágenes del resultado final con distintas opciones.
Ejemplo de creación de página web con capas y migración a HTML5
- 1115
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Ejercicio html de repaso. Corrige los errores de sintaxis.
- 31
Ejercicio html dónde se plantean algunos errores comunes de alumnos al escribir html y su correción. Incluye solución.
Meta etiquetas en HTML : meta tags
- 654
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Factores que afectan al tiempo de carga de una página web
- 355
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejercicio html sobre listas anidadas para un menú de navegación
- 61
Ejercicio html dónde se práctica como anidar correctamente una lista no ordenada. Esta lista simula un futuro menú de navegación. Incluye solución.
Como usar los encabezados h1 a h6 en html
- 357
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?
- 53
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.
Enlaces en html: la etiqueta a
- 233
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Listas HTML. Etiquetas ol, ul, li, dl, dt, dd.
- 828
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.