HTML Forms

0

HTML Forms

We already discussed about HTML in Level 0. Now we are discussing about HTML Forms.
HTML Forms are used to collect the user inputs.




Introduction

  • 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).



  • Syntax
    <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
    – ACTION
  • 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.

FORM ELEMENTS

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.

Syntax
<select name=”select”>
<option value=”value”>Value</option>
</select>

Share.

Leave A Reply