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:

Ejemplo de creación de página web con capas y migración a HTML5
- 742
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...
Etiquetas audio y video de html5
- 24
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Meta etiquetas en HTML : meta tags
- 477
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...
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 542
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...
Como hacer espacios en blanco con html
- 117
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Qué es un favicon y para que sirve
- 100
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Factores que afectan al tiempo de carga de una página web
- 255
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...
Anclas html
- 423
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Etiquetas xmp, pre y code en HTML
- 690
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 583
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
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.