HTML Form Attributes

77
views

We will learn to create the user input fields later. The first thing we need to understand the first layer of attributes specified inside the opening form tag.

1The Action Attribute

Information submitted by the user needs to be processed in case you want to store user data in a database or do something else with that data.

  • The action attribute is used to define the processing page link.
  • The action is triggered when users click the submit button.

The processing pages contain script on the server or within the same page. The work of this script is to process the data as desired by the programmer.

In this example, we have sent this information to form_action.php This page contains server-side script in PHP to work on the form data.

When action attribute is not specified then the action is set to process inside the same web-page.

2The Target Attribute

The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

  • _blank – The response is displayed in a new window or tab
  • _self – The response is displayed in the same frame (this is default)
Note: frames and framesets are not supported in HTML5, so the _parent, _top and framenamevalues are now mostly used with iframes.

3The Method Attribute

The method attribute specifies the method using which form is submitted.

Method attribute value can be either  GET  or POST .

GET method

  • GET is the default method.
  • When get method is used, all the form data is visible in the browsers URL field.
  • Never use get method to submit data because the data will be visible in the URL and can easily be stolen.
  • Get is best to submit non sensitive data. One thing to remember is that URL is limited to 3000 characters. Extra data will be trimmed from the URL.

POST method

  • POST method never displays submitted data in the address bar. Therefore, its best to use when you are collecting sensitive data from the user.
  • It has no character limit and can handle data of unlimited characters.

4Autocomplete Attribute

Attribute  autocomplete  specifies if the browser should autocomplete the form (default: on). As the user types in the field the information gets auto suggested all you need to do is hit the right arrow key to auto complete the suggested entry.

5Name attribute

  • name  attribute is used to specify a name to the form.
  • This name can be used in JS to manipulate using DOM.

We will learn more about the name attribute later in the JavaScript lessons.

6novalidate Attribute

  • Browser always checks the data first, before sending it to the server.
  • Like the format of email id, numbers, characters etc.
  • You can turn this functionality on or off based on the requirement.

7enctype attribute

  • It is used to set the encoding type when the data is submitted.
  • The default value is set to URL encoding.
  • URL encoding converts data into a special format that can be transferred over the internet.

LEAVE A REPLY

Please enter your comment!
Please enter your name here