demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Form Element

html / forms

Estimated reading time: 1 minute, 48 seconds

Unfortunately when the HTML was being designed for forms consistency was not a high priority. You will find that most form-specific tags are <input> tags, but there are several notable exceptions.

The main points to remember about forms are as follows:

  • a form starts with a <form> tag and closes with a matching </form> tag. Form elements (text fields, drop-down menus, etc) are only valid between the opening and closing <form> tag in XHTML. In HTML5 you may put a form element, such as an <input>, anywhere on the page, with or without a surrounding form tag.

  • The form tag has two attributes that are typically added: method and action.

  • A form’s method is the way the submitted data is passed to whatever will be processing it (a CGI script, a script, etc). Often, this method will be post. Alternatively, the get method appends the data to the URL itself when it is submitted, which is obviously less secure (but helpful, if you are interested in debugging a form or bookmarking a page created through a form decision).

  • The action attribute of the form tag tells the form where to submit its data to. If a CGI script written in Perl was processing the data, the action attribute would typically be set to something like cgi-bin/form.pl. If a PHP script, it would be something like formhandler.php.

The first step in creating our form is the opening and closing <form> tags, with the correct attributes:

<form method="post" action="formhandler.php">
</form>

XHTML requires a fieldset tag immediately inside the <form> tag. fieldset is a container element inside the form. Think of filling out your tax form at the end of each year: each major section of the form (personal information, employer, income) is divided into a seperate box. fieldset is that box in the context of a form. A form may contain multiple fieldsets.

Immediately inside the fieldset you should enter a <legend> tag, with appropriate content. The <legend> is essentially the label for the entire fieldset, and typically indicates the purpose of that section. (“Personal information”, “Mailing Address”, “Billing Info”, etc).

The complete setup code for a form is therefore:

<form method="post" action="formhandler.php">
<fieldset>
<legend>Legend for form</legend>
<!-- form content goes here -->
</fieldset>
</form>

fieldset and legend are optional in HTML5, but it is a good idea to use it.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.