Explanation: The <form> tag is used to define a form. It has attributes like action (where the data is submitted) and method (usually GET or POST). The form contains various input elements such as text, email, and buttons.
<form >
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>Output:
Explanation: HTML5 introduced new input types such as email, date, time, range, and url. These types help with user input validation and provide better user interfaces.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="date">Select a Date:</label>
<input type="date" id="date" name="date">
<label for="time">Select Time:</label>
<input type="time" id="time" name="time">
<label for="range">Select a range:</label>
<input type="range" id="range" name="range" min="1" max="100" step="1">
<label for="url">Website URL:</label>
<input type="url" id="url" name="url">
<button type="submit">Submit</button>
</form>Output:
Explanation: HTML input elements can have several useful attributes such as placeholder, required, maxlength, and pattern. These attributes help improve user experience and enforce rules on the input.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" maxlength="16" required>
<label for="phone">Phone (555-555-5555):</label>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required>
<button type="submit">Submit</button>
</form>Output:
Explanation: HTML5 provides built-in validation such as the required attribute. Additionally, you can use JavaScript to create custom validation logic.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
<button type="submit">Submit</button>
</form>Output:
<form id="customForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('customForm');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username.length < 3) {
alert('Username must be at least 3 characters long.');
event.preventDefault();
}
});
</script>Output:
Explanation: Elements like <label>, <fieldset>, and <legend> help to group and organize form content. Buttons like <button> can be used to submit or reset the form.
<label> with <input><label for="email">Email:</label>
<input type="email" id="email" name="email">
Output:
<fieldset> and <legend><fieldset>
<legend>Personal Information</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname">
</fieldset>Output:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>Output: