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.
<!--Driver Code Starts-->
<html>
<body>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Output:
- <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.
Input Elements in HTML Forms
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.
<!--Driver Code Starts-->
<html>
<body>
<h3>Example of Text Field</h3>
<!--Driver Code Ends-->
<form>
<label for="email">Email ID:</label><br>
<input type="text" name="email" id="email"><br>
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- 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.
<!--Driver Code Starts-->
<html>
<body>
<!--Driver Code Ends-->
<form>
<label for="age">Age:</label><br>
<input type="number" name="age" id="age">
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- 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.
<!--Driver Code Starts-->
<html>
<body>
<!--Driver Code Ends-->
<form>
<label for="password">Password:</label><br>
<input type="password" name="password" id="password">
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- The <input type="password"> element creates a password input field where user entries are masked, enhancing privacy during data entry.
4. Radio Buttons
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.
<!--Driver Code Starts-->
<html>
<body>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- 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.
<!--Driver Code Starts-->
<html>
<body>
<!--Driver Code Ends-->
<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