enavu webdevmania tutsvalley psdestination
visit the enavu network
7 Comments Article Title Overlay

Web Forms: Semantic Mark Up in our Forms [part 2]

Creating forms can be a tricky subject, especially if you go in the table-less path. In this article we discuss the methods of creating semantic forms.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Creating forms can be a tricky subject, especially if you go in the table-less path. In this article we discuss the methods of creating semantic forms.

In the first part of this series we discussed the ways we can help our users to use our forms, today we are going to review how to create forms from the perspective of a Web Developer. I would like to state that this is only one way to accomplish this and there are alternative ways.

Preface

Using tables is something I do not like to do unless i am truly forced to by the circumstances (like tabular data). Tables is something you definitely can do without tables, all you need is some good clean html and css. Let’s create a clean and simple form using pure html and css. And discuss other possible techniques.

Semantic Form Type 1

First let us lay down the HTML ground work on which we can start building our form.

<form class="form" >
    <fieldset>
		<legend>Semantic Form</legend>
        <div>
        	<label>First Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Last Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Address:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Phone:</label>
            <input type="text" class="field phone" />
        </div>
        <div>
        	<input type="submit" value="submit" />
        </div>
    </fieldset>
</form>

In the code above you will notice I use div’s to horizontally separate the fields. You can use unordered/ordered lists, paragraphs or any other block element.

Now let’s style the simple form.

.form { width:250px; margin:50px auto;} /* set a width for our form, and center it with some spacing above */
.form fieldset {border-top:1px solid #ccc;} /* just for styling the top of the fieldset */
.form fieldset legend {font-size:1.2em; font-weight:600; padding:0px 5px 0px 0px;} /* add some styling to form header */
.form div {clear:both; padding:10px 0px;} /*clear the floated label and input */
.form label {display:block; float:left; width:46%;} /* position the labels to the left */
.form input.field {float:left; margin-left:3%; width:47%;} /* position the input */

Keep in mind the above code has had a Eric Meyer reset which removed all margins paddings and borders. As you can see i have added a comment for what each line does in the CSS.

That was easy, simple clean form that just works!

The Other Possible Methods

The method above is one of many possible solutions. I have seen people use Unordered Lists instead of my div’s and others use paragraphs they are all block level elements so they will work just fine. In my demo you will notice the labels float to the left of our input fields, you can also create forms with the text being above each field, all you have to do is remove the float and display the label block! Vuala you have a whole new style in 2 steps!

You can also easily create this into a two column form by simply adding a new fieldset that has its own set width and is floated, it’s as simple as that!

What’s Next

In our next installment of Web Forms we will talk about validation, the good, the bad and the ugly! Stay tuned for a series that will truly talk about every single aspects of Web Forms!

Related posts:

  1. Top 10 HTML Snippets
  2. Use HTML5 Placeholder Input Attribute Today using jQuery!
  3. Web Forms: Types of User Assistance [part 1]
  4. Web Forms: Validation [part 3]
  5. jQuery focus on first field trick

Did you absolutely LOVE this article... share it!

Comments

  • Is there a part 1? Or is it a typo?

  • Freelance, look at the “Related Posts” below the article and you will see a link to “Web Forms: Types of User Assistance [part 1]“.

  • You’re missing the for attribute in the label element.

  • I’ve always wanted to dl in my forms (but IE makes it so complicated) because in my mind, that’s more semantic than divs. dt >> label dd >> value

    What do you think?

  • Using divisions for forms markup is not the semantic way. As @Mae mentioned, you should use definition lists (or even unordered lists) to creare really semantic markup.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting