FormsInHTML

Laying out forms in HTML

Rationale

Python programmers should be able to work on Zope 3 without worrying too much about how pages in the Zope management interface will be laid out. The UI designers who are working on Zope 3 should be able to alter the layout of the management interface without altering Python code.

One of the more complex areas of laying out web pages is deciding how to do HTML forms. People often use the <table> element for this. However, this makes things difficult for the UI designers.

Labels and Fields

A form is usually made up of a number of rows of labels and fields. They should be laid out like this:

    <form>
      <div class="row">
        <div class="label">
          <label for="f1">A field</label>
        </div>
        <div class="field">
          <input type="text" name="f1" id="f1" value="" />
        </div>
      </div>

Controls

A form usually needs buttons such as Submit to submit the form, and Refresh to update the form's data from filters. These controls should be placed in their own row like this:

      <div class="row">
        <div class="controls">
          <input type="submit" name="UPDATE_SUBMIT" id="UPDATE_SUBMIT"
                 value="Save changes" />
        </div>
      </div>
    </form>

Do not worry if the form does not look exactly right. There UI designers still have a lot of work to do on how the management interface will look. Creating forms using <div> elements will allow them to do their work flexibly, and without needing to change code other than the style-sheets.

We may find that other classes of div elements are needed to represent variations such as wide labels and wide fields, where a typical presentation would have the label sit above the field, and be allowed to take up the full width of the form.

Such variations should be documented here, along with advice on when to use the variations.