Formularios Semánticos: el regreso

13/Oct/2006 146

En una oportunidad previa, mostré una técnica para construir formularios tableless, o sea, sin las famosas tablas que tanto nos ayudaron hace algún tiempo. Sin div’s, solamente label e input fueron necesarios. Bien, en esta ocasión, seguiré con este apasionante e intrigante tema, pero se motrarán 2 variaciones del mismo formulario, pero con diferentes diseños. Dependiendo de tus necesidades, más de alguno puede servirte.

El concepto de hoy: construir semánticamente (hacerlo accesible a los browsers y que sean relevantes para los buscadores, tal como lo recomienda la W3C). La clave está en 3 tags: fieldset, legend y label.

  • La etiqueta fieldset permite agrupar controles y etiquetas que estén relacionados, haciendo que el formulario sea más comprensible para los usuarios desde un punto de vista visual y conceptual, a la vez que incrementa la usabilidad y la accesibilidad, ya que estos campos podrían ser utilizados al realizar saltos entre campos con la tecla tab o interpretados por navegadores que incorporen funciones de generación de voz (recuerden, accesibilidad a discapacitados).
  • La etiqueta legend permite asignar un título a un fieldset, aumentando los valores de usabilidad y accesibilidad.
  • La etiqueta label sirve para representar el texto asociado a controles que no tienen implícitamente un valor de texto. Los controles que no tienen labels implícitos, como los campos de texto, radios o checkboxes por ejemplo, pueden utilizar etiquetas label para indicar el texto que les corresponde.

La forma de diseñar un formulario correctamente, es la siguiente:

<form>
     <fieldset>
          <legend>Título del Form</legend>
          <label>Nombre input: <input name="" type=""/></label>
     </fieldset>
</form>

Ahora puedes darle el estilo que quieras a las etiquetas, o tags, logrando el diseño que estimes adecuado para tu proyecto web. Nótese que el fieldset, por defecto, agrupa visualmente todo lo que contiene, con un borde gris contínuo. Esto suele utilizarse con fines estéticos, lo que puede quitarse fácilmente con un border: none; Otro detalle es que si no deseas que tu formulario tenga un título en legend, basta con darle la propiedad display:none; en tu hoja de estilos. Pero es importante tenerla siempre en tu HTML con el texto correspondiente, sólo que no se desplegará.

Formulario Vertical: es el clásico formulario encontrado en miles de millones de sitios. Nada de otro mundo, pero esta vez estará bien construído.

Ver ejemplo formulario vertical.

Formulario Horizontal: este tipo de formulario no es muy común de verse, salvo en barras de logueo horizontales. El botón de Enviar puede estar al lado de los elementos, o bajo ellos, según se prefiera (basta quitar el <br /> que lo antecede). En este caso, el secreto está en flotar los labels a la izquierda, cosa que cada nuevo campo de texto se vaya poniendo al lado derecho del anterior. Véase el código fuente para hacerse la idea.

Ver ejemplo formulario horizontal.

Dudas, consultas y sugerencias, ya saben. Comenten.

Comentarios

  1. Bodgrf [#]

    ivermectin for covid – stromectol tab price covid and ivermectin

  2. Zzskpd [#]

    viagra for female online – viagra 150mg price buy viagra online without a prescription

  3. Zvrqcp [#]

    generic sildenafil paypal – where can you buy viagra in canada viagra cost mexico

  4. Vnccft [#]

    lyrica for sale uk – online pharmacy reviews perscription drugs from canada

  5. Rgvfif [#]

    azithromycin tablets – zithromax 250mg pills zithromax 500mg price

  6. Odqpbi [#]

    ordering furosemide – lasix 20 buy furosemide 100 mg

  7. Qtzvzv [#]

    furosemide tablets uk – furosemide 40 mg coupon lasix vs furosemide

  8. Mjcyrx [#]

    generic clomiphene – generic clomid 25mg clomid uk

  9. Ilwojx [#]

    buy clomiphene online – bbclomid clomid generic

  10. Qynflu [#]

    buy sildenafil mexico – viagra price with prescription cheap viagra generic best price

  11. Zqonsc [#]

    buy cheap viagra usa – brand viagra 50mg online chewable sildenafil

  12. Pckuoz [#]

    how can i get cheap cialis – cialis pills online india how to order generic cialis

  13. Kyoisg [#]

    stromectol pill price – ivermectin malaria ivermectin 0.08

  14. Czvtwl [#]

    real casino – casino online usa play for real online casino games

  15. Tiswiv [#]

    live casino slots online – online casino games for real money hollywood casino

  16. Aejvdk [#]

    erectile dysfunction medicine – best ed pills where to buy otc ed pills

  17. Tuymvs [#]

    over the counter ed pills – treatments for ed medicine for impotence

  18. Aipvkq [#]

    average cost of prednisone 20 mg – prednisone 20 mg tablet cost prednisone 0.5 mg

  19. Vnrsdf [#]

    prednisone for tinnitus – buy prednisone 10mg online buy 10 mg prednisone

  20. Sfivda [#]

    sildenafil prices in india – discount pharmacy viagra viagra gel

  21. steph curry shoes [#]

    I as well as my buddies were checking out the great recommendations from your web site and then all of the sudden got a horrible suspicion I had not thanked the site owner for those secrets. All the guys appeared to be totally warmed to read all of them and now have truly been taking pleasure in those things. Appreciation for genuinely so accommodating and also for considering some great information most people are really eager to be aware of. Our honest regret for not expressing appreciation to you sooner.

  22. kd13 [#]

    I’m also commenting to make you understand what a beneficial discovery my child developed reading through your blog. She came to understand plenty of details, with the inclusion of what it is like to possess a wonderful coaching nature to make the rest smoothly master certain specialized subject areas. You actually surpassed our own expected results. I appreciate you for providing such important, trusted, edifying as well as unique tips on this topic to Gloria.

  23. kobe shoes [#]

    My wife and i felt quite cheerful when Chris managed to finish off his basic research through the ideas he acquired from your own web page. It is now and again perplexing to just be freely giving secrets which some others might have been selling. We really understand we have got the blog owner to appreciate for this. The most important illustrations you made, the easy blog menu, the relationships your site aid to instill – it is most wonderful, and it’s facilitating our son in addition to our family do think this subject is excellent, which is certainly truly essential. Many thanks for all the pieces!

  24. kd shoes [#]

    I have to express my thanks to you just for rescuing me from this type of setting. Just after looking through the the web and coming across ways that were not productive, I believed my life was well over. Existing minus the solutions to the difficulties you have sorted out through the posting is a critical case, as well as those which might have badly damaged my entire career if I hadn’t discovered your site. Your own training and kindness in dealing with a lot of stuff was very useful. I don’t know what I would have done if I had not discovered such a step like this. I’m able to at this moment look ahead to my future. Thanks very much for your skilled and result oriented help. I won’t be reluctant to suggest the website to any person who desires care about this problem.

  25. jordan retro [#]

    Thank you for your whole hard work on this website. My daughter take interest in engaging in internet research and it’s really simple to grasp why. A number of us learn all regarding the dynamic medium you give rewarding secrets by means of the web site and welcome contribution from people about this topic then our simple princess has been understanding a lot of things. Enjoy the remaining portion of the new year. You are always carrying out a tremendous job.

  26. ivermectin1.com [#]

    stromectol medication Formularios Semanticos: el regreso | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ stromectol 12mg

  27. lebron 18 [#]

    Thank you so much for giving everyone such a nice possiblity to check tips from this site. It is always very ideal and as well , stuffed with a lot of fun for me and my office co-workers to visit your web site at a minimum three times a week to read the new things you have got. And lastly, we are certainly astounded with your spectacular hints served by you. Certain two tips in this post are unquestionably the most effective I have had.

  28. offwhite [#]

    I wanted to put you one bit of observation in order to thank you again for all the extraordinary pointers you have discussed on this website. It was simply wonderfully open-handed of you to deliver extensively all many of us might have sold for an ebook to get some money for themselves, and in particular now that you could possibly have done it if you considered necessary. The creative ideas also worked to be the good way to know that many people have the same eagerness similar to mine to know a lot more when considering this matter. I am certain there are millions of more fun sessions up front for folks who see your website.

  29. curry 5 [#]

    I precisely wished to appreciate you again. I’m not certain the things I would’ve accomplished without the actual aspects documented by you on such field. Completely was a real frightening problem for me personally, but understanding your well-written way you dealt with it made me to leap with gladness. I’m just grateful for the advice and even expect you know what an amazing job that you are putting in teaching others through the use of your webpage. More than likely you’ve never encountered all of us.

  30. stone island jacket [#]

    I together with my guys appeared to be going through the excellent suggestions found on your web site while immediately I got a terrible feeling I never expressed respect to the site owner for those techniques. Those boys ended up certainly stimulated to study all of them and already have surely been enjoying them. Appreciate your turning out to be indeed kind and then for pick out variety of smart tips most people are really eager to learn about. Our honest apologies for not expressing gratitude to earlier.

  31. supreme [#]

    I enjoy you because of your entire labor on this blog. My aunt take interest in making time for internet research and it’s easy to understand why. I notice all concerning the lively form you present powerful solutions via this blog and as well invigorate response from some others on that idea then our own daughter is without question being taught a lot. Take pleasure in the rest of the new year. You are always conducting a terrific job.

  32. jordan shoes [#]

    I must express my love for your generosity supporting those people that absolutely need help on this one subject. Your personal dedication to passing the solution up and down ended up being astonishingly insightful and have continually empowered most people like me to attain their objectives. Your entire helpful key points denotes a lot a person like me and far more to my peers. With thanks; from everyone of us.

  33. jordan 6 [#]

    I wanted to make a small remark so as to thank you for all of the nice concepts you are posting on this site. My time intensive internet look up has now been paid with useful facts and strategies to exchange with my friends. I ‘d repeat that we site visitors are really blessed to be in a useful website with so many marvellous people with interesting tips and hints. I feel very much grateful to have come across your webpages and look forward to plenty of more fun moments reading here. Thanks a lot once more for everything.

  34. air jordan [#]

    My husband and i felt excited Raymond managed to carry out his preliminary research through the entire ideas he discovered when using the site. It is now and again perplexing just to be giving for free strategies some other people could have been trying to sell. And now we fully understand we have the blog owner to be grateful to for this. These explanations you made, the simple website navigation, the relationships you will make it possible to foster – it is all superb, and it’s really helping our son in addition to our family reckon that the idea is cool, which is certainly quite pressing. Thank you for everything!

  35. yeezy [#]

    I would like to express thanks to this writer for bailing me out of this particular dilemma. Right after searching through the world-wide-web and coming across strategies which are not helpful, I believed my entire life was over. Existing without the answers to the problems you have solved as a result of your good article content is a crucial case, and the ones that might have negatively damaged my entire career if I hadn’t come across your web blog. That training and kindness in controlling all the pieces was useful. I’m not sure what I would have done if I hadn’t come upon such a subject like this. I’m able to at this moment relish my future. Thanks for your time so much for your impressive and amazing guide. I will not be reluctant to endorse the blog to anyone who should have counselling on this area.

  36. westbrook shoes [#]

    I definitely wanted to send a brief comment to say thanks to you for the fantastic points you are sharing on this website. My extensive internet look up has now been paid with incredibly good information to write about with my classmates and friends. I ‘d tell you that many of us visitors are quite blessed to live in a perfect network with many lovely people with very helpful strategies. I feel quite fortunate to have discovered your entire web site and look forward to some more entertaining minutes reading here. Thanks again for all the details.

  37. xyzal vs zyrtec [#]

    cost of cetirizine 10mg – http://allergyd.com

  38. golden goose [#]

    My husband and i have been now happy when Raymond managed to conclude his basic research using the ideas he received when using the web page. It’s not at all simplistic to simply be giving for free information and facts people may have been making money from. We really understand we have you to appreciate because of that. All the explanations you have made, the easy site menu, the relationships you can make it easier to engender – it’s got mostly exceptional, and it is aiding our son in addition to the family recognize that the subject is cool, and that is tremendously fundamental. Thank you for the whole thing!

  39. yeezy shoes [#]

    I have to show my appreciation for your generosity giving support to those individuals that actually need assistance with this important niche. Your special dedication to getting the message all around was amazingly productive and has continuously encouraged regular people just like me to realize their goals. Your new insightful suggestions denotes a whole lot a person like me and substantially more to my office colleagues. Regards; from all of us.

  40. golden goose [#]

    I together with my friends were actually examining the nice items from your website and then at once developed an awful feeling I never expressed respect to the web blog owner for those strategies. Those ladies came totally thrilled to learn them and now have definitely been using them. We appreciate you genuinely well accommodating and also for picking out variety of incredibly good subject matter millions of individuals are really desirous to know about. Our own honest apologies for not saying thanks to you sooner.

  41. supreme clothing [#]

    I precisely wished to say thanks again. I’m not certain the things that I could possibly have carried out in the absence of the type of strategies shown by you relating to my situation. It actually was an absolute depressing condition in my view, but taking a look at a new expert strategy you solved the issue took me to weep with contentment. I will be happier for the guidance as well as have high hopes you find out what a great job that you are undertaking teaching others through the use of your webblog. More than likely you haven’t come across any of us.

  42. kevin durant shoes [#]

    I am writing to let you know of the awesome experience my cousin’s princess obtained studying your web site. She learned a good number of issues, which included how it is like to possess a wonderful coaching character to let folks without difficulty master various complicated matters. You actually surpassed our own desires. Thanks for offering those useful, safe, informative and fun guidance on the topic to Sandra.

  43. yeezy [#]

    I happen to be writing to let you understand what a extraordinary encounter my girl undergone studying the blog. She noticed some pieces, not to mention what it is like to have a great helping mood to make certain people without hassle thoroughly grasp selected complicated things. You truly did more than readers’ expected results. Thanks for coming up with those necessary, trustworthy, revealing and in addition cool tips about that topic to Mary.

  44. stephen curry shoes [#]

    I just wanted to compose a comment to be able to thank you for the superb tips and tricks you are writing at this website. My considerable internet search has now been paid with reputable content to write about with my best friends. I would admit that we readers are rather fortunate to live in a fine place with very many lovely professionals with insightful tips. I feel pretty lucky to have used your entire site and look forward to some more excellent times reading here. Thank you once more for all the details.

  45. supreme clothing [#]

    Thanks for all of the hard work on this site. My mom really loves participating in investigations and it’s simple to grasp why. We all learn all regarding the compelling ways you make very useful tips and hints on this blog and even encourage participation from some others about this matter so our own princess is certainly becoming educated a great deal. Take pleasure in the rest of the year. You have been doing a dazzling job.

  46. nike off white [#]

    I must show appreciation to you for rescuing me from this type of challenge. Because of searching throughout the world wide web and seeing techniques which were not productive, I was thinking my entire life was over. Living without the answers to the problems you have resolved by means of your entire site is a serious case, as well as the kind that might have adversely affected my career if I had not noticed your site. Your actual talents and kindness in dealing with the whole lot was very useful. I’m not sure what I would’ve done if I hadn’t discovered such a stuff like this. I am able to at this moment look ahead to my future. Thank you so much for your specialized and effective help. I will not be reluctant to propose your web sites to anybody who desires care about this subject matter.

CSSLab