HTML forms are used on websites to collect information from users. They allow users to input information such as their name, email address, password, or feedback.
- The <form> tag defines the form structure.
- Form elements like <input>, <button>, and <select> are used to collect data.
- HTML forms are essential for tasks such as login, registration, and surveys.
Now, let us understand with the help of the example:
HTML
<html>
<body>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>
<br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
In this example:
- <form> defines a section for collecting user inputs with attributes specifying where (action) and how (method) to send the data.
- <label>, <input>, and <button> create a simple field for text input and a button to submit the form.
HTML forms include a variety of elements that allow users to input data. Understanding these elements and how to use them properly is key to creating a functional and user-friendly form.
1. Text Field
A text field allows users to enter a single line of text. It's one of the most commonly used input elements in forms, ideal for capturing user information like names, addresses, or usernames.
HTML
<html>
<body>
<h3>Example of Text Field</h3>
<form>
<label for="email">Email ID:</label><br>
<input type="text" name="email" id="email"><br>
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <input type="text"> element creates a single-line text field for user input.
- The <label> element provides a descriptive label for the text field, enhancing accessibility and usability.
2. Number Field
A number field allows the user to input only numerical values. It is useful when you expect numbers, such as age, quantity, or price.
HTML
<html>
<body>
<form>
<label for="age">Age:</label><br>
<input type="number" name="age" id="age">
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <input type="number"> element creates a numeric input field, allowing users to enter their age.
- The <label> element provides a descriptive label ("Age:") for the input field, enhancing accessibility and usability.
3. Password Field
A password field is used for capturing sensitive information such as passwords. This field hides the user's input with asterisks or dots.
HTML
<html>
<body>
<form>
<label for="password">Password:</label><br>
<input type="password" name="password" id="password">
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <input type="password"> element creates a password input field where user entries are masked, enhancing privacy during data entry.
Radio buttons are used when you need to present a set of options, but the user can select only one. They are useful for choices like gender, status, or preferences.
HTML
<html>
<body>
<form>
<label>Select Gender:</label><br>
<input type="radio" name="gender"
id="male" value="Male">
<label for="male">Male</label><br>
<input type="radio" name="gender"
id="female" value="Female">
<label for="female">Female</label>
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <input type="radio"> elements create radio buttons, allowing users to select one option from the provided choices (e.g., "Male" or "Female").
- Each <label> element is associated with a corresponding radio button, providing descriptive text and enhancing accessibility by enabling users to click on the label to select the associated option.
5. Checkboxes
Checkboxes allow users to select one or more options. They are commonly used for multi-selection fields like preferences or terms agreement.
HTML
<html>
<body>
<form>
<b>Select Subjects:</b><br>
<input type="checkbox" name="subject"
id="maths" value="Maths">
<label for="maths">Maths</label><br>
<input type="checkbox" name="subject"
id="science" value="Science">
<label for="science">Science</label><br>
<input type="checkbox" name="subject"
id="english" value="English">
<label for="english">English</label>
</form>
</body>
</html>
In this example:
- The <input type="checkbox"> elements create checkboxes, allowing users to select multiple subjects (e.g., "Maths," "Science," "English") simultaneously.
6. File Select Box
The file input allows users to select a file from their local device and upload it. It is created using the <input> element with type="file".
HTML
<html>
<body>
<form>
<label for="fileupload">Upload a file:</label>
<input type="file" name="fileupload" id="fileupload">
</form>
</body>
</html>
In this example:
- The <input type="file"> element creates a file upload field, allowing users to select a file from their device for submission.
- The <label> element provides a descriptive label ("Upload a file:") for the file input field, enhancing accessibility and usability.
7. Textarea
A textarea allows users to input multi-line text. It is created using the <textarea> element.
HTML
<html>
<body>
<form>
<label for="description">Description:</label><br>
<textarea name="description"
id="description" rows="5" cols="50"></textarea>
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <textarea> element creates a multi-line text input field, allowing users to enter longer blocks of text, such as a description or comments.
- The <label> element provides a descriptive label ("Description:") for the textarea, enhancing accessibility and usability by indicating the purpose of the input field.
8. Select Boxes
A select box presents a dropdown list from which the user can choose one (or multiple) options.
HTML
<html>
<body>
<form>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <select> element creates a drop-down list labeled "Country," allowing users to choose one option from the provided list.
- Each <option> element within the <select> defines an individual choice in the drop-down menu, such as "India," "Sri Lanka," and "Australia."
Submit and reset buttons are essential in HTML forms. The submit button sends the form data to the server, while the reset button restores the form fields to their default values.
HTML
<html>
<body>
<form action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
HTML Form DesignIn this example:
- The <input type="submit"> element creates a button that, when clicked, submits the form data to the server.
- The <input type="reset"> element creates a button that, when clicked, resets all form fields to their default values
1. Action Attribute
The action attribute specifies what happens when the form is submitted. It defines the URL (web page) where the form data will be sent after the user clicks the submit button.
HTML
<html>
<body>
<form action="test.php" method="post">
<label for="username">Username:</label>
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
</body>
</html>
In this example:
- The form sends the entered username to the "test.php" page upon submission.
- The action attribute defines the destination for the form data.
2. Target Attribute
The target attribute controls where the results of the form submission will open. By default, it opens in the same window (_self). If you want the result to open in a new tab, set the target attribute to _blank.
In this example:
HTML
<html>
<body>
<form action="test.php" target="_blank">
<label for="username">Username:</label>
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
</body>
</html>
- The form opens the response (from "test.php") in a new browser tab.
- The target="_blank" attribute ensures a new tab is used for the response.
3. Name Attribute
The name attribute is required for each input field in a form. If you don't specify a name for an input field, its value won't be sent when the form is submitted.
In this example:
HTML
<!DOCTYPE html>
<html>
<body>
<form action="/test.php" target="_blank">
Username:<br>
<input type="text">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- The input field's value is submitted with the name "username".
- Without the name attribute, the input's value would not be sent to the server.
4. Method Attribute
It is used to specify the HTTP method used to send data while submitting the form. There are two kinds of HTTP Methods, which are GET and POST.
- GET Method: In the GET method, form data is visible in the URL of the browser after submission. This is not ideal for sensitive information like passwords.
In this example:
HTML
<html>
<body>
<form action="/test.php" target="_blank"
method="GET">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- Post Method : In the POST method, form data is sent in the background and is not visible in the browser's address bar. This method is more secure for submitting sensitive data.
In this example:
HTML
<html>
<body>
<form action="/test.php" target="_blank"
method="post">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- Use Semantic HTML5 Elements: Utilize <form>, <fieldset>, <legend>, and <label> to enhance form structure and accessibility.
- Keep Forms Concise: Limit the number of fields to essential information to prevent user overwhelm.
- Provide Clear Labels and Instructions: Use descriptive labels and placeholders to guide users in completing the form accurately.
- Implement Inline Validation: Provide real-time feedback to users as they complete the form to reduce errors and improve user experience.
Similar Reads
How To Create Registeration Form in HTML HTML Registration Form is a web-based form designed to collect user information such as name, email, password, and other details. It typically includes input fields, validation, and a submit button to register users on a website.HTML Registration FormHow to Create HTML Registration FormBasic Structu
2 min read
HTML Login Form HTML login form is used to authenticate users and grant access to secure sections of a website or application. It typically includes input fields for username/email and password, along with a submit button for logging in. Additionally, there is often an option for new users to create an account or s
3 min read
HTML Form Design HTML forms are used on websites to collect information from users. They allow users to input information such as their name, email address, password, or feedback.The <form> tag defines the form structure.Form elements like <input>, <button>, and <select> are used to collect d
8 min read
How to add Radio Buttons in form using HTML ? In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro
1 min read
How to Add a Telephone Number into a form using HTML? In this article, we will learn how to add a telephone number field to an HTML form. Telephone numbers have numerous advantages and are an important component of contact forms, allowing for direct communication with the user. Users can receive messages or notifications regarding the services provided
2 min read
How to define a form for user input using HTML5 ? In this article, we will learn how to create a form in a webpage by using the <form> tag. This tag is used to create form for user input. Also there are many elements which are used within form tag. Syntax: <form> Form Content... </form> Example: The following code snippet demonstr
1 min read
How to Prevent Buttons from Submitting Forms in HTML? We will use different approaches for preventing buttons from submitting forms. There are several reasons where preventing the buttons from submitting forms, i.e., if the user hasn't completed all the required form fields, or added incorrect details in the form, etc. Below are the approaches to preve
3 min read
How to toggle password visibility in forms using Bootstrap-icons ? Toggle password visibility in forms allows users to reveal or hide their typed passwords for convenience and security. Using Bootstrap icons, you can implement this feature by toggling the input field's type attribute between "password" and "text" upon icon click, revealing or hiding the password. A
2 min read
How to perform form validation for a required field in HTML ? Performing form validation for a required field in HTML ensures that a user must fill in specific fields before submitting a form. This is typically done using the required attribute, which prevents form submission if the field is left blank, ensuring proper data input.Table of ContentRequired attri
4 min read
How do we take password input in HTML forms ? In this article, we learn how to create a password input field in HTML. This can be done by using the <input> tag with type attribute which is set to the value "password". It involves sensitive information about the data of the user. The text in the input password field will be changed into bu
1 min read