Make your forms beautiful with CSS
In detail
In detail
Using semantic HTML for your forms
Semantic HTML is all the rage, and for good reason. The code is easier to understand, more search engine-friendly and typically easier to maintain
Semantics: the science or study of structure and meaning. HTML started off with the intention that documents (pages) would be structured according to a strict semantic scheme. h1 tags existed to contain the most important information or heading on a page, while h6 tags were there for the least important heading. <p> tags only contained paragraph information. Each HTML page had a definitive structure and hierarchy, which was self-described by the mark-up the author used in its creation. This was all well and good, but as the internet exploded in popularity, authors of web pages wanted to push the boundaries of design and, given the limited layout options available within the language, clever workarounds were developed to achieve sophisticated designs.
This was fantastic for the aesthetics of the websites being created, but awful from a semantic point of view. Tags lost much of their association with the intended purpose. Tables were being nested ten layers deep, and the amount of code being used per page expanded exponentially. This had the side effect of making it more difficult for search engines to determine the relative importance of content, and making it challenging for people with disabilities to navigate and access page content.
Thankfully, with the advent of CSS, the wealth of design and layout tools available enables us to return to the semantic web. The HTML code we’ve created for the tutorial here is an example of a semantic approach to a form. We have grouped similar fields within the form into fieldsets. Rather than using a table to achieve a nice layout, we have made use of labels explicitly associated with specific input fields. To help define the elements, we’ve wrapped each label and form field inside a list element (after all, a form is really a list of information required). Semantic HTML separates the structure of the document from the appearance, while CSS is used to create the visual look and feel by attaching to ID, class or HTML tag hooks.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
Thanks a lot..
I definitely need to work on this. Thanks!
yeah… I like it. Thanks
its wonderful share and its really helpful for new comer CSS developer
Thanks for the tutorial! There are not very many good examples of stying forms on the net.
Try this Javascript refinement on the form… it works out better.
what a great course . Thanks a lot !
谢谢 ,写的很好
Thank you for your input.
This was a great tutorial, I did pick up 1 or 2 new techniques that I’ll use in my next form. I do however have a question, how would you go about creating a Li with 2 text boxes within it i.e. Lets say you want to have title and first name next to each other or if the space for the fieldset requires a 2 or 3 column layout?
A tutorial showing that would be great
Good tutorial. The form provided me with new ideas for my next form.
Thanks again
Nice :) Cool, Thanks for input :D
Thanks. Nice tutorial.
One of the best form examples I’ve seen in a while. Good job!
me too. like this one
Thanks lot!
very nice..
Good guide, picked up a few ideas. Many thanks! Ted
Nice helpful stuff. Thanks
Good guide, picked up a few ideas. Many thanks! Ted
It is so important to keep on top of the latest techniques, articles like this are great for improving skills and always giving the end user a good experience when visiting your website. Thank you
Wow! Fantastic designs on this tutorial. I would really love to try this out on my own. Thanks for posting this one.
another wonderful tutorial.
You have written a very informative post. I came across your blog via google.com by searching relevant information. I have bookmarked your site and sent the link to sme of my colleagues are will also find that useful.
Thanks lot!
A Brilliant article in all, thankyo for sharing it, i’m sure the info here will be put to good use :)
found this blog interesting thanx for sharing
CSS has greatly helped in web design. You have provided a good tutorial about css.
This is a very useful tutorial, thanks for sharing. Small design ellements and CSS can make a huge difference to the appearance of a web form.
I keep checking the website for new tuts but this one has been very interesting and knowledge full . GREAT guys keep it up
Hm, I’m ok with this nevertheless not 100 % convinced, so i am going to research even more.
whatever you have to says i wil try to update on my company websites & clients sites. really it give some attractive look. thank you for share this post..
Its really nice and wonderful tutorial.so we learn more with the help of this.so keep share always…..
Post a live demo dude
Beardsley, eh? It might be worth the flight out there.
You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it!
This is sweet! Thanks!!!