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 [b]user_model[/b]. 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 [b][em]modelname[/em]_[em]fieldname[/em]container[/b]. The actual input control is always named [b][em]modelname[/em][em]fieldname[/em][/b]. 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 [url=http://codeigniter.com/user_guide/helpers/form_helper.html]form helper[/url] is used to actually output the <input> tags.

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

[h3]Margin formatting[/h3]

Here is a style that has the label to the left of the control, with all the controls ligned up [b]10em[/b] 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;
}

[h3]Text-on-top[/h3]

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;
}

[h3]Add semi-colon after label[/h3]

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