Day 7 Progress: Enhancing HTML Skills

Today marked another step forward in my journey to mastering full-stack development. Here’s what I focused on:

Learned About the range Input Element
I delved into the range input element, which allows users to select a value from a specified range using a slider. This element is particularly useful for scenarios where a numerical value needs to be adjusted within a specific range, like setting volume or adjusting brightness. Understanding its attributes and how to integrate it into forms was both interesting and practical.
```
 <div>
     <label for="vol">Select your volume</label>
     <input type="range" 
     id="vol" 
     min="0" 
     max="100" 
     name="vol" 
     step="10" 
     value="70">
 </div>
 <button>submit</button>
```
Explored the textarea Tag
The textarea tag was another topic I explored. It’s designed for multi-line text input, providing a larger space for user input compared to a single-line text field. I learned how to adjust its size and attributes, such as rows and columns, to fit different use cases. This tag is crucial for creating forms that require detailed textual responses.
```
 <div>
     <label for="feedback" id="feedback">Please give feedback</label>
     <textarea name="feedback" id="feedback" rows="10" cols="100" placeholder="Enter your feedback"></textarea>
     <button>submit</button>
 </div>
```

Practiced Exercises
I completed three exercises focused on creating tables, which helped solidify my understanding of how to structure and display tabular data in HTML. Additionally, I worked on two form-related exercises to apply what I've learned about form elements, including input types and validation.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lv-3 Html</title>
 </head>
 <body>
     <div>
            <!--Q1) Recreate the table-->
     <table border="black">
         <caption>Student Information</caption>
         <tr>
             <th rowspan="6">Info</th>
             <th rowspan="2">Name</th>
             <th colspan="2">Address</th>
         </tr>
         <tr>
             <th>City</th>
             <th>House</th>
         </tr>
         <tr>
             <td>A</td>
             <td>Delhi</td>
             <td>1</td>
         </tr>
         <tr>
             <td >B</td>
             <td>Mumbai</td>
             <td>2</td>
         </tr>
         <tr>
             <td >C</td>
             <td>Kolkata</td>
             <td>3</td>
         </tr>
         <tr>
             <td >D</td>
             <td>Pune</td>
             <td>4</td>
         </tr>
     </table>
     </div>
     <br>
    <hr>
    <br>
     <div>
         <!--Q2 Recreate the following form using HTML-->
         <div>
             <form action="/server">
                 <div>
                     <label for="Name">Name:</label>
                     <input type="text" name="Name" id="Name">
                 </div>
                 <br>
                 <div>
                     Sex:
                     <input type="radio" name="gender" id="male">
                     <label for="male"> Male</label>
                     <input type="radio" name="gender" id="female">
                     <label for="male"> Female</label>
                     <input type="radio" name="gender" id="others">
                     <label for="Others">Others</label>
                 </div>
                 <br>
                 <div>
                     <label for="country">Country: </label>
                     <select name="Country" id="country">
                         <option value="" disabled selected>Select an option</option>
                         <option value="India">India</option>
                         <option value="Bangladesh">Bangladesh</option>
                         <option value="Pakisthan">Pakisthan</option>
                         <option value="Srilanka">Srilanka</option>
                     </select>
                 </div>
                 <br>
                 <div>
                     <label for="message">Message: </label>
                     <br>
                     <textarea name="message" id="message" cols="30" rows="4">
                     </textarea>
                 </div>
                 <br>
                 <div>

                     <input type="checkbox" name="subscribe" id="subscribe">
                     <label for="checkbox"> Subscribe?</label>
                 </div>
                 <br>
                 <button>Submit</button>
             </form>
         </div>
     </div>
     <br>
     <hr>
     <div>
         <form action="/action">
             <h2>Feedback Form</h2>
             <label for="name"> Name:</label>
             <input type="text" name="name" id="name" placeholder="Write your name">
             <br>
             <br>
             <label for="email" id="email">Email:</label>
             <input type="email" name="email" id="email" placeholder="Write your email">
             <br>
             <br>
             <label for="message">Message:</label>
             <br>
             <textarea name="message" id="message" rows="4" cols="30"></textarea>
             <br>
             Rate us our of 5:
             <br>
             <input type="radio" name="rate" id="1">
             <label for="rate">1</label>
             <br>
             <input type="radio" name="rate" id="2">
             <label for="name">2</label>
             <br>
             <input type="radio" name="rate" id="3">
             <label for="rate">3</label>
             <br>
             <input type="radio" name="rate" id="4">
             <label for="rate">4</label>
             <br>
             <input type="radio" name="rate" id="5">
             <label for="rate">5</label>
             <br>
             <br>
             <button>Send your message!</button>
         </form>
     </div>
 </body>
 </html>

These exercises and concepts are enhancing my ability to create more interactive and user-friendly web forms and interfaces. Looking forward to applying these skills in my upcoming projects!