How To Create HTML Forms
I am a technical writer and software engineer
In this tutorial, you'll create a simple HTML form. You'll learn to use radio buttons, a checkbox and manipulate input elements to get the desired data from a form.
What is an HTML form?
An HTML form is a document section that allows a user to enter data like name, address, password, and age, which are then sent to a server. A form can contain controls such as radio buttons, checkboxes, menus, and a submit button.
Why use HTML forms?
HTML forms allow you to collect crucial information from a user. For example, if they are subscribing to a service, you might want to collect their names, debit card details, and address.
Common HTML form tags
Tag | Description |
<form> | Defines an HTML form |
<input> | Defines input control |
<label> | Defines a label for an input element |
<textarea> | Defines multi-line text input control |
<fieldset> | Groups related form elements |
<legend> | Defines a caption for a fieldset element. |
<select> | It defines a drop-down list |
<option> | Defines an option in a drop-down list |
<button> | Creates a clickable button |
How to create an HTML form
To create a form, we start with the <form>tag.
<form>
</form>
The <form> tag can take several attributes such as action and method. The action attribute defines the action to be performed after submitting the form. For example, sending it to a server.
The method attribute specifies the HTTP method to use when submitting form data to the URL or file specified in the action attribute.
The form data can be sent via a POST or GET request. In this example, we’ll use the POST request.
<form action="sample.com" method="post"></form>
In our form example, we will use three sections. As such, we will add two fieldset elements. Remember a fieldset tag groups related form elements.
<form action="sample.com" method="post">
<fieldset></fieldset>
<fieldset></fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
The first fieldset will contain the name, email, and password of the user. This means you'll need three label elements. Within each label element, you'll nest an input element, which will allow the user to enter their data.
<form action="sample.com" method="post">
<fieldset>
<label>Enter Name: <input/></label>
<label>Enter email: <input/></label>
<label>Enter New Password: <input/></label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
To adhere to accessibility practices, you need to link the label element with the corresponding input element. To do this, you'll use the for attribute for the label element, pointing to the id of the corresponding input element.
For example, you'll use id="name" for the first input element. As such, we'll use for="name" attribute for the label element.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name"/></label>
<label for="email">Enter email: <input id="email"/></label>
<label for="pass">Enter New Password: <input id="pass"/></label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
It is also recommended to include a type attribute in your input element. It tells the browser what data it should expect. So, for the input element holding the name of the user, you'll use an attribute of text.
For the input element holding the user's email, you'll use an attribute of email. Finally, you'll add an attribute of password for the input element holding the password.
We can then add the required attribute to ensure every input field is inputted before submitting the form data.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" required/></label>
<label for="email">Enter email: <input id="email" type="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" required/></label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Output:
With the type="password", you can use the pattern attribute to specify how a password should look. For example, we can use the pattern [a-z]{6,} to match six or more lowercase letters.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" required/></label>
<label for="email">Enter email: <input id="email" type="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" required/></label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
If you try to enter a numerical password, this happens:
It is also recommended to add a name attribute. The name attribute identifies each element in the form. We will use Fname for the first element, email for the second, and password for the third.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" name="Fname"required/></label>
<label for="email">Enter email: <input id="email" type="email" name="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" name="password"required/></label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Let's work on the second fieldset. It will include two radio buttons and a checkbox.
Add two label elements and nest an input element in each. To get the radio buttons, add a type="radio" attribute in each input element.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" name="Fname"required/></label>
<label for="email">Enter email: <input id="email" type="email" name="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" name="password"required/></label>
</fieldset>
<fieldset>
<label><input type="radio"/> Free-Account</label>
<label><input type="radio"/> Paid-Account</label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Now, let's link the label element with the input element. We do this by adding an id to the input element and using the id as the value for the for attributes in the label element. Like this:
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" name="Fname"required/></label>
<label for="email">Enter email: <input id="email" type="email" name="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" name="password"required/></label>
</fieldset>
<fieldset>
<label for="free-account"><input type="radio" id="free-account"/> Free-Account</label>
<label for="paid-account"><input type="radio" id="paid-account"/> Paid-Account</label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Unfortunately, you can select both buttons at the same time, which is not what you want.
You want one button to be selectable at a time. As such, you must create a relationship between them by adding the same name attribute.
For example, we can use name="account-type".
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" name="Fname"required/></label>
<label for="email">Enter email: <input id="email" type="email" name="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" name="password"required/></label>
</fieldset>
<fieldset>
<label for="free-account"><input type="radio" id="free-account" name="account-type"/> Free-Account</label>
<label for="paid-account"><input type="radio" id="paid-account" name="account-type"/> Paid-Account</label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Output:
Now it works.
Adding a checkbox is similar to adding a radio button. You just need to nest an input in a label element, then give the input a type of checkbox.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" name="Fname"required/></label>
<label for="email">Enter email: <input id="email" type="email" name="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" name="password"required/></label>
</fieldset>
<fieldset>
<label for="free-account"><input type="radio" id="free-account" name="account-type"/> Free-Account</label>
<label for="paid-account"><input type="radio" id="paid-account" name="account-type"/> Paid-Account</label>
<label><input type="checkbox"> I have read the terms</label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Let's give the input an id="terms-and-conditions" and a name="terms-and-conditions". The label element will have a for="terms-and-conditions" . Include the required attribute to ensure they've read the terms and conditions.
<form action="sample.com" method="post">
<fieldset>
<label for="name">Enter Name: <input id="name" type="text" name="Fname"required/></label>
<label for="email">Enter email: <input id="email" type="email" name="email" required/></label>
<label for="pass">Enter New Password: <input id="pass" type="password" pattern="[a-z]{6,}" name="password"required/></label>
</fieldset>
<fieldset>
<label for="free-account"><input type="radio" id="free-account" name="account-type"/> Free-Account</label>
<label for="paid-account"><input type="radio" id="paid-account" name="account-type"/> Paid-Account</label>
<label for="terms-and-conditions"><input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required> I have read the terms</label>
</fieldset>
<!-- submit button -->
<input type="submit" value="Submit" />
</form>
Output:
And that's how you create a simple HTML form.
