Строшков Артем

static/index.html

@@ -11,6 +11,71 @@ <h1>Найди себе друга!</h1>
 
     <!--Форму размещай тут-->
 
+    <form method="post" action="/pets/orders">
+        <fieldset>
+            <legend>Какого питомца вы хотите?</legend>
+            <label for="petType" id="petType" required>
+                <select name="petType">
+                    <option value="default" disabled selected>Выберите тип питомца</option>
+                    <option value="cat">Кошка</option>
+                    <option value="dog">Собака</option>
+                    <option value="hamster">Хомяк</option>
+                	<option value="fish">Рыбка</option>
+                </select>
+            </label>
+            <label name="gender">
+            	<select class="form-select mb-3" name="gender" aria-label="Default select example">
+            		<option value="default" disabled selected>Пол питомца</option>
+	                <option value="boy">Самец</option>
+	                <option value="girl">Самка</option>
+	                <option value="none">Любой</option>
+            	</select>
+            </label>
+
+            <label>
+                Цвет глаз:
+                <input type="color" name="eyeColor">
+            </label>
+
+            <label>
+                Длина хвоста (см):
+                <input type="range" name="tailLength" value="20" min="0" max="100" required>
+            </label>
+
+        </fieldset>
+
+        <fieldset class="user_fieldset">
+            <legend>Информация о вас</legend>
+            <label class="user_label">
+                Ваше имя:
+                <input type="text" name="name" id="name" placeholder="Ваши полные ФИО">
+            </label>
+
+            <label class="user_label">
+                Дата рождения:
+                <input type="date" name="dateOfBirth">
+            </label>
+
+            <label class="user_label">
+                Email:
+                <input type="email" id="email" name="email" placeholder="Ваш Email">
+            </label>
+
+            <label class="user_label">
+                Телефон:
+                <input type="phone" id="phone" name="phone" placeholder="Ваш телефон">
+            </label>
+
+            <label>
+                Я ознакомлен(а) и принимаю <a href="#">политику конфиденциальности</a>
+                <input type="checkbox" name="rules" value="true" checked>
+            </label>
+
+        </fieldset>
+        <input type="submit" class="submit" value="Отправить">
+        <input type="reset" class="reset" value="Сбросить">
+    </form>
 </main>
 </body>
+<script src="validation.js"></script>
 </html>

static/styles.css

@@ -3,6 +3,7 @@ body {
 }
 
 main {
+    font-size: 20px;
     box-sizing: border-box;
     width: 100%;
     max-width: 1000px;
@@ -28,4 +29,46 @@ h1 {
 
 .orders {
     margin: 20px 0;
+}
+
+fieldset {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #8C8C8C;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+label {
+    flex-basis: 50px;
+    vertical-align: middle;
+}
+
+legend {
+    font-size: 32px;
+    border: 1px solid #8C8C8C;
+    border-radius: 5px;
+    color: #383838;
+}
+
+input {
+    border: 1px solid #8C8C8C;
+    border-radius: 5px;
+    font-size: 20px;
+}
+
+input[type="color"] {
+    width: 100px;
+    height: 30px;
+}
+
+input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+}
+
+select {
+    font-size: 20px;
+    border-radius: 5px;
+    padding: 5px 10px;
 }

static/validation.js

@@ -0,0 +1,23 @@
+const name = document.querySelector('#name');
+const phone = document.querySelector('#phone');
+const form = document.querySelector('form');
+
+function validatePhone() {
+    return phone.value.length > 10 && phone.value.length < 13;
+}
+function validateName() {
+    return name.value.length > 3 && name.value.length < 50;
+}
+
+form.addEventListener('submit', (event) => {
+    let phoneIsValid = validatePhone();
+    let nameIsValid = validateName();
+    if (!phoneIsValid) {
+        alert("Номер телефона не валиден");
+        event.preventDefault();
+    }
+    if (!nameIsValid) {
+        alert("Имя введено некорректно");
+        event.preventDefault();
+    }
+});