SuperModel::Html Output

Category:Libraries::SuperModel

The output of the form is meant to be as versatile as possible for formatting with CSS.

Sample output:

<div id="user_model_username_container" class="form_field_container">
    <div class="form_field_label"><label for="user_model_username">User name</label></div>
    <div class="form_field_control">&lt;input name="name" value="" maxlength="25" size="15" id="user_model_username" type="text"&gt;</div>
        <div class="form_field_error">User name is a required field</div>
    <div class="form_field_footer"></div>
</div>

In this example, the model name is user_model. It gets prepended to the id elements so that it's possible to use multiple forms (from different models) on the same page.

The container div is always named as modelname_fieldname_container. The actual input control is always named modelname_fieldname. Nothing else gets a specific name, as it can be specified from CSS using combinations of the container id and class accessors.

In most cases, the CodeIgniter form helper is used to actually output the <input> tags.

The form_field_error div only appears if there is an actual error. form_field_footer never contains anything, it is simply there for formatting (ie, to use for clearing).

Margin formatting

Here is a style that has the label to the left of the control, with all the controls ligned up 10em from the left of the labels. If there is an error, it shows up underneath the label/control line.

.form_field_container {
    position:relative;
    clear:both;
    padding: 0.5em 0 0.5em 0;
}
.form_field_label {
     float:left;
    width:10em;
    text-align:right;
    margin-top: 0.2em;
}
.form_field_control {
    float:left;
    padding-left:0.2em;
}
.form_field_error {
    color:red;
    padding-top:0.4em;
    clear:both;
}
.form_field_footer {
    clear:both;
}

Text-on-top

This example puts the text on top of the control, with the error text to the right.

.form_field_container {
    clear:both;
}
.form_field_label {
}
.form_field_control {
}
.form_field_error {
    color:red;
        float:right;
}
.form_field_footer {
    clear:both;
}

Add semi-colon after label

/* psuedo-element, not supported directly in IE, but works with IE7 http://dean.edwards.name/IE7/ */
.form_field_label label::after {
    content: ":";
}