Form element <form>
Each form element must be inside of the element form, which bounds form region. Form elements located outside of the form region are not part of that form and are not submited to the server. Possibilities of using style and attributes of element form is described in this article, next articles are dedicated to other form elements.
Element form and CSS
At least property margin of element form should be set-up because of different default setting in browsers. That difference may break out your carefully prepared design of page. When one property is used, why not try other properties too.
form {margin: 0 auto;
background: #ccc;
border: 1px solid #aaa;}
input, select, textarea {font: normal 100% Arial, SansSerif, Verdana;}
Styling of element form is usually limited to set-up background color and appropriate border and setting-up padding. Other CSS properties of this element have not too much sense.
Form should keep consistency in using single font. Font type is not inherited from element body, nor html. There is not possible to set up font in style definition of element form. So as to get uniform result, font type have to be set-up according to example above, in case of need extended by other elements (label, fieldset, legend).
One exception may be element textarea, where using font type of Courier, or monospace can be intention. When textarea is used as note, or comment for some report, then with help of such a font it is possible to create primitive table with additional results, as a note.
Atributes of element form
<form method="..." name="..." action="..." onsubmit="...">
Attributes which are common for most of HTML elements are only listed here. id for reference by CSS or JavaScript, class for CSS definition, style for inline CSS definition, title for tooltip creation and national attributes like lang and dir. Large group of attributes are scripting events from mouse, or keyboard activity. Beside of common attributes some elements have specific attributes for given element only.
method="get"
get is default method, when form data are submitted as part of URL address. Page address is appended by question-mark followed by form data. Each form item is formated as text string name=value. Particular form items are separated by sign "&". Because of form content appears in address line some claims, that this method is less safe.
Method get is used in cases when form submitting do not change content of database. In practice that are queries which return database data according to form specification.
Some resources indicate maximum size of URL including form data about 4 kB. W3C indicate maximum size even only 200 Bytes in case of submited data containes national diacritical marks.
method="post"
Method post is recommend in cases when form data causes change of database content, that means new record (row) is appended, or existing record is overwritten as a result of edit, eventually at request to delete record. Another activities when method post is recommended is login form and order submitting. At using post method, form data size is not limited.
Both methods have yet another difference. Page obtained by method get contains form data as part of URL and that is why it is possible to save the page as bookmark. Later page can be reloaded without filling the form. That does not mean, that identical page content is obtained. That depends on page expiration and cache setting. Usually the same page with up-to-date data is retrieved. When post method is used it is not possible to save form data to the bookmarks or to the cache memory.
name="...", id="..."
While each form element (radio, select, ..) must have defined attribute name and its value must be unique name, in case of element form this attribute is not obligatory and remains there for backward comaptibility only. Attribute name for element form is not part of form data and is not submitted.
In case of JavaScript, or CSS needs reference to element form, attribute id is often used. Somewhere here perhaps starts terms confusing. Keep in mind: attribute name is sent to server to get the name and value of form field. Attribute id is used by browser to get reference on this object, or for correct function of element label for.
Confusing of atributes name a id can be reality in browser IE. That problem is described in article on 456BereaStreet. Therefore be carefull when select name and id of elements.
action="..."
Attribute action is URL address of server script, where filled-out form is submitted. It is possible to redefine this attribute by JavaScript, for example on basis of filled-out form data. (.NET do not allow this.)
The change of server script address on the fly may help as very simple protection against spam, because form spam robots cannot analyze client scripts for the present.
onsubmit="validate(this)"
Event onsubmit() and linked JavaScript function in form element has practical sense for data validation of fields in form. This event is raised just before form submitting to server. That is the right moment for form checking and other actions such as blocking multiple form submitting, or redirecting to other server script.
Here is right place also, where reference to the form can be hand over to validation function by the help of parameter this. Then validation script may be simpler.
updated 16.02.2008