Learn to use form related properties and methods
HTML offers a wide variety of ways to get inputs using radio buttons, check boxes, popups, textboxes, hidden fields etc.
Any form begins with the element <form>, and its attributes to assign features, followed by input field to recieve input from users. And finally ends with </form> tag.
Form Attribute : action
The form attribute action is used to specify the URL of the server program which is supposed to further process the form inputs.
When the user submits the form, the broswer goes to the location specified in the action attribute, its usually the URL of a server side application
It is not necessary that the form data gets sent to the server script, it can be used to transfer information to functions, cookies etc.
Form Attribute : method
The form attribute method is used to specify how form data will be sent to the server. It has two value GET and POST
GET : The default value , it sends data back to the server by appending the data to URL(i.e query string).The query string prepended with a question mark is URL encoded string consisting of name/value pairs.
POST : It encodes the URL data in the same way as GET , but instead of sending the data in URL, it sends the data to the server as a message body, like an email message.
Its a more secure way of data transfer but should be used for large sized data.
If you use back button while using a form with POST value, the browser sends a warning that you may lose previous transaction data.
The demo below shows a basic form built using form related elements and attributes.
Example: Basic HTML FormGive it a TRY! » Note: All form values will be set to their initial state, when you reset the form.
It is used to check for empty form fields, improperly filled forms, verify the correct format of email address, credit card no, zipcode, telephone number etc.
It enables users to handle multiple forms, call function to handle events, respond to various form related events etc.
Since form object is contained within the document object, every time a form is created the browser creates an unique form object and stores it an element of an array called forms[ ] array.
The order in which the forms are displayed within the document is based on the index value of the form array, beginning at 0 and extending till n-1
The HTMLFormElement has all the same default properties as other HTML element
The additional properties and methods of HTMLFormElement are explained in the table below:
|acceptCharset||The charcter set that the server can process.|
|action||The URL to send the request to.|
|elements||A HTMLCollection of all controls in the form.|
|enctype||The encoding type of the request|
|length||The number of controls in the form|
|method||The type of HTTP request to send, typically "get" and "post".|
|name||The name of form; similar to HTML attribute name|
|reset()||To reset all form fields to their default value|
|submit()||To submit the form|
|target||The name of the window to be used for sending the request and getting a response; similar to HTML attribute target|