Formularios HTML

Los formularios nos permiten recibir un conjunto de datos que son proporcionados por los usuarios que visitan nuestro sitio web.

Una vez recibidos los datos recopilados por el formulario, estos se envían para su tratamiento al servidor.

Algunos ejemplos de formularios que podemos ver habitualmente en nuestro día a día son:

  • Registro de usuario
  • Información de contacto
  • Reset de password

Etiqueta Form

Para crear un formulario utilizamos la etiqueta <form> que será el contenedor de los elementos del formulario. Mediante a la etiqueta <form> le indicaremos al navegador que el contenido del interior de estás etiquetas será un formulario. Form es una especie de contenedor (una etiqueta) que englobará el resto de los elementos del formulario.

¿Qué elementos puede contener un Form?

Los formularios sirven para recibir datos, que son introducidos por el usuario. Existen muchos elementos y maneras de organizar los formularios. Como no podemos explicarlos todos, ya que daría para un curso, vamos a hablar sobre los principales. Que son:

Veremos un ejemplo de un formulario que los combina todos al final del artículo, pero el objetivo actual es entender los diferentes tipos y cuáles son sus diferencias

  • Inputs (picados por teclado): son el principal elemento, el elemento más importante, especifica que un campo es de entrada y que permite que el usuario pueda ingresar datos.



    • Vamos a ver algunos de los principales (aunque no todos):
      • <input type=”text”>: es el valor por defecto si no definimos un type que describa el tipo de input que vamos a escribir. Especifica que el input aceptará valores de texto (valen números, letras y caracteres especiales como “@”, “-“, etc).
      • <input type=”number”>: especifica un input que solamente aceptará valores numéricos.
      • <input type=”password”>: especifica un input de password, los valores introducidos no se mostrará por pantalla, en su lugar, se verán caracteres como: •••••.

  • Labels: ¿Cómo podemos saber que tenemos que introducir en un input? Pues para ello, utilizaremos los labels (su traducción podría ser algo así como etiquetas) o etiquetas descriptivas con el fin de informar que tenemos que introducir en el label. Un ejemplo podría ser un input de un nombre acompañado de un label/etiqueta de “Nombre:”

  • CheckBox: nos permiten seleccionar varios items (elementos) de un conjunto de elementos. Realmente son un tipo de input, pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales.

Si seleccionamos elementos por ejemplo:

  • ComboBox: nos permiten seleccionar un solo valor sobre una lista (que se despliega) con varios items. Realmente son un tipo de input pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales.

  • RadioButtom: nos permiten seleccionar un solo valor sobre varios items (sin lista). Realmente son un tipo de input pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales. Un ejemplo:

Si seleccionamos un sexo (si seleccionamos otro se cambiará):

  • Botones: nos permitirán confirmar acciones o incluso hasta enviar el propio formulario. Realmente son un tipo de input pero los hemos sacado de dicha categoría debido a que su estética y comportamiento es bastante diferente a los inputs normales.
    • <input type=”submit”>: hemos preparado varios inputs del formulario para su envío pero una vez están todos completados ¿Cómo lo enviamos? Para ello, necesitamos crear el famoso input de envío de formulario. El botón de Submit que nos permitirá realizar el envío (es muy común verlo bajo con el texto de “send” o “submit” en inglés o si es en Castellano como “enviar”).

Atributos de Form: Action, method y target

Hasta este punto, solamente hemos definido el formulario y añadido campos en su interior. Pero ¿Qué hacemos con los datos de su interior? No le hemos indicado ni cómo será enviada la información contenida en su interior ni hacía donde la enviaremos. Para ello utilizamos:

  • Action: Le especifica al navegador donde debe enviar los datos del formulario, es decir, ruta del servidor que los manejará/recibirá.
  • Method:  nos permite indicarle al navegador el método con el que será enviado el formulario GET o POST.
    • La principal diferencia entre utilizar el método GET y el método POST radica en la forma en que estos datos del formulario se envían al pulsar el botón de Send/Enviar. En el caso del método GET los datos se envía utilizando la URL. En cambio, en el método POST, los datos se envían de tal forma que no podemos verlos (en segundo plato de tal forma que “están ocultos al usuario”).
  • Target: nos permite especificarle al navegador dónde mostrará el resultado del proceso / la respuesta que se recibe después de enviar el formulario. Tenemos varias opciones, las principales son:
    • _blank: Abrirá otra pestaña del navegador con el resultado del envío. Ejemplo:
    • _self: mostrará el resultado del envío del formulario en la actual pestaña del navegador. Por tanto, el resultado será el mismo que con _blank pero en la pestaña actual (No abrirá otra). Ejemplo:
    • _parent: muestrá el resultado en el FRAMESET padre, actualmente ya no se recomienda trabajar con FRAMESET por lo que están OBSOLETOS.
    • _top: Es el valor que usaremos al cargar una página externa. Utiliza todo el espacio de la ventana del navegador destruyendo toda la estructura de FRAMESETS (OBSOLETO ya que como con _parent, los FRAMESET están obsoletos).

Ejemplo de formulario (sin CSS):

Si realizamos un formulario sin CSS, nos encontramos con el problema de la ubicación de las cajas.

Podremos ver que al visualizarlo en el navegador tendremos un caos enorme:

Esto es debido a las propiedades por defecto de los elementos como ya vimos en el artículo de: Diferencias entre display: block, inline, inline-block y none .En este caso tiene, la propiedad inline y por ello se ven todas juntas.

Con BR

Mucha gente utiliza los <BR> para forzar el salto de línea:

Aunque no es del todo correcto, es una solución bastante rápida.

Pero las etiquetas <BR> son precisamente elementos sintácticos de HTML que tienen como fin separar diferentes partes de un documento Web, como pueden ser las secciones. Y no están diseñados por tanto para ello. Y  menos aún para usarlos de esta manera tan abusiva (hasta dos veces por input).

Ejemplo de formulario (con CSS):

Con Listas UL

Otros developers, también utilizan listas:

Con Listas UL y CSS

Para mi tiene más sentido utilizar las listas UL que los BR. Tan solo tendríamos que eliminar los discs (puntitos) de las listas con CSS y añadir un margin-top:

Con Field Set y CSS

Existen muchas maneras de realizar el formulario. Vamos a poner un ejemplo en el que vamos a añadir una nueva etiqueta Field Set → que nos añadirá un borde sobre la zona sobre la que lo realizamos (se puede añadir también sobre todo el formulario). Además, añadiremos algunos DIVS.

El resultado será:


Esto es todo por hoy. Espero pero que os haya gustado. Un saludo 🙂

15 comentarios

  1. I think that everything posted made a bunch of sense.

    However, think about this, suppose you were to create a killer headline?
    I ain’t suggesting your information isn’t solid., but suppose you added a
    post title that makes people want more? I mean Formularios HTML – Java desde 0 is a little plain. You
    should glance at Yahoo’s front page and note how they write post headlines to get viewers to click.
    You might add a related video or a related picture or two to get readers
    excited about what you’ve got to say. In my opinion, it would bring your posts a
    little livelier.

  2. Every weekend i used to visit this web site, because i want enjoyment, since this
    this site conations truly good funny material too.

  3. Hello, all is going well here and ofcourse every
    one is sharing information, that’s in fact excellent, keep up writing.

  4. Hi! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in trading links or maybe guest
    writing a blog article or vice-versa? My blog discusses a lot of the same topics as yours and
    I feel we could greatly benefit from each other.
    If you might be interested feel free to send me an email.

    I look forward to hearing from you! Superb blog by the way!

  5. Thanks for youjr рersonal marvеlous posting!
    I certɑinly enjoyеd readіng it, you can be a great author.
    I will be sure tⲟ bookmark your blog and may come back someday.
    Iwantt to encourage yurself to continue your great job, have a nice afternoon!

    Also visit my ԝeb-site :: Demen 303

  6. Howdy! Do you use Twitter? I’d like to follow you if that would be ok.
    I’m absolutely enjoying your blog and look forward to new updates.

  7. Piece of writing writing is also a fun, if you be familiar with afterward you can write otherwise it is difficult
    to write.

  8. Hiya! Quick question that’s totally off topic. Do you know how to make your site mobile friendly?
    My blog looks weird when viewing from my apple iphone.
    I’m trying to find a theme or plugin that might be able
    to fix this problem. If you have any suggestions, please share.

    Appreciate it!

  9. I do not even know how I finished up here, however I assumed
    this put up was once good. I do not know who you might be but certainly you’re going to a well-known blogger if you
    are not already. Cheers!

  10. I will immediately clutch your rss as I can’t in finding your
    e-mail subscription link or newsletter service.

    Do you have any? Kindly let me know so that I may subscribe.

    Thanks.

  11. Heya i am for the primary time here. I came across this board and I to
    find It really useful & it helped me out much.
    I hope to offer something again and aid others like you aided me.

  12. Appreciate this post. Let me try it out.

  13. Hello, I think your website could be having browser compatibility problems.
    When I look at your website in Safari, it looks fine
    but when opening in Internet Explorer, it’s got some overlapping issues.
    I simply wanted to provide you with a quick heads up!
    Besides that, great website!

  14. I really like your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone
    to do it for you? Plz respond as I’m looking to construct
    my own blog and would like to know where u got this from.
    many thanks

  15. I’m not sure exactly why but this weblog is loading extremely slow for me.

    Is anyone else having this issue or is it a problem on my end?
    I’ll check back later and see if the problem still exists.

    quest bars http://bitly.com/3jZgEA2 quest bars

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar