■ HTML Forms, Media, Meta Tags & Validation -
Detailed Notes
1. Creating a Simple Form
The element is the container for all input fields that collect data from users.
<form action="server_page.php" method="post">
<!-- form elements here -->
</form>
Attributes:
- action: URL or file where form data is sent.
- method: Defines how data is sent (GET or POST).
- target: Defines where to display response (_self, _blank).
- autocomplete: Enables/disables autofill (on, off).
- novalidate: Disables HTML validation.
2. Input Types
<input type="text" name="username" placeholder="Enter Username">
<input type="password" name="password">
<input type="email" name="email">
<input type="number" min="1" max="100">
<input type="date" name="dob">
<input type="submit" value="Register">
3. Radio Button and Checkbox
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="hobby" value="music"> Music
<input type="checkbox" name="hobby" value="sports"> Sports
4. Select, Textarea, and Button
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>
<textarea rows="4" cols="40"></textarea>
<button type="submit">Submit</button>
5. Media Tags
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
6. Favicon and Meta Tags
<link rel="icon" type="image/png" href="[Link]">
<meta charset="UTF-8">
<meta name="description" content="HTML Form Tutorial">
<meta name="keywords" content="HTML, forms, input">
<meta name="author" content="Arnav Jain">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7. Data Validation and Constraint Validation
<form>
<input type="text" name="username" required minlength="3" maxlength="10">
<input type="email" name="email" required>
<input type="password" name="pass" pattern="[A-Za-z0-9]{6,}" required>
<input type="number" name="age" min="18" max="60">
<input type="submit" value="Register">
</form>
8. Mini Project: Registration Form
<form action="[Link]" method="post">
<label>Username:</label>
<input type="text" name="username" required><br>
<label>Email:</label>
<input type="email" name="email" required><br>
<label>Password:</label>
<input type="password" name="password" required><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="music"> Music
<input type="checkbox" name="hobby" value="sports"> Sports<br>
<label>Country:</label>
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select><br>
<label>Message:</label>
<textarea name="message" rows="4"></textarea><br>
<button type="submit">Register</button>
</form>