Reports from our 2014 Meetings
Reports from our 2014 Meetings
This month we continued our look at forms with a good look at how to construction and style a form. Starting with a look at which form tags could be used to construct a form and those that only deal with content.
There appears to be three tags that affect construction, fieldset, legend and optgroup. Fieldset works like a div tag but within a form. It is used to surround all those label and input tags that contain related information, for example name address and phone number could be listed under a feildset of personal details. Legend is like a super label applied to each fieldset, without a legend grouping the information in sets would make no more sense than having an input tag without a label. The optgroup tag is more problematic as construction tag. To create a selection menu you use the select tag, the content of which is determined by the option tag. The optgroup is designed to label the option tags into groups.
Next we looked at some of the major text books on the subject to see how they constructed their forms. What other tags were used and how did they style those and the form tags. The construction was as varied as the number of books and tutorials we looked at. Some used divs some paragraphs and some lists, few suggested using tables but in discussion the group came to the opinion that if anything a table layout was reasonable for a form as they are usually tabular in construction. It was noted however that the same reason tables are not used in general page construction, because we can position tags with style sheets still applies. The one thing we did conclude was that if we used general tags like div, p and ol or ul lists then we needed to take care that there was no conflict between the general styles we used and what we needed in the form. To finish off we had a look at a youtube tutorial on using css in forms.
https://www.youtube.com/watch?v=B8gsh6ZmJpg
After the break we got into some tutorials on the subject. I had created the basic form in the tutorials and so we had fun working through the tutorials and seeing what effect applying the styles had on the form. We experimented with other ideas and generally got a good feel for how applying some simple formatting and style can changed the appearance. We also relieased that while tables may have a place in form construction a lot can be achieved by simply using position and float elements on the form tags.
Here is a list of the three tutorials we had a look at;
The first two have a simple and basic approach and while they appear identical in their wording the styles they adopt are different
http://www.htmlcenter.com/blog/applying-css-to-forms/
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
This one has a much more detailed approach and is a good comprehensive tutorial on the subject
. http://24ways.org/2009/have-a-field-day-with-html5-forms/
Steve South
Sig Leader