Image and Form Tags in HTML

HTML Image and Form Tags

Using the <img> Tag

The <img> tag is used to display images in a web page. It requires at least one attribute: src, which specifies the image source (URL or file path).

Basic Syntax

<img src="image_url" alt="Description of Image" width="300" height="200">

Example of <img> Tag

Below is an example of an image displayed using the <img> tag:

This is an image with a specified width of 300px and height of 200px. The alt attribute provides alternative text for the image if it fails to load.

Responsive Images with <srcset>

The <srcset> attribute allows you to specify different image sizes for different screen resolutions, improving load times on mobile devices:

<img src="image.jpg" 
     srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" 
     alt="Responsive Image">

This ensures that different resolutions of the image are loaded depending on the screen size of the device.

Using the <figure> Tag for Images

The <figure> tag can be used to group an image and its caption together. This helps improve accessibility and structure:

<figure>
    <img src="example.jpg" alt="Image with Caption">
    <figcaption>This is an example image with a caption.</figcaption>
</figure>

The <figcaption> provides a description for the image, improving its accessibility.

Using the <form> Tag

The <form> tag is used to collect user input in a web page. Forms can contain various input elements like text fields, checkboxes, radio buttons, and submit buttons.

Basic Syntax

<form action="submit_form.php" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Submit</button>
</form>

Advanced Form Inputs

Forms can contain different input elements like <input>, <select>, and <textarea>. Here are more examples:

Radio Buttons

Radio buttons allow users to select only one option from a list:

<label>Choose a fruit:</label>
<input type="radio" name="fruit" value="apple"> Apple
<input type="radio" name="fruit" value="banana"> Banana
<input type="radio" name="fruit" value="orange"> Orange

Checkboxes

Checkboxes allow multiple options to be selected:

<label>Select your favorite colors:</label>
<input type="checkbox" name="color" value="red"> Red
<input type="checkbox" name="color" value="blue"> Blue
<input type="checkbox" name="color" value="green"> Green

Select Menu

The <select> tag is used to create a dropdown menu:

<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>