INPUT elements in HTML
HTML
`<input>` elements are used to create various types of form controls
where users can input data. The `type` attribute of the `<input>` tag
determines the kind of control that will be created.
Some common types
of `<input>` elements:
1. Text Input:
- Creates a single-line text input field.
<input type="text" name="username"
placeholder="Enter your username" />
2. Password Input:
- Creates a password input field where the
entered text is usually masked for security.
<input type="password"
name="password" />
3. Checkbox:
- Creates a checkbox that allows users to
select or deselect an option.
<input
type="checkbox" name="subscribe" value="yes"
/> Subscribe to newsletter
4. Radio Button:
- Creates a radio button that allows users
to select one option from a group.
<input type="radio"
name="gender" value="male" /> Male
<input type="radio"
name="gender" value="female" /> Female
5. File Input:
- Creates a file upload input, allowing
users to select files from their device.
<input type="file" name="file" />
6. Hidden Input:
- Creates an invisible input field that can
store data but is not displayed to the user.
<input type="hidden"
name="hiddenField" value="hiddenValue" />
7. Submit Button:
- Creates a button that submits the form
data to the server.
<input type="submit"
value="Submit" />
8. Reset Button:
- Creates a button that resets the form to
its initial state.
<input type="reset"
value="Reset" />
9. Image Input:
- Creates a clickable image that can be used
as a submit button.
<input
type="image" src="submit_button.png" alt="Submit"
/>
10. Number Input:
- Creates a numeric input field,
restricting input to numbers.
<input
type="number" name="quantity" />
11. Email Input:
- Creates an input field specifically
designed for email addresses.
<input type="email"
name="email" />
12. URL Input:
- Creates an input field specifically
designed for URLs.
<input type="url"
name="website" />
13. Date Input:
- Creates an input field for selecting a
date.
<input type="date"
name="birthdate" />
14. Color Input:
- Creates a color picker input field.
<input type="color"
name="color" />
15. Range Input:
- Creates a slider input for selecting a
value from a range.
<input
type="range" name="volume" min="0"
max="100" />
These are just a
few examples of the various types of `<input>` elements available in
HTML. Each type is designed for a specific input purpose, and you can use them
in combination to build interactive and user-friendly forms on your website.
Example:- an HTML form with various `<input>` elements:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Input Elements
Example</title>
</head>
<body>
<h2>User
Registration Form</h2>
<form
action="/submit-form" method="post">
<!-- Text Input -->
<label
for="username">Username:</label>
<input type="text"
id="username" name="username" placeholder="Enter your
username" required>
<br>
<!-- Password Input -->
<label
for="password">Password:</label>
<input type="password"
id="password" name="password" placeholder="Enter your
password" required>
<br>
<!-- Checkbox -->
<input type="checkbox"
id="subscribe" name="subscribe" value="yes">
<label
for="subscribe">Subscribe to newsletter</label>
<br>
<!-- Radio Buttons -->
<label>Gender:</label>
<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>
<br>
<!-- Number Input -->
<label
for="quantity">Quantity:</label>
<input type="number"
id="quantity" name="quantity" min="1"
max="10" value="1">
<br>
<!-- Date Input -->
<label
for="birthdate">Birthdate:</label>
<input type="date"
id="birthdate" name="birthdate">
<br>
<!-- File Input -->
<label for="file">Choose a
profile picture:</label>
<input type="file"
id="file" name="file" accept="image/*">
<br>
<!-- Submit Button -->
<input type="submit"
value="Submit">
<!-- Reset Button -->
<input type="reset"
value="Reset">
<!-- Hidden Input -->
<input type="hidden"
name="secret" value="hidden_value">
</form>
</body>
</html>
This example
includes text input, password input, checkbox, radio buttons, number input,
date input, file input, submit button, reset button, and a hidden input field.
The form is set to be submitted to the "/submit-form" URL using the
HTTP POST method.
------------------------------
0 Comments