How to create a basic HTML form?

In a webpage, forms are used to collect user inputs. So, we can process them like creating an account, so the user should enter a name, e-mail, password, acceptance of agreements, etc. And another example is when users are purchasing some products from the internet user should enter debit/credit card details and shipping details to the website. Let’s discuss how to create a simple form using HTML.

<label>

simply <label> tag is used for naming relevant elements so a user can identify an element in the form. We should provide a name for the label inside the tags as shown below.

<label>label name </label>

<input>

In HTML forms most widely using elements is <input> element. And type attribute is used to specify the type of input to display.
Note: If we didn’t include type default type is “text”

Let’s have a quick look at types that are used primarily.

* Text

Type= “text” is defined to input single line text inputs.

* Mail

Type= “e-mail” is used to input e-mails in the input field. Some browsers can automatically validate the e-mail address. sometimes in the smartphones “.com” and “@” appear automatically on the keyboard.

* Password

We can use this “password” type to masked the input(masked by asterisks or circles) to avoid noticing input to nearby persons.

* radio buttons

Type “radio” create buttons that allow the user to select one of the objects. We have to give the same value to the name attribute to specify the entire group of radio objects
note: “checked” attribute will select an option by default.

* check boxes

Unlike radio buttons, checkboxes allow the user to select zero or more options. Generally, we can see these types of checkboxes to accept user agreements, to choose multiple options, etc.

* submit button

<select>

This element is used to create a dropdown list as shown in the following example. You can select one of the options.

Congratulations, you have learnt a few basic elements in HTML forms, which are widely used in creating HTML forms. You can use CSS and JavaScript to make your form attractive.
Thanks for reading this article. Hope you have learnt something. If you have any doubts please don’t hesitate to leave a response.

Thank you!

IT undergrad 👨‍🎓 | UOM