Input elements are special building blocks in html which are used to create interactive fields in the webpage. They are used to gather information like email, name and phone number from the user. Lets discuss one by one and finally with an example which covers most of the input elements
Text Input
It is like a empty canvas where users can paint it in a single line using text input.
Attributes:
name : Assigns unique value to the field.
placeholder: Provides hint to the user on what data they need to enter as input.
value : sets a default value to the field.
required: makes the field mandatory in order to proceed/submit.
maxlength: specifies maximum no of characters allowed.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Elements</title>
</head>
<body>
<p><b>Text Input</b></p>
<label for="first name">First Name</label>
<input type="text" name="first name" id="first name" placeholder="Enter Your First Name">
<br>
<br>
<label for="last name">Last Name</label>
<input type="text" name="last name" id="last name" placeholder="Enter Your Last Name">
</body>
</html>
Output:
Password Input
It basically hides the entered text for sensitive information like passwords
Attributes:
Same as the text input but typically uses autocomplete="off" in order to prevent browsers from saving passwords.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Input</title>
</head>
<body>
<label for="Password">Password</label>
<input type="password" name="password" id="password" placeholder="Enter your password">
</body>
</html>
Output:
Email Input
Its main purpose is to validate the email format . It is having same attributes as text but additionally with email validation.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Input</title>
</head>
<body>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Your Email">
</body>
</html>
Output:
Numerical Input
This input type will accepts only numerical values that is 1,2,3..n.
Attributes:
min - It takes values starting from this range only.
max - The values beyond this ranges will not be accepted.
step - It increments or decrements based on this step. (suppose min:5 max:15 step: 0.5) then values are 5.5,6,6.5 ... 15.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numerical Input</title>
</head>
<body>
<label for="value">Value</label>
<input type="number" name="value" id="value" min="5" max="15" placeholder="Enter The Number">
<br>
<br>
<label for="value One">Value One</label>
<input type="number" name="Value One" id="Value One" min="5" max="15" placeholder="Enter The Number" step="0.5">
</body>
</html>
Output:
Date Input
This input will display a date picker where we can selects the dates. It does not have any attributes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Input</title>
</head>
<body>
<label for="date">Date</label>
<input type="date" name="date" id="date">
</body>
</html>
Output:
File Input
This input is used to enable file uploads. It is also having no attributes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Input</title>
</head>
<body>
<label for="file">Upload Your File Here</label>
<input type="file" name="file" id="file">
</body>
</html>
Output:
Checkbox Input
This input is used when we need to select multiple items from the list.
Attributes:
name - It gives a shared name for all the checkboxes in the group.
value - It defines the value which is present beside the checkbox.
checked - It will automatically check the box while presenting checkbox.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Input</title>
</head>
<body>
<label for="checkbox"> select items from checkbox</label>
<input type="checkbox" name="check" value="HTML" id="check">HTML
<input type="checkbox" name="check" value="CSS">CSS
<input type="checkbox" value="HTML + CSS">HTML & CSS
</body>
</html>
Output:
Radio Button Input
This input is used when we need to select one element from the group. It is having same attributes as checkboxes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button Input</title>
</head>
<body>
<label for="Question">Do you know about Radio Button Input </label>
<input type="radio" name="reply" value="Yes">Yes
<input type="radio" name="reply" value="No">No
</body>
</html>
Output:
Button Input
This input is used to create buttons in order to perform clickable actions. There are different types in this buttons they are
submit - It is used to submit a form
reset - It is used to reset the data which is filled already.
button - It is used to create custom button but not useful more in HTML.(used for Javascript).
Finally will end with demonstration of all these input elements combinedly.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Element Playground</title>
</head>
<body>
<h1>Explore Different Input Elements</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" autocomplete="off">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address">
<br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100">
<br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br><br>
<label for="photo">Upload Photo:</label>
<input type="file" id="photo" name="photo">
<br><br>
<label>Interests:</label><br>
<input type="checkbox" name="interests" value="music"> Music
<input type="checkbox" name="interests" value="movies"> Movies
<input type="checkbox" name="interests" value="sports"> Sports
<br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<br><br>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>
</body>
</html>
Output:
