Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Subs House Ad
Apr
30

Make your forms beautiful with CSS

by Dave Harfield

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.

Pages: 1 2 3 4

Bookmark and Share

39 Comments »

What's your opinion?

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.