ansaurus

Question

Answer 1

A:

I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.

<html>
<head>
<style>
html {
    font-size: 76%;
}
body {
    font-size: 1.0em;
    font-family: verdana;
}
div.input {
    border: 1px solid white;
    clear: left;
    width: 25em;
    height: 5em;
    padding: 2px;
    margin-bottom: 1.0em;
}
div.error {
    border: 1px solid red;
}
div.label {
    float: left;
    width: 7em;
}
div.field {
    float: left;
}
div.errormessage {
    color: red;
}
div.description {
    color: #bbb;
}
input.text {
    width: 13em;
}
</style>
</head>
<body>
<form>
    <div class="input error">
     <div class="label">
      <div>&nbsp;</div>
      <label>First name:<br>(required)</label>
     </div>
     <div class="field">
      <div class="errormessage">error message here</div>
      <input type="text" name="FirstName" class="text">
      <div class="description">optional description here</div>
     </div>
    </div>
    <div class="input">
     <div class="label">
      <div>&nbsp;</div>
      <label>Last name:<br>(required)</label>
     </div>
     <div class="field">
      <div class="errormessage">&nbsp;</div>
      <input type="text" name="LastName" class="text">
      <div class="description">optional description here</div>
     </div>
    </div>
</form>
</body>
</html>

RedFilter 2009-07-16 23:35:28

thank you for this as well, i will have a look :)

2009-07-17 08:14:48

Answer 2

+4 A:

It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:

<form [..]>
   <ul>
      <li class="hasError">
         <em class="feedback">error message here</em>
         <div class="attribute">
            <label for="firstName">First name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="firstName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
      <li>
         <em class="feedback" />
         <div class="attribute">
            <label for="firstName">Last name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="lastName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
   </ul>
</form>

This achieves the following:

By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.

A sample CSS file could look something like (note that this is untested):

form li {
    width: 300px;
}
form li.hasErrors {
    width: 298px;
    border: 1px red;
    background-color: #C55;
}
form .attribute {
    float: left;
    clear: left;
    width: 60px;
}
form .input {
    float: right;
    clear: none;
    width: 240px;
}
form .feedback {
    display: block;
    padding-left: 50px;
    color: red;
}
form .description {
    display: block;
    clear: both;
    color: #888;
}
.clearBoth { display: block; clear: both; }

PatrikAkerstrand 2009-07-16 23:36:37

Thank you Machine, this is exactly what I was looking for.

2009-07-17 08:13:42

Answer 3

A:

A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms

Generally a fantastic site for information on how to create good, clean and accessible websites.

Shadi Almosri 2009-07-16 23:42:01

Answer 4

A:

Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:

<style type="text/css">
    form { overflow: auto; position: relative; }
    input { float: left; }
    label { clear: left; float: left; width: 10em; }
</style>

<form>
    <label>Field 1</label><input/>
    <label>Field 2</label><input/>
    <label>Field 3</label><input/>
</form>

Ben Blank 2009-07-16 23:42:43

ansaurus

tags:

views:

answers:

How to code this form?

related questions