Forms are an integral part of web development, enabling user interaction and data submission. Let's get into HTML input fields and forms, exploring various types, attributes, and adding validations.
Basic Input Field:
<input type="text" id="username" name="username" placeholder="Enter your username" required>
-
Type (
type
attribute): Specifies the type of input. In this case, it's text. -
ID (
id
attribute): Uniquely identifies the input field. -
Name (
name
attribute): Identifies the input when the form is submitted. - Placeholder: Text displayed in the input before any value is entered.
- Required: Specifies that the field must be filled out.
Textarea:
<textarea id="message" name="message" rows="4" cols="50" placeholder="Type your message here..."></textarea>
-
Textarea (
textarea
element): Allows for multi-line text input. - Rows and Cols: Define the visible size of the textarea.
Password Field:
<input type="password" id="password" name="password" placeholder="Enter your password" required>
-
Password (
type
attribute): Conceals the entered text.
Radio Buttons:
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
-
Radio (
type
attribute): Allows a user to select only one option from a set. - Name: Groups radio buttons to ensure only one is selected.
Checkboxes:
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>
-
Checkbox (
type
attribute): Allows multiple selections. - Checked: Initial state of the checkbox.
Select Dropdown:
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
-
Select (
select
element): Creates a dropdown list. -
Options (
option
element): Define the options within the dropdown.
Form Example:
<form action="/submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Submit">
</form>
-
Form (
form
element): Wraps form elements. -
Action (
action
attribute): Specifies where the form data is sent. -
Method (
method
attribute): Defines how to send form data (GET or POST).
Form Validation
1. Required Attribute
The required
attribute ensures a field must be filled out before submitting the form.
<input type="text" name="fullname" required>
2. Pattern Attribute
The pattern
attribute allows you to specify a regular expression for input validation.
<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="Enter your ZIP code">
3. Custom Validation with JavaScript
Validation can be done using JavaScript. For instance, for an email field
<input type="email" id="email" name="email" oninput="validateEmail()" required>
<span id="email-error"></span>
<script>
function validateEmail() {
const emailInput = document.getElementById('email');
const errorSpan = document.getElementById('email-error');
if (!emailInput.checkValidity()) {
errorSpan.textContent = 'Please enter a valid email address.';
} else {
errorSpan.textContent = '';
}
}
</script>
- oninput: Triggers the validation function when the user inputs data.
- checkValidity(): Checks if the input satisfies the validation constraints.
Advanced Forms
1. Date Input
This input type provides a date picker.
<input type="date" name="birthdate">
2. File Input
Allows users to upload files.
<input type="file" name="fileUpload">
3. Range Input
Creates a slider for selecting a value within a specified range.
<input type="range" name="volume" min="0" max="100">
4. Fieldset and Legend
Draws a box around the related elements.
<form>
<fieldset>
<legend>Personal Information</legend>
<!-- Inputs go here -->
</fieldset>
<button type="submit">Submit</button>
</form>
Top comments (1)
Here is the live example to play: stackblitz.com/edit/web-platform-f...