We already discussed about HTML in Level 0. Now we are discussing about HTML Forms.
HTML Forms are used to collect the user inputs.
- HTML forms provides two-way communication (a.k.a full duplex communication) between web browser and server.
- It helps in providing dynamic contents.
About HTML Form
- A form basically contains boxes and buttons.
Real-time examples : Search engines, On-line purchase of items, Registrations etc
- The form allows a user to fill up the entries and send it back to the owner of the page. This is called Submitting of HTML Form.
HTML ” <form> ” tag
- It is used to define the form in HTML.
- HTML Form contains form elements like input element, check boxes, radio buttons, submit buttons etc.
- The following are the list of attributes that are supported by the HTML Form.
Attribute Description accept-charset Defines the charset used in the submitted form (default: the page charset). action Defines an address (url) where to submit the form (default: the submitting page). autocomplete Defines if the browser should auto-complete the form (default: on). enctype Defines the encoding of the submitted data (default: is url-encoded). method Defines the HTTP method used when submitting the form (default: GET). name Defines a name used to identify the form (for DOM usage: document.forms.name). novalidate Defines that the browser should not validate the form. target Defines the target of the address in the action attribute (default: _self).
<form action=“action_page.php” method=“post” target=“_blank” accept-charset=“UTF-8” enctype=“application/x-www-form-urlencoded” autocomplete=“off” novalidate> …form elements… </form>
- Two main attributes are used in forms they are
- METHOD : It is used when we tend to send the form to the web server. A form can be sent to server in two ways. They are- GET : When we use GET Method, the data of form is visible in the page address.
For instance : http://www.tloger.com/example?fname=Sanjeev&lname=Singh
NOTE : GET METHOD IS USED, WHEN THE FORM SUBMISSION IS PASSIVE (Ex: Search Engine Query)
– POST : When POST method is used, the data of the form is not visible in the page address. It provides more security when compared to GET Method.
NOTE : POST METHOD IS USED, WHEN THE FORM SUBMISSION IS NOT PASSIVE and IT CONTAINS SENSITIVE INFORMATION LIKE PASSWORDS.
- ACTION : The action attribute specifies the action that is to be performed when the form is submitted. The most common and general way to submit a form to web server, is by using a submit button. In general a form is submitted to specified page on a web server.
If we don’t specify the action attribute, then by default it sets the action to current page.
Most common form elements are
<input> : It specifies basic form elements. The attributes that are supported by this tag are
- TYPE : Defines the type element to be displayed in form.
Syntax : <input type=”text | password | radio | checkbox | hidden | image | submit | reset | button”>
- NAME : Defines the name for the input field.
- SIZE : Defines the number of characters to be displayed without scrolling.
- MIN / MAXLENGTH : Defines the minimum / maximum length of characters that can be specified in the input field.
- VALUE : Defines the default value.
- SRC : Defines the pointer to image file. It is used with clickable maps.
- ALIGN : Used to align image types. Supported alignment : top, middle, bottom.
<textarea> .. </textarea> : It is used to accommodate multiple text lines in a text box. Generally used while filling address in registration form. Attributes supported by this tag are
- NAME : Defines the name of the area.
- ROWS : Defines the number of text lines that can fit into the text area.
- COLS : Defines the width of the text area.
<select> .. </select> : It specifies a drop-down menu from which we can select the required data.
We use <option>..</option> tag, when we use <select> tag.
Attributes supported by <select> tag are NAME and SIZE.