About Lesson
1. Text Input (<input type=”text”>):
Definition:
Allows users to enter a single line of text.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type text</h1>
<form>
<input type="text" name="username" placeholder="Enter your username">
</form>
</body>Output:
2. Password Input (<input type=”password”>):
Definition:
Similar to text input, but the entered text is masked for security.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type password</h1>
<form>
<input type="password" name="password" placeholder="Enter your password">
</form>
</body>
</html>Output:
3. Email Input (<input type=”email”>):
Definition:
Ensures that the entered text is a valid email address.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type email</h1>
<form>
<input type="email" name="email" placeholder="Enter your email">
</form>
</body>
</html>Output:
4. Number Input (<input type=”number”>):
Definition:
Allows users to enter a numeric value.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type number</h1>
<form>
<input type="number" name="quantity" min="1" max="100" placeholder="Enter quantity">
</form>
</body>
</html>
Output:
5. Checkbox (<input type=”checkbox”>):
Definition:
Allows users to select multiple options from a group of options.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type checkbox</h1>
<form>
<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music"> Music
</form>
</body>
</html>
Output:
6. Radio Button (<input type=”radio”>):
Definition:
Allows users to select one option from a group of options.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type radio</h1>
<form>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</form>
</body>
</html>Output:
7. Date Input (<input type=”date”>):
Definition:
Allows users to select a date.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type date</h1>
<form>
<input type="date" name="birthdate">
</form>
</body>
</html>Output:
8. File Input (<input type=”file”>):
Definition:
Allows users to upload files from their device.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type file</h1>
<form>
<input type="file" name="file">
</form>
</body>
</html>Output:
9. Submit Button (<input type=”submit”>):
Definition:
Submits the form data to the server.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type submit</h1>
<form>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
10. Reset Button (<input type=”reset”>):
Definition:
Resets all form fields to their default values.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type reset</h1>
<form>
<input type="reset" value="Reset">
</form>
</body>
</html>Output:
11. Color Picker (<input type=”color”>):
Definition:
This input type create a color picker. We can select any color using color picker.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type reset</h1>
<form>
<input type="color" value="Reset">
</form>
</body>
</html>Output:
12. Tel (<input type=”tel”>):
Definition:
The input type "tel" is used to create a input box for entering a telephone number. It allows users to input phone numbers .
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type TEL</h1>
<form>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890">
</form>
</body>
</html>Output:
13. Url (<input type=”url”>):
Definition:
Input for URLs, with basic validation.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type URL</h1>
<form>
<label for="website">Website:</label>
<input type="url" id="website" name="website">
<input type="submit" value="sub">
</form>
</body>
</html>Output:
14. Range (<input type=”range”>):
Definition:
Slider input for selecting a numeric value within a range.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types</title>
</head>
<body>
<h1>Input type RANGE</h1>
<form>
<label for="range">Volume:</label>
<input type="range" id="range" name="range" min="0" max="100">
</form>
</body>
</html>Output:
