mate-academy · Kacper-Leman · May 19, 2023 · May 19, 2023 · May 19, 2023 · May 22, 2023
diff --git a/.linthtmlrc.json b/.linthtmlrc.json
@@ -1,3 +1,49 @@
 {
-  "extends": "@mate-academy/linthtml-config"
+  "attr-bans": [
+    "align",
+    "background",
+    "bgcolor",
+    "border",
+    "frameborder",
+    "style"
+  ],
+  "attr-name-ignore-regex": "viewBox",
+  "attr-no-dup": true,
+  "attr-quote-style": "double",
+  "attr-req-value": true,
+  "class-no-dup": true,
+  "doctype-first": true,
+  "doctype-html5": true,
+  "fig-req-figcaption": true,
+  "head-req-title": true,
+  "html-req-lang": true,
+  "id-class-style": false,
+  "id-no-dup": true,
+  "img-req-src": true,
+  "img-req-alt": "allownull",
+  "indent-width": 2,
+  "indent-style": "spaces",
+  "indent-width-cont": true,
+  "input-radio-req-name": true,
+  "spec-char-escape": true,
+  "tag-bans": [
+    "b",
+    "i",
+    "u",
+    "center",
+    "style",
+    "marquee",
+    "font",
+    "s"
+  ],
+  "tag-name-lowercase": true,
+  "tag-name-match": true,
+  "tag-self-close": "never",
+  "tag-close": true,
+  "text-ignore-regex": "&",
+  "title-no-dup": true,
+  "line-end-style": "lf",
+  "attr-new-line": 2,
+  "attr-name-style": "dash",
+  "attr-no-unsafe-char": true
 }
diff --git a/readme.md b/readme.md
@@ -1,7 +1,7 @@
 # HTML form
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_html-form/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_html-form/report/html_report/)
+- [DEMO LINK](https://Kacper-Leman.github.io/layout_html-form/)
+- [TEST REPORT LINK](https://Kacper-Leman.github.io/layout_html-form/report/html_report/)
 
 > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/#how-to-solve-the-layout-tasks-on-github)
 ___
@@ -40,7 +40,7 @@ Create HTML page with form. On form submit send form data to `https://mate-acade
 - Age should be at least `1` and at max `100` with a default value of `12`
 - The email field should have placeholder value: `email@example.com`.
 - Text fields should have `autocomplete="off"`.
-- `Submit` button should have a `type="submit"` 
+- `Submit` button should have a `type="submit"`
 - Vertical distance between inputs should be `10px`
 - Vertical distance between groups should be `20px`
 - Any other styles should be browser default

diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,210 @@
     <link rel="stylesheet" href="./style.css">
   </head>
   <body>
-    <h1>HTML Form</h1>
+    <form action="https://mate-academy-form-lesson.herokuapp.com/create-application">
+      <fieldset class="fieldset">
+        <legend>Personal information</legend>
+
+        <div class="form-field">
+          <label for="surname">Surnmae: </label>
+
+          <input
+            type="text"
+            name="surname"
+            id="surname"
+            autocomplete="off"
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="name">Name: </label>
+
+          <input
+            type="text"
+            name="name"
+            id="name"
+            autocomplete="off"
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="age">How old are You?</label>
+
+          <input
+            type="number"
+            name="age"
+            id="age"
+            autocomplete="off"
+            value="12"
+            min="1"
+            max="100"
+            required
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="date-birth">Full date of birth: </label>
+
+          <input
+            type="date"
+            name="dateBirth"
+            id="date-birth"
+            autocomplete="off"
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="agreement">I accept the term of the agreement </label>
+
+          <input
+            type="checkbox"
+            name="agreement"
+            id="agreement"
+            autocomplete="off"
+            required
+          >
+        </div>
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend>Registration</legend>
+
+        <div class="form-field">
+          <label for="email">E-mail: </label>
+
+          <input
+            type="email"
+            name="email"
+            id="email"
+            autocomplete="off"
+            placeholder="email@example.com"
+            required
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="password">Password: </label>
+
+          <input
+            type="password"
+            name="password"
+            id="password"
+            autocomplete="off"
+            required
+            minlength="5"
+            maxlength="10"
+          >
+        </div>
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend>An interesting fact about you!</legend>
+
+        <div class="form-field">
+          <label for="yes">Do you love cats?</label>
+
+          <input
+            type="radio"
+            name="lovesCats"
+            id="yes"
+            autocomplete="off"
+            value="Yes"
+          >
+
+          <label for="yes">Yes</label>
+
+          <input
+            type="radio"
+            name="lovesCats"
+            id="no"
+            autocomplete="off"
+            value="No"
+          >
+
+          <label for="no">No</label>
+        </div>
+
+        <div class="form-field">
+          <label for="colour">What is your favorite color?</label>
+
+          <input
+            type="color"
+            name="color"
+            id="colour"
+            autocomplete="off"
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="time">What time do you go to bed?</label>
+
+          <input
+            type="time"
+            name="time"
+            id="time"
+            autocomplete="off"
+          >
+        </div>
+
+        <div class="form-field">
+          <label for="cars">What are your favorite brand of cars?</label>
+
+          <select
+            name="cars"
+            id="cars"
+            autocomplete="off"
+            multiple
+          >
+            <option value="BMW">BMW</option>
+            <option value="Audi">Audi</option>
+            <option value="Lada">Lada</option>
+          </select>
+        </div>
+
+        <div class="form-field">
+          <label for="rating">How do you rate our work?</label>
+
+          <input
+            type="range"
+            name="rating"
+            id="rating"
+            value="0"
+            autocomplete="off"
+          >
+        </div>
+      </fieldset>
+
+      <fieldset class="fieldset">
+        <legend>Additional info:</legend>
+
+        <div class="form-field">
+          <label for="comment">Comments: </label>
+
+          <textarea
+            name="comment"
+            id="comment"
+            cols="20"
+            rows="2"
+            autocomplete="off"
+         ></textarea>
+        </div>
+
+        <div class="form-field">
+          <label for="recommend">Would you recommend us?</label>
+
+          <select
+            name="recommend"
+            id="recommend"
+            autocomplete="off"
+          >
+            <option value="Yes">yes</option>
+            <option value="no">no</option>
+          </select>
+        </div>
+      </fieldset>
+
+      <button type="submit">Submit</button>
+    </form>
     <script type="text/javascript" src="./main.js"></script>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,11 @@
-/* styles go here */
+.form-field {
+  margin-bottom: 10px;
+}
+
+.form-field:last-child {
+  margin-bottom: 0;
+}
+
+.fieldset {
+  margin-bottom: 20px;
+}