layout_html-form/src/index.html at 918d2055e3675e1373875c84411c1e7438744b07 · mate-academy/layout_html-form · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Form</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <script type="text/javascript" src="./main.js"></script>
    <form>
      <fieldset class="form__fieldset form-fieldset">
        <legend class="form-fieldset__title">Personal information</legend>
        <div class="field">
          <label for="surname">Surname: </label>
          <input type="text"
            name="surname"
            required
          >
        </div>
        <div class="field">
          <label for="name">Name: </label>
          <input type="text"
            name="firstname"
            minlength="25"
          >
        </div>
        <div class="field">
          <label for="age">How old are you? </label>
          <input type="number"
            name="age"
            min="0"
            max="100"
            value="12"
          >
        </div>
        <div class="field">
          <label for="birth">Full date of birth: </label>
          <input type="date" name="birth">
        </div>
        <div class="field">
          I accept the term of agreement
          <input type="checkbox" name="term">
        </div>
      </fieldset>
      <fieldset class="form__fieldset">
        <legend class="form-fieldset__title">Registration</legend>
        <div class="field">
          <label for="surname">E-mail: </label>
          <input type="email"
            name="email"
            placeholder="email@example.com"
          >
        </div>
        <div class="field">
          <label for="name">Password: </label>
          <input type="password"
            name="password"
            minlength="10"
          >
        </div>
      </fieldset>
      <fieldset class="form__fieldset form-fieldset">
        <legend class="form-fieldset__title">An interesting fact about you!</legend>
        <div class="field">
          <label for="surname">Do you love cats? </label>
          <input type="radio"
            name="yes"
            value="yes"
          >
          Yes
          </input>
          <input type="radio"
            name="no"
            value="no"
          >
          No
          </input>
        </div>
        <div class="field">
          <label for="name">What is your favorite color?</label>
          <input type="color" name="color">
        </div>
        <div class="field">
          <label for="name">What time do you go to bed?</label>
          <input type="time"
            name="hour"
            step="1"
          >
        </div>
        <div class="field">
          <label for="name">What are your favorite brand of cars?</label>
          <select name="car" multiple>
            <option value="BMW">BMW</option>
            <option value="AUDI">AUDI</option>
            <option value="Lada">Lada</option>
          </select>
        </div>
        <div class="field">
          <label for="name">How do you rate our work?</label>
          <input type="range"
            name="rate"
            value="0"
          >
        </div>
      </fieldset>
      <fieldset class="form__fieldset form-fieldset">
        <legend class="form-fieldset__title">Additional info: </legend>
        <div class="field">
          <label for="surname">Comments: </label>
          <textarea type="text"
            name="comments"
            autocomplete="off"
          >
          </textarea>
        </div>
        <div class="field">
          <label for="name">Would you recommend us?</label>
          <select>
            <option>Yes</option>
            <option>No</option>
          </select>
        </div>
      </fieldset>
    </form>
    <button type="submit">Submit</button>
  </body>
</html>