About Lesson
1. Input:
Input elements create various types of form fields, such as text boxes, password fields, checkboxes, radio buttons, and more, for user input.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Forms</title>
</head>
<body>
<h1>Text Input</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
</body>
</html>Output:
2. TextArea:
Textarea creates a multi-line text input field, allowing users to enter longer text or comments.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Forms</title>
</head>
<body>
<h1>Text Input</h1>
<form>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>
</form>
</body>
</html>
Output:
3. Select:
Select elements generate dropdown menus with options, enabling users to choose one item from a list of predefined 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>Html Forms</title>
</head>
<body>
<h1>Text Input</h1>
<form>
<label for="games">Select Your Favorite Game:</label>
<select id="games" name="games">
<option value="minecraft">Minecraft</option>
<option value="fortnite">Fortnite</option>
<option value="pubg">PlayerUnknown's Battlegrounds (PUBG)</option>
<option value="zelda">The Legend of Zelda: Breath of the Wild</option>
<option value="overwatch">Overwatch</option>
<option value="godOfWar">God of War</option>
<option value="fifa">FIFA series</option>
</select>
</form>
</body>
</html>
Output:
4. DataList:
Datalist is used in conjunction with input elements to provide a list of suggested options as users type into a text field.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Forms</title>
</head>
<body>
<h1>Text Input</h1>
<form>
<label for="processor">Select Processor Type:</label>
<input list="processorTypes" id="processor" name="processor" placeholder="Start typing...">
<datalist id="processorTypes">
<option value="Intel Core i3">
<option value="Intel Core i5">
<option value="Intel Core i7">
<option value="Intel Core i9">
<option value="AMD Ryzen 3">
<option value="AMD Ryzen 5">
<option value="AMD Ryzen 7">
<option value="AMD Ryzen 9">
</datalist>
</form>
</body>
</html>
Output:
5. Button:
Button elements create interactive buttons within a form, which can be used to submit data, reset the form, or trigger custom JavaScript functions.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Button</h1>
<form>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
