Forms are an important part of websites, allowing users to interact by submitting data, like signing up for an account or filling out a survey and for login. It is important learn about HTML forms in order to get your hands set on not only website design but also on UI.

Hello there, this is Nidhi a student at UI/UX Design Institute in Delhi. Today I’ve brought you a quick blog on the basics of HTML forms. This will help you to make your basics clear.

1. The Basics: The <form> Tag

The <form> tag is the starting point of any form. It contains all the input elements and defines where the data goes once the user submits it.

html

<form action="/submit-form" method="POST">

</form>

action: This tells the browser where to send the form data.

method: Defines how the data is sent. There are two common methods are:

GET: Sends form data as part of the URL this is used for non-sensitive data like search queries and all.

POST: Sends the data separately, this one is used for sensitive information like passwords.

2. Adding Input Fields

You can include additional input fields to the forms UI for better info gathering from the user.

Follow the below syntax.

Text Input Fields (<input type="text">)

The basic form input allows us to enter text, like a name or username.

<label for="name">Name:</label>

<input type="text" id="name" name="username" placeholder="Enter your name">

type="text": Indicates the input field is for text.

placeholder: This shows a hint inside the text box e.g. Your name: .

Password Input (<input type="password">)

For passwords, use the password input type, which hides the text as the user type their password.

<label for="password">Password:</label>

<input type="password" id="password" name="password">

Email Input (<input type="email">)

Email inputs validate the entered text to ensure it’s in email format.

<label for="email">Email:</label>

<input type="email" id="email" name="email">

3. Selecting Options: Radio Buttons and Checkboxes

You must include the Radio buttons and checkboxes in the form. This helps users to select their options easily.

Radio Buttons (<input type="radio">

<label>Gender:</label>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>

name: Groups the radio buttons together so only one can be selected.

value: The data is sent from the input field when this option is selected.

Checkboxes (<input type="checkbox">)

Checkboxes let users select multiple options if needed.

html

<label for="subscribe">Subscribe to newsletter:</label>

<input type="checkbox" id="subscribe" name="newsletter" value="yes">

4. Drop-Down Menus (<select> Tag)

Drop-down menus offer a list of options for the user to choose from in a compact format

html

<label for="country">Country:</label>

<select id="country" name="country">

<option value="USA">USA</option>

<option value="Canada">Canada</option>

<option value="uk">UK</option>

</select>

Users can select one option, but by adding the multiple attributes, they could select more than one option.

5. Text Area for Long Input (<textarea> Tag)

Textarea is for longer text, like comments or feedback, a text area is ideal.

html

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

6. Submit and Reset Buttons

Submit and reset are two important buttons to include in the forms. Through these buttons, we can end the entire process. Reset buttons are very useful, if the user put the wrong information in the form, they can use the reset button to again fill the form.

Submit Button (<input type="submit">)

<input type="submit" value="Submit">

Reset Button (<input type="reset">)

<input type="reset" value="Reset">

7. Validating Input

Modern browsers offer built-in validation features, so you can ensure users enter correct information.

required: Forces the user to fill out a field.

<input type="text" id="name" name="username" required>

min, max, maxlength, pattern: These attributes help validate specific input requirements, such as limiting text length or ensuring a field matches a specific pattern.

<input type="number" id="age" name="age" min="1" max="100">

<input type="text" name="zipcode" pattern="\d{5}" title="Enter a 5-digit ZIP code">

8. Accessibility

Accessibility is important to make sure your form can be used by everyone, including people with disabilities. A simple way to improve accessibility is by using labels properly and linking them to inputs with the for and id attributes.

<label for="name">Name:</label>

<input type="text" id="name" name="username">

Another useful element is the <fieldset> and <legend> tags to group related form elements, which help with clarity.

<fieldset>

<legend>Personal Information</legend>

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

</fieldset>

Conclusion

Building forms in HTML is very simple once you get the knowledge of the basics. By understanding the various input types, you can create user-friendly forms. I learned all the concepts during my classes at ADMEC Multimedia Institute in Rohini, Delhi. You can also start learning from the experts there.