HTML-Learning/forms.html at master · manojn26/HTML-Learning · 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
<!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>HTML Forms</title>
  </head>
  <body>
    <div>
      <form action="" method="get" autocomplete="on" novalidate>
        <label for="username">Enter Name </label>
        <input type="text" id="username" name="u_name" /><br />
        <label for="userclass">Enter Your Class</label>
        <input type="text" id="userclass" name="u_class" /><br />
        <label for="projecttitle">Enter Your Project Title</label>
        <input type="text" id="projecttitle" name="u_project_title" /><br />
        <label for="projectfile">Upload Your Project File</label>
        <input type="file" name="u_project_file" id="projectfile" /><br />
        <p>Choose Your Favourite Web Language</p>
        <input type="radio" name="fav_lang" id="html" value="html" />
        <label for="html">HTML</label><br />
        <input type="radio" name="fav_lang" id="css" value="css" />
        <label for="css">CSS</label><br />
        <input
          type="radio"
          name="fav_lang"
          id="javascript"
          value="javascript"
        />
        <label for="javascript">Javascript</label><br />
        <p>Check Boxes</p>
        <input
          type="checkbox"
          name="vehicle1"
          id="vehicle1"
          value="Bike"
          checked
        />
        <label for="vehicle1">I have a bike</label>
        <input type="checkbox" name="vehicle2" id="vehicle2" value="Car" />
        <label for="vehicle2">I have a car</label>
        <input type="checkbox" name="vehicle3" id="vehicle3" value="Bycycle" />
        <label for="vehicle3">I have a bycycle</label>
        <p>Select Values</p>
        <label for="cars">Choose a Car</label>
        <select name="cars" id="cars" multiple>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="fiat" selected>Fiat</option>
          <option value="audi" selected>Audi</option>
          <option value="omni">Omni</option>
          <option value="toyota">Toyota</option>
          <option value="fortunar">Fortunar</option>
          <option value="audi">Audi</option>
        </select>
        <p>Data List</p>
        <input list="browsers" />
        <datalist id="browsers">
          <option value="Internet Explorer"></option>
          <option value="Firefox"></option>
          <option value="Chrome"></option>
          <option value="Opera"></option>
          <option value="Safari"></option>
        </datalist>

        <input type="submit" value="Submit" />
      </form>
    </div>
  </body>
</html>