Web Design Course – Part 10 – Using HTML Forms

Today, we are going to learn the usage of “HTML Forms”. HTML forms are a very important element to use on websites, specifically those websites where capturing user data is important. Forms are not limited to only capturing user data but it also makes it easy to create search fields where user can enter the term for search query, and the form processes the data and brings the result based on the “searched query”. There are number of examples but the most common ones are the SIGN UP and LOGIN forms on websites. Sign Up forms gives you a form interface with set of elements to collect data from users and then create a profile based on user data for granting login access to personal dashboard.

In this lesson, we will learn/see,

  1. How to create a form on website
  2. The mechanism how it works (capturing user data and storing the data in database)
  3. Examples of forms

HOW TO CREATE A FORM ON WEBSITE

Form is created using a pair of an opening and closing form tag. Inside the form tag, there are many form controls that can be used to collect information from users. There are four main types of form-controls.

TEXT CONTROLS

Text Input (Single Line): Used to capture single line of text such as username, email and numeric values like zip code, telephone number or credit card number etc.- Password Input: It is same like the Text Input but it keeps the characters masked.
Text Area (Multi Line): Used to capture multi line of text such as descriptions, messages and comments.

CHOICE CONTROLS

Radio Buttons: Used to capture one option from multiple options.
Checkboxes: Used to capture one or more than one options.
Dropdown Boxes: Provides a list of options from which user must select one option.

FILE UPLOAD CONTROLS

File upload control is being used to select any kind of file i.e; text, image or any document and upload it to the server.

FORM SUBMIT CONTROLS

Submit Button: Used to submit the captured data from form and sends it to another form.
Image Button: It is same like the Submit Button but it allows to use image as button instead of classical HTML button.
File Upload Button: Used to upload files like images and documents to website.

THE MECHANISM OF CAPTURING USER DATA

I am sure everyone out there who is reading this article has done some sort of form submissions on websites for Sign Up, Login, Contact etc. So, I am assuming you are very well aware of the types of controls and their limitations to some extent. As I’ve already covered the type of controls form element has, so I am going to explain and demonstrate the process/mechanism of how the data actually goes to the server and sent back to website for showing some sort of message to user.

There are mainly 3 steps for this entire process,

  1. User fills out the form and clicks the button to send data to server
  2. The server processes the data
  3. The server responds back

You can find the visual representation of the mechanism in the given picture.

EXAMPLES OF FORMS

You must have seen a lot of forms online on websites. Few of them are like sign-up form on facebook, linkedin, yahoo, gmail, amazon, instagram etc and many more.

Watch Video:

Subscribe to my YouTube Channel:

https://www.youtube.com/channel/UC5cAKFICFAe0m-zWGwIFt0Q/

Leave a Reply

Your email address will not be published. Required fields are marked *