Как разработать форму входа
«Форма входа» будет основной темой изучения HTML-форм в этой статье. При этом мы также обсудим некоторые стили CSS. В коде, используемом для создания этой формы, использовались шрифты Google и значки блоков, поэтому вторая ссылка в разделе заголовка HTML-документа и импортированный URL-адрес в CSS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <form action=""> <h1>Login</h1> <div class="input-box"> <input type="text" placeholder="username" required><i class="bx bxs-user"></i> </div> <div class="input-box"> <input type="password" placeholder="password" required><i class="bx bxs-lock-alt"></i> </div> <div class="remember-forgot"> <label><input type="checkbox">Remember me</label> <a href="#">forgot password?</a> </div> <button type="submit" class="btn">login</button> <div class="register-link"> <p>Don't have an account?<a href="#">Register</a></p> </div> </form> </div> </body> </html>
Ссылка на CSS и ссылка на значки блоков включены в тег заголовка, как и следовало ожидать. Чтобы потенциально облегчить декорирование, в этой форме в качестве контейнера для формы использовался блочный элемент «div›» (родительский div) с классом «обертка». Каждая HTML-форма начинается с тега формы, который, как видно из кода, имеет свойство действия, указывающее место назначения формы при ее отправке.
Элемент-заполнитель гарантирует, что текст в полях ввода имени пользователя и пароля останется в поле до тех пор, пока текст не будет введен, а тег «обязательно» гарантирует, что форма не может быть отправлена без заполнения обязательных полей. Метка флажка тип ввода имеет текст «запомнить меня» и гиперссылку «забыли пароль», которая включена в div с классом «запомнить-забыл».
Тип кнопки отправки, который в форме помечен как «логин», является очень важным ее компонентом. И последнее, но не менее важное: есть гиперссылка «зарегистрироваться», которая связана с «нет учетной записи?» запрос. Тег закрытия формы и тег закрытия div используются для закрытия формы.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(img.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.wrapper{
width: 420px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(20px);
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
color: #fff;
border-radius: 10px;
padding: 30px 40px;
}
.wrapper h1 {
font-size: 36px;
text-align: center;
}
.wrapper .input-box {
position: relative;
width: 100%;
height: 50px;
margin: 30px 0;
}
.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 45px 20px 20px;
}
.input-box input:placeholder {
color: #fff;
}
.input-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.wrapper .remember-forgot {
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}
.remember-forgot label input {
accent-color: #fff;
margin-right: 3px;
}
.remember-forgot a {
color: #fff;
text-decoration: none;
}
.remember-forgot a:hover {
text-decoration: underline;
}
.wrapper .btn {
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight:600;
}
.wrapper .register-link {
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;
}
.register-link p a{
color:#fff;
text-decoration: none;
}
.register-link p a:hover {
text-decoration: underline;
}
Эта форма входа использует внешний стиль, и создается отдельный файл CSS. Документ CSS начинается с импортированного URL-адреса для шрифтов Google, который объединяет файл со стилем, выполненным в документе CSS.
Далее следует универсальный селектор (*), который выбирает все на странице, а затем нацеливается на тело, которое стилизует все содержимое страницы. Имя класса (.wrapper), перед которым стоит точка, используется для нацеливания на родительский div. Следует отметить, что CSS нацелен на все элементы, имеющие «класс» таким образом для стиля. Также обратите внимание, что родительский тег указывается перед внутренним тегом, как указано в HTML-документе.
