<input type="checkbox">
The input element with type="checkbox" creates a checkbox input on a web page. A checkbox allows users to select or deselect a particular option or multiple options from a set of choices.
Example
<!-- Checkbox with type="checkbox" -->
<input type="checkbox" id="myCheckbox" name="myCheckbox" value="checkboxValue">
<label for="myCheckbox">Check me</label>
When the user interacts with the checkbox (by clicking on it), the state of the checkbox (checked or unchecked) can be determined, and you can use JavaScript to perform actions based on this state.
// Example JavaScript to check the state of the checkbox
var checkbox = document.getElementById("myCheckbox");
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
alert("Checkbox is checked!");
} else {
alert("Checkbox is unchecked!");
}
});
<input type="color">
The input element with type="color" creates a color input on a web page, allowing users to select a color through a graphical interface, often presented as a color picker.
Example
<label for="colorPicker">Choose a color:</label>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000">
// Example JavaScript to get the value of the color input
var colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
var selectedColor = colorPicker.value;
console.log("Selected color: " + selectedColor);
});
In this JavaScript example, an event listener is added to the color input, and when the user selects a color, the input event is triggered, and the selected color value is logged to the console.
<input type="date">
The input element with type="date" creates a date input on a web page, allowing users to select a date from a calendar-like interface.
Example
<label for="datePicker">Select a date:</label>
<input type="date" id="datePicker" name="datePicker">
<input type="datetime-local">
The input element with type="datetime-local" creates a combined date and time input on a web page, allowing users to select both a date and a time.
Example
<label for="datetimePicker">Select a date and time:</label>
<input type="datetime-local" id="datetimePicker" name="datetimePicker">
<input type="email">
The input element with type="email" creates an email input on a web page, specifically designed for users to enter an email address. When you use type="email", the browser usually enforces basic email validation, ensuring that the entered text has a valid email format.
Example
<label for="emailInput">Enter your email:</label>
<input type="email" id="emailInput" name="emailInput" required>
You can access the value of the email input using JavaScript:
// Example JavaScript to get the value of the email input
var emailInput = document.getElementById("emailInput");
emailInput.addEventListener("input", function()
{
var enteredEmail = emailInput.value;
console.log("Entered email: " + enteredEmail);
});
<input type="file">
The input element with type="file" creates a file input on a web page, allowing users to select and upload files from their local device to a server. This input type is typically used within HTML forms to handle file uploads.
Example
<label for="fileInput">Choose a file:</label>
<input type="file" id="fileInput" name="fileInput">
When the user interacts with the file input, a file dialog is typically displayed, allowing them to browse their local device and select one or more files. The selected file(s) can then be submitted as part of a form to the server.
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="fileInput">Choose a file:</label>
<input type="file" id="fileInput" name="fileInput">
<button type="submit">Upload</button>
</form>
In this form example, the enctype="multipart/form-data" attribute is important for handling file uploads. The form's action attribute specifies the server endpoint where the file will be sent upon submission, and the method="post" attribute indicates that the form data should be sent using the HTTP POST method.
Keep in mind that handling file uploads involves server-side processing, and you'll need a server-side script (such as in PHP, Node.js, Python, etc.) to receive and process the uploaded file.
<input type="image">
The input element with type="image" creates an image input on a web page. It is used to submit a form when the user clicks on the image. When the user clicks on the image, the coordinates of the click are sent to the server as part of the form submission.
Example
<form action="/submit" method="post">
<!-- Submit button as an image -->
<input type="image" src="submit_button.png" alt="Submit Form">
</form>
<input type="month">
The input element with type="month" creates a month input on a web page, allowing users to select a specific month and year.
Example
<label for="monthPicker">Select a month:</label>
<input type="month" id="monthPicker" name="monthPicker">
<input type="number">
The input element with type="number" creates a numeric input on a web page, allowing users to enter numerical values. This input type is suitable for fields where only numeric values are expected, such as age, quantity, or any other numeric data.
Example
<label for="quantity">Enter quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" value="1">
In this example, the input element creates a number input. The id attribute is used to uniquely identify the input, and the name attribute is used to associate the input with a label. The min, max, and step attributes are optional and can be used to define constraints on the input:
min: The minimum allowed value.
max: The maximum allowed value.
step: The step increment when using arrow controls.
The value attribute sets the initial value of the input.
<input type="password">
The input element with type="password" creates a password input on a web page, designed for users to enter confidential information like passwords. The characters entered into a password input are typically masked (e.g., as asterisks or dots) for security reasons.
Example
<label for="password">Enter password:</label>
<input type="password" id="password" name="password">
<input type="radio">
The input element with type="radio" creates a radio button input on a web page. Radio buttons are often used in groups where users are allowed to select only one option from a set of mutually exclusive choices.
Example
<form>
<input type="radio" id="option1" name="group1" value="option1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="group1" value="option2">
<label for="option2">Option 2</label>
<input type="radio" id="option3" name="group1" value="option3">
<label for="option3">Option 3</label>
</form>
<input type="range">
The input element with type="range" creates a slider input on a web page, allowing users to select a value from a range by moving a slider handle.
Example
<!-- Range input with type="range" -->
<label for="volume">Adjust volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<input type="reset">
The input element with type="reset" creates a reset button in a form. When this button is clicked, it resets all the form fields to their default values. It essentially undoes any changes made by the user and returns the form to its initial state.
Example
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
<input type="search">
The input element with type="search" creates a search input on a web page. This input type is specifically designed for entering search queries.
Example
<label for="searchQuery">Search:</label>
<input type="search" id="searchQuery" name="searchQuery">
<input type="submit">
The input element with type="submit" creates a submit button in a form. When this button is clicked, it triggers the submission of the form, sending the form data to the server for processing.
Example
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
<input type="tel">
The input element with type="tel" creates a telephone input on a web page, intended for users to enter a valid telephone number.
Example
<label for="phoneNumber">Enter phone number:</label>
<input type="tel" id="phoneNumber" name="phoneNumber" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
<input type="text">
The input element with type="text" creates a text input on a web page, allowing users to enter any text value.
Example
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="time">
The input element with type="time" creates a time input on a web page, allowing users to select a specific time.
Example
<label for="meetingTime">Select meeting time:</label>
<input type="time" id="meetingTime" name="meetingTime">
<input type="url">
The input element with type="url" creates a URL input on a web page, intended for users to enter a valid URL (Uniform Resource Locator). This input type often includes built-in validation to ensure that the entered text follows a valid URL format.
Example
<label for="websiteUrl">Enter website URL:</label>
<input type="url" id="websiteUrl" name="websiteUrl" placeholder="https://example.com">
<input type="week">
The input element with type="week" creates a week input on a web page, allowing users to select a specific week and year. This input type typically provides a dropdown or similar interface for users to choose a week.
Example
<label for="weekPicker">Select a week:</label>
<input type="week" id="weekPicker" name="weekPicker">