CssForms

Created by: xing, Last modification: 09 Sep 2004 (11:18 UTC)
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>


<label for="form_element">form element</label>


<input id="form_element" name="some_name" type="text" />


if required, it's easy to add some notes regarding a certain item.





<label for="form_element">form element 2</label>


<input id="form_element" name="some_name" type="text" />


this is a note to help explain what 'form element 2' is all about.




<input type="submit" value="submit" />

</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

[+]

all 3 items in one line

[+]

Image


items split into 2 lines with help in the second line

[+]

Image


items split into 2 lines with the input element in the second line

[+]

Image


all 3 items on separate lines

[+]

Image