<input> element
- These are used to collect different types of user input.
- Common types include text (<input type="text">), password (<input type="password">), checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), etc.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
</html>Output:
HTML Input Types
Below are the various input types that can be used in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Input Type Button
- It is used to define a button in a form.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
<h2>Input Type Button</h2>
<input type="button" value="Button">
</form>
</body>
</html>Output:
Input Type Checkbox
- It is used to define a checkbox in a form.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
<h2>Input Type Checkbox</h2>
Agree:<input type="checkbox">
</form>
</body>
</html>Output:
Input Type Color
- It is used for input fields that should contain a color.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
<h2>Input Type Checkbox</h2>
Agree:<input type="checkbox">
</form>
</body>
</html>Output:
Input Type Date
- It is used for input fields that contain date.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
<h2>Input Type Date</h2>
DOB:<input type="date">
</form>
</body>
</html>Output:
Input Type Datetime-local
- It is used for input fields that contain date and time.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
<h2>Input Type Datetime-local</h2>
Start-Time:<input type="datetime-local">
</form>
</body>
</html>Output:
Input Type Email
- It is used for input fields that contain an email id.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<h2>Input Type Email</h2>
<form>
Enter your email:
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
Input Type File
- It is used for input fields that contain a file as input.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<h2>Input Type File</h2>
Upload your Photos:
<input type="file" id="file">
</body>
</html>Output:
Input Type Hidden
- It defines a hidden input field from users.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<h2>Input Type Hidden</h2>
<input type="hidden" id="hidden">
<p>Note:The hidden field will be shown in source code</p>
</body>
</html>Output:
Input Type Image
- It is used for input fields that contain an image as input.
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<form>
<h2>Input Type Image</h2>
<input type="image" id="image" src="logo.png">
</form>
</body>
</html>Output:
Use of Various Types of Input in Forms Collectively
- In the below field, we have used input types text, email, password, tel, radio, range, number, reset, submit
Example:
<!DOCTYPE html>
<html>
<title>HTML Forms</title>
<head>
</head>
<body>
<div>
<h2>Student Details Form</h2>
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter student's name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter student's email" required>
</div>
<div>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" placeholder="Enter student's password" required>
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Enter student's age" required>
</div>
<div>
<label for="tel">Tel:</label>
<input type="tel" id="tel" name="tel" placeholder="Enter student's number" required>
</div>
<div>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div>
<label for="grade">Grade:</label>
<input type="range" id="grade" name="grade" min="1" max="10" value="5" required>
</div>
<div>
<input type="reset" id="reset">
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>Output:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/submit_registration" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="website">Website:</label>
<input type="url" id="website" name="website"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" required><br><br>
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br><br>
<label for="hobbies">Hobbies:</label><br>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label><br>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label><br><br>
<label for="profilePic">Profile Picture:</label>
<input type="file" id="profilePic" name="profilePic"><br><br>
<button type="button" onclick="alert('profile pic uploaded!')">Upload</button><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
