<!doctype html> <html lang="ru" class="h-100"> <head> <meta charset="utf-8" /> <title>Моя страница</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" /> <link rel="stylesheet" href="./css/style.css" /> </head> <body class="h-100 d-flex flex-column"> <header> <nav class="navbar navbar-expand-md navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="/"> <i class="bi bi-app"></i> Мой сайт </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-end" id="navbarNav"> <div class="navbar-nav"> <a class="nav-link" href="./index.html">Главная страница</a> <a class="nav-link" href="./page2.html">Вторая страница</a> <a class="nav-link active" href="./page3.html">Третья страница</a> <a class="nav-link" href="./page-js.html">JavaScript</a> </div> </div> </div> </nav> </header> <main class="container-fluid p-3"> <div class="row justify-content-center"> <div class="text-center mb-2"> <h3 id="form-state"></h3> </div> <form class="col-md-6 m-0 needs-validation" action="./page3.html" method="get" novalidate> <div class="mb-2"> <label class="form-label" for="lastname">Фамилия</label> <input id="lastname" name="lastname" class="form-control" type="text" required /> <div class="valid-feedback">Фамилия заполнена</div> <div class="invalid-feedback">Фамилия не заполнена</div> </div> <div class="mb-2"> <label class="form-label" for="firstname">Имя</label> <input id="firstname" name="firstname" class="form-control" type="text" required /> </div> <div class="mb-2"> <label class="form-label" for="email">E-mail</label> <input id="email" name="email" class="form-control" type="email" placeholder="name@example.ru" required /> </div> <div class="mb-2"> <label class="form-label" for="password">Пароль</label> <input id="password" name="password" class="form-control" type="password" autocomplete="off" required /> </div> <div class="mb-2"> <label class="form-label" for="date">Дата</label> <input id="date" name="date" class="form-control" type="date" required /> </div> <div class="mb-2"> <label class="form-label" for="disabled">Выключенный компонент</label> <input id="disabled" name="disabled" class="form-control" type="text" value="Некоторое значение" disabled /> </div> <div class="mb-2"> <label class="form-label" for="readonly">Компонент только для чтения</label> <input id="readonly" name="readonly" class="form-control" type="text" value="Некоторое значение" readonly /> </div> <div class="mb-2"> <label class="form-label" for="color">Выбор цвета</label> <input id="color" name="color" type="color" class="form-control form-control-color" /> </div> <div class="mb-2 d-md-flex flex-md-row"> <div class="form-check me-md-3"> <input class="form-check-input" id="checkbox1" name="checkbox1" type="checkbox" required /> <label class="form-check-label" for="checkbox1">Флажок 1</label> </div> <div class="form-check"> <input class="form-check-input" id="checkbox2" name="checkbox2" type="checkbox" /> <label class="form-check-label" for="checkbox2">Флажок 2</label> </div> </div> <div class="mb-2 d-md-flex flex-md-row"> <div class="form-check me-md-3"> <input class="form-check-input" type="radio" name="radio-example" id="radio1" /> <label class="form-check-label" for="radio1">Переключатель 1</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="radio-example" id="radio2" /> <label class="form-check-label" for="radio2">Переключатель 2</label> </div> </div> <div class="mb-2"> <select class="form-select" name="selected" required> <option value="" selected>Выберите значение</option> <option value="1">Один</option> <option value="2">Два</option> <option value="3">Три</option> </select> </div> <div class="col-12 text-center"> <button class="btn btn-primary w-40 me-1" type="submit">Отправить</button> <button class="btn btn-primary w-40" type="button" onclick="toggleNoValidate()"> Переключить novalidate </button> </div> </form> </div> </main> <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center"> Автор, 2022 </footer> <script type="module"> import myValidation from "./js/validation"; const VAL_ATTR = "novalidate"; const form = document.querySelector("form"); const state = document.getElementById("form-state"); const setFormState = () => { state.innerText = `novalidate формы ${form.hasAttribute(VAL_ATTR) ? "включен" : "выключен"}`; }; const toggleNoValidate = () => { form.classList.remove("was-validated"); form.toggleAttribute(VAL_ATTR); setFormState(); }; document.addEventListener("DOMContentLoaded", () => { myValidation(); setFormState(); }); window.toggleNoValidate = toggleNoValidate; </script> </body> </html>