html-series/06-Forms.html at main · jdcodebase/html-series · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06-Forms</title>
  </head>

  <body>
    <!-- Main Form -->
    <form action="">
      <!-- Full Name -->
      <label for="FullName">Full Name</label>
      <input type="text" id="FullName" required placeholder="Enter your Name" />
      <br /><br />

      <!-- Password Field -->
      <label for="password">Password</label>
      <input
        type="password"
        id="password"
        minlength="5"
        maxlength="10"
        placeholder="Enter Password"
      />
      <br /><br />

      <!-- Email Field -->
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your Email" />
      <br /><br />

      <!-- Number Input -->
      <label for="age">Age</label>
      <input type="number" id="age" min="1" max="10" placeholder="Enter Age" />
      <br /><br />

      <!-- Checkbox Group -->
      <label>Skills</label> <br />
      <input type="checkbox" id="html" /> HTML <br />
      <input type="checkbox" id="css" /> CSS <br />
      <input type="checkbox" id="js" /> JavaScript <br />
      <br /><br />

      <!-- Radio Button Group -->
      <label>Gender</label> <br />
      <input type="radio" name="gender" value="male" /> Male <br />
      <input type="radio" name="gender" value="female" /> Female <br />
      <br />

      <!-- File Upload -->
      <label for="resume">Resume</label>
      <input type="file" id="resume" />
      <br /><br />

      <!-- Textarea -->
      <label for="message">Message</label>
      <textarea
        id="message"
        rows="4"
        cols="40"
        placeholder="Write Your Message..."
      ></textarea>
      <br /><br />

      <!-- Select Dropdown -->
      <label for="country">Country</label>
      <select id="country">
        <option value="india">India</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
      </select>

      <!-- Dropdown with Optgroup -->
      <label for="region">Region</label>
      <select id="region">
        <optgroup label="Asia">
          <option value="india">India</option>
          <option value="china">China</option>
        </optgroup>

        <optgroup label="Europe">
          <option value="uk">UK</option>
          <option value="france">France</option>
        </optgroup>
      </select>
      <br /><br />

      <!-- Fieldset Group -->
      <fieldset>
        <legend>Personal Info</legend>

        <label for="name">Name</label>
        <input type="text" id="name" />
      </fieldset>
      <br /><br />

      <!-- Color Picker -->
      <label>Choose Color</label>
      <input type="color" />
      <br /><br />

      <!-- Buttons -->
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button">Just a Button</button>
    </form>
  </body>
</html>