History of CssForms

TikiForms are a css dirven layout of forms. instead of using tables as we have been until now, we are using div and span elements.

!the html
a sample of what the code looks like:
{CODE(colors=>html)}
<form name="edit_element" action="{$gTikiLoc.STYLIST_PKG_URL}admin/index.php">
<fieldset>
<legend>please enter the form data here</legend>
<div class="row">
<span class="formlabel">
<label for="form_element">form element</label>
</span>
<span class="forminput">
<input id="form_element" name="some_name" type="text" />
</span>
<span class="formhelp">
if required, it's easy to add some notes regarding a certain item.
</span>
</div>

<div class="row">
<span class="formlabel">
<label for="form_element">form element 2</label>
</span>
<span class="forminput">
<input id="form_element" name="some_name" type="text" />
</span>
<span class="formhelp">
this is a note to help explain what 'form element 2' is all about.
</span>
</div>

<div class="row submit">
<input type="submit" value="submit" />
</div>
</fieldset>
</form>
{CODE}

as you can see, the html code is rather similar to using tables where the analogies can be drawn with:
fieldset --> table
legend --> th
div --> tr
span --> td

so, why is it worth getting used to __new__ html code?

basically, you have complete styling fredom when using the above form html. below i have created a few ''simple'' styles that allow you to see that positioning of the individual elements is easy and __very__ flexible.

^please note that the styles are very simple and are merely here as an example of how flexible the positioning of such a form is.^

!the css
using css it is then possible to modify the design and layout of every form on the site. if needed, the forms can also be modified individually by using selectors.

here are the common parts of the css file used to layout all the bottom forms. the bits that vary are always just above the particular form.
!!!-common css
{CODE(colors=>css)}
body {
background-color: #fff;
font-size: 12px;
font-family: verdana, arial, sans-serif;
}
fieldset {
width: 90%;
border: 1px dashed #999;
padding: 10px;
margin: 10px auto;
}
legend {
color: #000;
padding: 1px 5px;
background: #eee;
border: 1px solid #999;
}
.row {
clear: both;
margin-top: 10px;
}
.submit {
text-align: center;
padding: 15px 0 10px 0;
}
{CODE}

!!!-all 3 items in one line
{CODE(colors=>css)}
.formlabel {
float: left;
width: 29%;
text-align: right;
padding-right: 1%;
}
.forminput {
float: left;
width: 35%;
text-align: left;
}
.formhelp {
text-align: justify;
float: right;
width: 35%;
font-size: 10px;
color: #bbb;
padding: 0 0 20px 0;
}
{CODE}
!!!
{img src=/img/wiki_up/1line.gif align=center}

!!!-items split into 2 lines with help in the second line
{CODE(colors=>css)}
.formlabel {
float: left;
width: 30%;
text-align: right;
}
.forminput {
float: right;
width: 69%;
text-align: left;
}
.formhelp {
text-align: justify;
float: left;
clear: both;
width: 100%;
font-size: 10px;
color: #bbb;
padding: 0 0 20px 0;
}
{CODE}
!!!
{img src=/img/wiki_up/2lines.gif align=center}

!!!-items split into 2 lines with the input element in the second line
{CODE(colors=>css)}
.formlabel {
float: left;
width: 40%;
text-align: right;
}
.forminput {
clear: both;
float: left;
width: 40%;
text-align: right;
}
.formhelp {
text-align: justify;
float: right;
width: 59%;
font-size: 10px;
color: #bbb;
padding: 0 0 20px 0;
}
{CODE}
!!!
{img src=/img/wiki_up/2lines2.gif align=center}

!!!-all 3 items on separate lines
{CODE(colors=>css)}
.formlabel {
float: left;
width: 100%;
text-align: left;
padding-right: 1%;
}
.forminput {
float: right;
width: 80%;
text-align: left;
}
.formhelp {
text-align: justify;
float: right;
width: 60%;
font-size: 10px;
color: #bbb;
padding: 0 0 20px 0;
}
{CODE}
!!!
{img src=/img/wiki_up/3lines.gif align=center}