Александра Петрова

static/index.html

@@ -9,8 +9,76 @@
 <main>
     <h1>Найди себе друга!</h1>
 
-    <!--Форму размещай тут-->
+    <form method ="post" action="/pets/orders">
+        <fieldset>
+
+            <legend>Информация о питомце</legend>
+            <lable for="petType" id="petType" required>
+            Тип питомца:
+                <select name="petType">
+                    <option value="dog">Собака</option>
+                    <option value="cat" selected>Кошка</option>
+                    <option value="hedgehog">Еж</option>
+                </select>
+            </lable><br>
+
+            <label name="gender">
+                 Пол питомца:
+                <input type="radio" name="gender" value="man" value="boy">Мальчик
+                <input type="radio" name="gender" value="woman" value="girl">Девочка
+                <input type="radio" name="gender" value="none" checked>Не определено
+            </label><br>
+
+            <label>
+                Цвет глаз:
+                <input type="color" name="eyeColor">
+            </label><br>    
+
+            <label>
+                Длина хвоста:
+                <input type="range" name="tailLength" value="25" min="0" max="110" required>
+            </label>
+
+        </fieldset>
+
+
+        <fieldset>
+
+            <label>
+                Ваше имя:
+                <input type="text" name="name" value="Александра">
+            </label>
+
+            <label>
+                Дата рождения:
+                <input type="date" name="dateOfBirth">
+            </label>
+
+            <label>
+                Email:
+                <input type="email" name="email" placeholder="sasha_281200@mail.ru">
+            </label>
+
+            <label>
+                Телефон:
+                <input type="tel" name="phone" placeholder="8-800-555-3535" required>
+                <!--pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}-[0-9]{4}" -->
+            </label>
+
+            <label>
+                Я согласен с правилами:
+                <input type="checkbox" checked name="rules" values="true">
+            </label>
+
+        </fieldset>
+
+
+        <input type="submit" class="submit" value="Отправить">
+        <input type="reset" class="reset" value="Сбросить">
+    </form>
+
 
 </main>
+<script src ="validation.js"></script>
 </body>
 </html>

static/styles.css

@@ -19,7 +19,7 @@ h1 {
     margin-top: 0;
     font-size: 50px;
     text-align: center;
-    color: rgba(173,38,164,0.67);
+    color: rgba(173, 6, 70, 0.67);
 }
 
 .error {
@@ -28,4 +28,44 @@ h1 {
 
 .orders {
     margin: 20px 0;
+}
+
+fieldset {
+    border: 2px solid #c90e56;
+    border-radius: 20px;
+    margin: 30px;
+    padding: 10px 25px;
+}
+
+legend {
+    font-size: 22px;
+    font-weight: bold;
+    color: #880e33;
+}
+
+.submit, .reset {
+    margin: 5px auto;
+    padding: 10px;
+    font-size: 14px;
+    color: rgb(255, 255, 255);
+    border: 2px solid #f1b6c8;
+    border-radius: 20px;
+    background-color:#880e33;
+}
+
+
+select {
+    padding: 5px;
+    margin: 10px 10px;
+    border-radius: 10px;
+}
+
+input[type=radio], input[type="color"], input[type="range"] {
+    margin: 10px 5px;
+}
+
+input[type="text"], input[type="date"], input[type="email"], input[type="phone"] {
+    margin: 10px 5px;
+    border-radius: 5px;
+    border: 2px solid #f85694;
 }

static/validation.js

@@ -0,0 +1,21 @@
+let submitButton = document.querySelector('input[type="submit"]');
+let telPhone = document.querySelector('input[type="tel"]');
+let email = document.querySelector('input[type="email"]');
+let form = document.querySelector('form');
+
+function validateEmail() {
+    return email.value.includes('@');
+}
+
+function validatePhone() {
+    const regex = /+7 (\d{3}) \d{3}-\d{2}-\d{2}/;
+    return telPhone.value.match(regex);
+}
+
+form.addEventListener("submit", (e) => {
+    let isValid = validateEmail() && validatePhone();
+    if(!isValid) {
+        alert("Данные не валидны");
+        e.preventDefault();
+    }
+});