Forms In HTML
Forms are everywhere on the web. You might have interacted with HTML forms on web sites like Amazon, eBay, Yahoo!, and Google. The use of form on a page is a higher level phase of Web development to collect information from visitors. Whether it’s through registration forms, mailing lists, site searches, or online ordering, forms facilitate interaction between organizations / individuals with their clients or end users.
Let’s take Amazon as an example. You visit Amazon's website as a buyer and don’t verbally tell Amazon to find an item. Instead, you interact with a form containing form controls in the shape of a search text box and a Search button. You enter your search criteria into the text box, click the Search button, and get the results in a clean list format that you can quickly browse through.
From a seller’s perspective, the process is slightly more complex, but again, involves forms and form controls. When you want to sell an item on Amazon’s Web site, the first step is to register as a seller. During the registration process, you'll see a form with numerous form controls that collect different types of information from you.
In HTML you use the <form> tag to create a form; all form controls reside inside this tag. Every <form> tag requires an action attribute which specifies where to send the form-data when a form is submitted. You also use form's method attribute to send or retrieve data to or from server. This attribute can have either a GET or a POST value. The GET method is the default and is used when you want to retrieve something from the server, while the POST method is used to manipulate information on the server.
As per functionality both GET and POST methods are same with the following differences:
- GET method shows the information to the users as it is sent appended to the URL. But in the case of POST method information will not be visible as it is sent encapsulated within the HTTP request body.
- GET method has limitation in the size of data transmitted, but POST method hasn't.
- Web browser can usually cache the response pages for GET requests, because they do not change. POST requests, however, cannot be cached, and the server is re-contacted each time the page is displayed.
- GET requests should be used for pure queries that don’t affect anything on the server. POST requests are most suitable for queries where the response page will change over time – like a shopping cart.
The elements you can use in your web form include the following:
- Text and password fields
- Text area
- Radio buttons
- Checkbox
- Drop-down list box
- Button
- File input to upload a file
- Group box
- Label
Learn the HTML5 language in this tutorial series. These tutorials are designed for new programmers to provide them thorough knowledge of full stack web development.
