Shiv's blog

Practicing HTML Forms with fieldset and legend

Practicing HTML Forms with fieldset and legend

Shiv Shekhawat's photo
Shiv Shekhawat
·

2 min read

In the previous blog we talked about HTML Forms and how they work, In this blog we will do some mini projects based on the prior knowledge

1. Form

Do figure out how to code this without looking at the answer first.

Code for it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Job Application</h1>
    <form action="">
        <label for="name">Name:</label>
        <br/>
        <input type="text" id="name">
        <br/>
        <label for="email">Email:</label>
        <br/>
        <input type="email" id="email">
        <br/>
        <label for="Phone">Phone:</label>
        <br/>
        <input type="tel" id="Phone">
        <br/>
        <label for="resume">Resume:</label>
        <br/>
        <input type="file" id="resume">
        <br/>
        <label for="experience">Experience In Years:</label>
        <br/>
        <input type="number" id="experience" min="0" max="50">
        <br/>
        <fieldset>
            <legend>Skills:</legend>
            <label for="checkbox1">HTML</label>
            <br/>
            <input type="checkbox" id="checkbox1">
            <br/>
            <label for="checkbox2">CSS</label>
            <br/>
            <input type="checkbox" id="checkbox2">
            <br/>
            <label for="checkbox3">JavaScript</label>
            <br/>
            <input type="checkbox" id="checkbox3">
            <br/>
        </fieldset>
        <br/>
        <label for="dropdown">Highest Education</label>
        <select name="list" id="dropdown">
            <option value="">--Seclect an option--</option>
            <option value="High School">High Shool</option>
            <option value="Graduate">Graduation</option>
            <option value="Post Graduate">Post Graduation</option>
        </select>
        <fieldset>
            <legend>Availability</legend>
        <label for="radio1">Full-time</label>
        <br/>
        <input type="radio" name="availability" id="radio1">
        <br/>
        <label for="radio2">Part-time</label>
        <br/>
        <input type="radio" name="availability" id="radio2">
    </fieldset>
        <label for="textarea">Additional Comments</label>
        <br/>
        <textarea name="comments" id="textarea" cols="30" rows="2"></textarea>
        <input type="reset" value="Reset Values">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

2.Form

Code for it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Complex Form</h1>
    <form action="">
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name">
        <label for="email">Email:</label>
        <input type="email" id="email">
        <label for="tele">Phone:</label>
        <input type="tel" id="tele">
        <label for="date">Date of Birth:</label>
        <input type="date" id="date">
        <span>Gender</span>
        <input type="radio" id="radio1" name="gender">
        <label for="radio1">Male</label>
        <input type="radio" id="radio2" name="gender">
        <label for="radio2">Female</label>
    </fieldset>
        <fieldset>
            <legend>Address</legend>
            <label for="address1">Street</label>
            <input type="text" id="address1">
            <label for="address12">State</label>
            <input type="text" id="address2">
            <label for="address3">Zip Code</label>
            <input type="number" id="address3">
        </fieldset>
    <fieldset>
        <legend>Other Information</legend>
        <label for="textarea">Comments</label>
        <textarea name="area" id="textarea" cols="30" rows="5"></textarea>
        <label for="checkbox">I agree to the terms of service</label>
        <input type="checkbox" id="checkbox">
    </fieldset>
    <button>Submit</button>
    <input type="reset" value="Reset Values">
</form>
</body>
</html>

3.Form

Code for it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Event Registration</h1>
    <label for="name">Name:</label>
    <br/>
    <input type="text" id="name">
    <br/>
    <label for="email">Email:</label>
    <br/>
     <input type="text" id="email">
    <br/>
      <label for="phone">Phone:</label>
    <br/>
     <input type="tel" id="phone">
    <br/>
    <label for="occupation">Occupation:</label>
    <br/>
    <select  id="occupation">
        <option value="Government Employee">Govt.</option>
        <option value="Self Employed">Private Sector</option>
        <option value="business">Business</option>
        <option value="other">Other</option>
    </select>
    <fieldset>
        <legend>Topics Of Interest</legend>
 <label for="HTML">HTML</label>
    <br/>
    <input type="checkbox" id="HTML">
    <br/>
 <label for="CSS">CSS</label>
    <br/>
    <input type="checkbox" id="CSS">
    <br/>
     <label for="JavaScript">JavaScript</label>
    <br/>
    <input type="checkbox" id="JavaScript">
    <br>
    </fieldset>
    <label for="textbox">Comments:</label>
    <br/>
    <textarea id="textbox" cols="30" rows="2"></textarea>
    <button>Register</button>
</body>
</html>

That's it for today stay tuned for more updates.

Do create your own forms for practice

HTML5WeMakeDevsBlogsWithCCWeb DevelopmentBeginner Developers