• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Пример формы входа с регистрацией на сайте (Форма авторизации и регистрации при помощи HTML5 и CSS3)
Пример формы входа с регистрацией на сайте
Kosten
Дата: Вторник, 2019-03-05, 18:17 | Сообщение 1
Администраторы
Сообщений:20282
Награды: 56


Эта форма входа сайта и регистраций можно поставить на модальное окно или на отдельную страницу, на обеих вариантах отлично смотрится, так как создана на чистом CSS. После того, как CSS Grid появится в браузерах, то здесь уже можно использовать его как существующий метод, прежде чем мы сможем рассмотреть его в качестве основного инструмента. В этом примере создана форма входа, которая по умолчанию идет на светлый формат сайта, так как выполнена в светло синем оттенке.

Окончательная форма выглядит как на рисунке ниже:



Также форма имеет отличную поддержку для браузера и может обеспечить горизонтальное и вертикальное центрирование. Где также была проверена на браузере с поддержкой flexbox, используя запрос CSS.

Если браузер поддерживает flexbox, то нужно использовать display: flex - где установка идет на высоту 100 единиц, где затем используйте свойства выравнивания, которые есть во flexbox, чтобы выровнять прямоугольник

Приступаем к установке:

HTML

Код
<h1>Войти здесь</h1>
<form class="login" action="" method="post">
    
    <div><label for="username">Имя пользователя</label>
      <input type="text" name="username" id="username"></div>
    <div><label for="password">Пароль</label>
      <input type="password" name="password" id="password"></div>
    
    <div class="actions">
      <input type="submit" name="login" value="Авторизоваться"> <a href="/">Я забыл свой пароль</a>
    </div>
</form>

<div class="account">
  <p>Создать новую учетную <a href="">запись</a>.</p>
</div>


CSS

Код
@supports (display: flex) {
  body {
    padding:0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  h1, .login, .account, .contact {
    margin: 0;
    width: 80%;
  }
}

@supports (display: grid) {
  body {
    display: grid;
    grid-template-columns: 80%;
    align-content: center;
    align-items: stretch;
  }
  @media (min-width: 650px) {
    body {
      grid-template-columns: repeat(2, minmax(150px, 30%));
    }
    h1,
    .login {
      grid-column-end: span 2;
      width: auto;
    }
    .login > div {
      display: grid;
      grid-template-columns: 1fr 2fr;
      align-items: center;
    }
    .login > div.actions {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .account {
      border-right: 1px dotted rgb(191, 216, 227);
      padding: 0 10px 0 0;
      align-self: end;
      width: auto;
    }
    .contact {
      padding: 0 0 0 10px;
      width: auto;
    }
    input[type="submit"] {
      grid-column: 2;
    }
    .actions a {
      justify-self: end;
    }
  }
}

h1 {
    background-color: rgb(59, 98, 115);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    padding: 10px;
    font-size: 24px;
    line-height: 1.4;
    box-shadow: 0px 0px 0px 1px #4a4848;
    color: #f3f3f3;
    text-shadow: 0 1px 0 #2f2c2c;
}

.login {
    background-color: rgba(84, 123, 140, 0.4);
    /* border: 2px solid rgba(148, 161, 167, 0.8); */
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 2px 1px #7d7676;
}

.login > div {
  padding: 5px 0;
}

input[type="submit"] {
    border: 2px solid rgb(146, 182, 197);
    border-radius: 100px;
    color: #f9f9f9;
    background-color: rgb(54, 134, 169);
    font-size: 17px;
    padding: 8px 5px 8px 5px;
  cursor:pointer;
}

input[type="text"], input[type="password"] {
    border: 1px solid rgba(76, 113, 130, 0.8);
    padding: 5px;
    border-radius: 100px;
    font-size: 17px;
    width: 100%;
}

.actions a {
  font-size: 75%;
}


Внутри моей формы находятся элементы формы с метками и полями. Так как они вложены в сетку и не являются прямыми дочерними элементами контейнера сетки, где нужно создать новую сетку для элементов div, которые обертывают поля формы. Если бы у нас была поддержка под сетей в любых браузерах, это было бы хорошим вариантом для этого.

Однако есть ключевое различие между grid и flexbox. Когда мы используем сетку, мы решаем наш размер сетки, а затем помещаем вещи в нее, это позволяет очень легко выровнять вещи в обоих направлениях. Где Flexbox сияет в том, чтобы иметь возможность смотреть на контент и распределять пространство в соответствии с размером контента.

Демонстрация
Прикрепления: 0639649.jpg(50.7 Kb) · form.zip(3.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Пример формы входа с регистрацией на сайте (Форма авторизации и регистрации при помощи HTML5 и CSS3)
  • Страница 1 из 1
  • 1
Поиск: