Form element - form and CSS
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 are described in this article, next articles are dedicated to other form elements.
More forms can be located in single web page, but only that form which was activated by submit button is submitted. ASP.NET treats web forms unlikely, therefore not everything written here is applicable for ASP.NET forms.
Element form and CSS
Form should keep consistency in using unified font. Font type is not inherited from body, html, nor form elements. To get uniform result, font type have to be set-up according to example bellow, in case of need extended by other elements (label, fieldset, legend). Other way is to use CSS class name which has declared font type for each and every form element.
input, select, textarea {font: normal 100% Arial, SansSerif, Verdana;}
form {margin: 0 auto;
background: #ccc;
border: 1px solid #aaa;}
Size of form element can be set by CSS in the same way as other block elements according to box model. Default property margin of this element sometimes differentiate in browsers, therefore should be explicitly set in CSS declaration. How property background of form influences form elements rendering shows next picture.
Screenshot is zoomed to 200% in order to visualize default look of elements and form background. Border of textbox and other elements is possible to set by CSS properties. Border of checkbox and radiobutton is not possible to change by help of CSS, because these elements are in fact small pictures or icons.
Classic view of elements is used in browser Chrome4. In browsers IE, FF and Safari4 the look of form elements depend on Windows motive. Opera uses its own look of form elements, alike Safari3 for Windows uses Aqua style. White parts of classic elements (border bottom and right), disappear on white background. On gray background entire classic elements are displayed. Windows 7 form element style fits to white background.
If you want to keep unified look and feel of web forms across different device types and independent of OS, classic look is good solution. It is possible to switch form elements to classic style with help of some CSS properties. More in following articles.
Atributes of element form
<form method="..." name="..." action="..." onsubmit="...">
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 values 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 characters.
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 and 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.)
Element form and scripts
Basic form features (text edit, switch radiobuttons, change status of checkbox, form submit or form reset) can be done without JavaScript. Script in browser is used for more advanced form functions as validation, prevent double submit etc. What have to exist is the second part of form: server script used for form data processing. That script, usually ASP or PHP code, processes form data and updates database. Server script is often more complicated then form code in browser.
When all form data processing is done by JavaScript in browser, then no need of form element is required. For example Javascript calculator, which uses form elements textbox and buttons, but no form element. In this case no data are send to server.
onsubmit="validate(this)"
Event onsubmit and linked JavaScript function in form element is usefull for form validation and other tasks like stop multiple form submitting, or redirecting to other server script. This event is raised just before form data are submitted to server. Reference on the form can be passed to validation function by the help of parameter this. More about form validation you can find in article form validation.
updated 03.02.2010