- The <form> tag is used to create an HTML form for user input.
- The <input> HTML element is used to create interactive controls for web-based forms to accept data from the user. We must write inside the tag.
HTML Types of Inputs in HTML Form
- Text Input (<input type="text" />): Allows users to enter a single line of text.
- Password Input (<input type="password" />): Hides the entered text for secure password entry.
- Email Input (<input type="email" />): Validates and formats input as an email address.
- Number Input (<input type=" number" />): Accepts numeric input and provides increment/decrement controls.
- Radio Buttons (<input type="radio" />): Allows users to choose a single option from a group of options.
- Checkboxes (<input type="checkbox" />): Allows users to select multiple options.
- Dropdowns (<select> and <option>): Provides a list of options for users to choose from.
- <datalist> Provide a predefined list of options for autocomplete suggestions.
- Textarea (<textarea>): Allows users to enter multiple lines of text.
- File Upload (<input type=" file">): Let users choose and upload files from their device.
- Submit Button (<input type="submit">): Submits the form data to the server.
<!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>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Urbanist:wght@300;400;600;700;800;900&display=swap");
html {
font-family: "jost", sans-serif;
background-color: #efefef;
}
h1 {
font-weight: bold;
}
.sameclass {
background-color: red;
}
</style>
<body>
<h1>HTML FORM</h1>
<!-- Add Form Here -->
<form>
<div>
<label for="password">Password</label>
<input type="password" id="password" class="sameclass" placeholder="Enter your password" />
</div>
<div>
<label for="number">max subject</label>
<input type="number" class="sameclass" id="number" max="5" min="1" value="1" />
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
</div>
<div>
<label for="hobbies"> Fav Hobbies: </label>
<input type="checkbox" name="interest" value="music" /> Music
<input type="checkbox" name="interest" value="sports" /> Sports
</div>
<div>
<label for="country">Fav Country: </label>
<select name="country" id="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
</div>
<div>
<label for="country">Select a Country:</label>
<input type="text" id="country" name="country" list="countries" />
<datalist id="countries">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</datalist>
</div>
<div>
<label for="comment"> Message Us: </label>
<textarea name="comments" rows="10" cols="100" placeholder="Enter your comments"></textarea>
</div>
<div>
<label for="file">Select File</label>
<input type="file" name="fileUpload" />
</div>
<input type="submit" value="Submit" />
<!-- or -->
<button type="submit">Submit</button>
</form>
</body>
</html>
Do leave your comments