Cameron has been adding to the Internet for over seven years and now runs his own design and development business: www.themaninblue.com. He likes to combine the aesthetic with the technological on his Weblog, which contains equal parts of JavaScript, design and CSS.

Cameron's articles

  1. DesignFestival: Position Text Labels on Forms Using CSS

    In this post, I’ll explain three common approaches to positioning text labels on web forms using CSS: top-positioned text labels left-aligned text labels right-aligned text labels Using Top-positioned Text Labels Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label to take up the entire width of its parent element. As our form elements/labels are inside ordered list items (which are block elements), each pair will naturally fall onto a new line, as you can see from Figure 9. All we have to do is get the form elements and labels onto different lines.

  2. Position Text Labels on Forms Using CSS

    In this post, I’ll explain three common approaches to positioning text labels on web forms using CSS: top-positioned text labels left-aligned text labels right-aligned text labels Using Top-positioned Text Labels Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label to […]

  3. Fancy Form Design Using CSS Article

    Using Top-positioned Text Labels Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label to take up the entire width of its parent element. As our form elements/labels are inside ordered list items (which are block elements), each pair will naturally […]

  4. Accessible Form Markup Essentials

    Forms represent the one area of your web site where you absolutely must commit time and energy to ensure user accessibility. But before you can begin to lay out a web form, you need to craft some really solid markup that will provide a framework to which you can add some style.

  5. Accessible Form Layout Essentials

    There are several different ways in which you can lay out a form. The method you choose depends upon how long the form is, its purpose, how often it will be used by each person who has to fill it out, and, of course, the general aesthetics of the web page.

  6. Fancy Form Design Using CSS Article

    Required Fields and Error Messages There are often little extra bits of information that you want to convey on a form, and they should be equally as accessible as the text label elements for the form element. In fact, to ensure that they’re accessible, they should be included in the label itself. There are two […]

  7. Fancy Form Design Using CSS Article

    Grouping Radio Buttons and Checkboxes There are two types of form elements that are likely to be part of their own subgroup. These are checkboxes and radio buttons, both of which can be used to offer users multiple choices when responding to a given question on a form. Figure 22: Alternating-color fieldset elements // The […]

  8. Fancy Form Design Using CSS Article

    Resolving Internet Explorer’s Legends Issues In a totally unexpected turn of events (yeah, right!) Internet Explorer handles legends differently from other browsers. From experimentation, it seems that Internet Explorer treats legend elements as if they’re inside the fieldset, while other browsers treat them as if they’re outside the fieldset. I’m not saying that any browser’s […]

  9. Fancy Form Design Using CSS Article

    Changing the Default Fieldset Layout Although fieldset and legend elements are the most accessible means of marking up form groups, in the past a lot of people haven’t used them because they don’t like the default styling that browsers impose on these elements — the border around the fieldset, the legend intersecting the edge of […]

  10. Fancy Form Design Using CSS Article

    Using the CSS To create each of these different types of form layouts, we’ll use identical markup, but with different CSS rules. In our example, the HTML looks like this: <form action="example.php">   <fieldset>   <legend>Contact Details</legend>   <ol>   <li>   <label for="name">Name:</label>   <input id="name" name="name" class="text" type="text" />   </li>   <li> […]