HTML Notes: Images, Videos, Forms, and
Inputs
1. Images in HTML
The <img> tag is used to embed images in an HTML document.
Syntax:
<img src="image.jpg" alt="Description of image" width="300" height="200">
src: Specifies the image file location.
alt: Provides alternative text for accessibility.
width & height: Defines the dimensions of the image.
Example:
<img src="example.png" alt="Example Image" width="400" height="300">
2. Videos in HTML
The <video> tag is used to embed video content.
Syntax:
<video width="600" height="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
controls: Adds play, pause, volume, etc.
<source>: Specifies video files (multiple formats for compatibility).
Example:
<video width="500" controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
3. Forms in HTML
Forms are created using the <form> tag to collect user input.
Syntax:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
action: Specifies where form data is sent.
method: Defines submission type (GET/POST).
Example:
<form action="process.php" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Sign Up">
</form>
4. Input Types in Forms
Different types of inputs allow users to enter data in various formats.
Common Input Types:
<input type="text" placeholder="Enter text">
<input type="password" placeholder="Enter password">
<input type="email" placeholder="Enter email">
<input type="number" placeholder="Enter number">
<input type="date">
<input type="checkbox"> Accept Terms
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="file">
<input type="submit" value="Submit">
Example:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br>
<input type="submit" value="Register">
</form>
These examples provide a basic foundation for working with images, videos, forms, and
inputs in HTML.
Do this