webdev/index.html at main · 3iyam8ings/webdev · 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
<!DOCTYPE html>
<html>
<form style="background-color:lightblue">
 <h1>Application Form</h1>
  <p>
   Required fields are followed by
   <strong><span aria-label="required">*</span></strong>
  </p>
<section>
 <h2>Personal Information</h2>
<p>
 <label for="name">
  <span>Name: </span>
  <strong><span aria-label="required">*</span></strong>
 </label>
  <input type="text" id="name" name="username" required />
</p>
<p>
 <label for="age">
  <span>Age: </span>
  <strong><span aria-label="required">*</span></strong>
 </label>
  <input type="number" id="age" name="user-age" required />
</p>
<p>
 <label for="mail">
  <span>E-Mail: </span>
  <strong><span aria-label="required">*</span></strong>
 </label>
  <input type="email" id="mail" name="user-mail" required />
</p>
<p>
 <label for="phone-num">
  <span>PhoneNumber: </span>
  <strong><span aria-label="required">*</span></strong>
 </label>
  <input type="password" id="phone-num" name="number" required />
</p>

 <fieldset>
  <legend>EDUCTAION</legend>
  <ul>
   <li>
    <label for="t_1">
     <input type="radio" id="t_1" name="EDUCATION" value="A" />
      1st YEAR
      </label>
  </li>
   <li>
    <label for="t_2">
     <input type="radio" id="t_2" name="EDUCATION" value="B" />
      2st YEAR
      </label>
  </li>
   <li>
    <label for="t_3">
     <input type="radio" id="t_3" name="EDUCATION" value="C" />
      3st YEAR
    </label>
  </li>
   <li>
    <label for="t_4">
     <input type="radio" id="t_4" name="EDUCATION" value="D" />
      4st YEAR
     </label>
    </li>
  </ul>
 </fieldset>
</section>
<section>
 <p>
  <button type="submit">Submit</button>
 </p>
</section>

</form>
<div id="success-message">🎉 Form submitted successfully!</div>

</html>