Создаем простую форму html
В этом уроке рассмотрим создание красивой формы регистрации html + css. Вот что должно у нас получиться:
Фомы нужны для получения различных данных от пользователя. Для создания форм в html есть тег <form>.
Рассмотрим основные атрибуты, которые используются чаще всего.
action - адрес страницы которая будет обрабатывать данные.
method - метод протокола http, может быть GET или POST
GET- данные будут передаваться в адресной строке, например в форме будут введены имя ivan и пароль qwerty, в адресной строке мы увидим примерно следующее:
http://site.ru/form.php?name=ivan&password=qwerty
POST- посылает на сервер данные в запросе браузера. Этот метод используется, если нам не нужно, чтобы в адресной строке были видны введенные данные. Например нам не нужно чтобы было видно введенный пароль. В адресной строке мы получим http://site.ru/form.php
name - имя формы, нужно для обработки данных.
Приступим к созданию простой формы регистрации html. Дадим имя нашей форме regisrration, страница обработки наших данных будет form.php, метод передачи данных будем использовать POST.
<form name=”regisrration” action=”form.php” method=”post”>
…
</form>
За создание полей формы в html отвечает тег <input>
Для создания формы регистрации нам понадобится три типа инпутов:
type=”text” – текстовое поле
type=”password” – поле пароля
type=”submit” – кнопка отправки формы
Также нам пригодятся следующие атрибуты
name - имя для обработки данных;
value - значение элемента;
required – указание, что поле обязательно для заполнения
Вот такой код html у нас получиться:
<form name=”regisrration” action=”form.php” method=”post”>
<input type="text" required value="Логин" name="login">
<input type="password" required value="Пароль" name="password">
<input type="submit" value="ВОЙТИ">
</form>
Пока наша html форма регистрации выглядит не очень красиво.
Теперь добавим немного стилей css к нашей html форме.
Запихнем нашу форму в блок div и добавим заголовок и ссылку для восстановления пароля. И добавим классы css для наших элементов.
Стили css лучше подключать отдельным файлом, но в нашем уроке мы запишем все стили между тегами <style> … </style>.
Вот весь код нашей красивой формы регистрации:
<html>
<head>
<style>
body{
background: #eee; /* цвет фона страницы */
}
.Myform{
width:300px; /* ширина блока */
height: 225px; /* высота блока */
background: #fff; /* фон блока */
border-radius: 10px; /* закругленные углы блока */
margin: 10% auto; /* отступ сверху и выравнивание по середине */
box-shadow: 2px 2px 4px 0px #000000; /* тень блока */
}
.Myform h1 {
margin: 0; /* убираем отступы */
background-color: #282830; /* фон заголовка */
border-radius: 10px 10px 0 0; /* закругляем углы сверху */
color: #fff; /* цвет текста */
font-size: 14px; /* размер шрифта */
padding: 20px; /* отступы */
text-align: center; /* выравниваем текст по центру */
text-transform: uppercase; /* все символы заглавные */
}
.inp{
padding:20px; /* отступы */
}
.log{
border: 1px solid #dcdcdc; /* рамка */
padding: 12px 10px; /* отступы текста */
width: 260px; /* ширина */
border-radius: 5px 5px 0 0; /* закругленные углы сверху */
}
.pass{
border: 1px solid #dcdcdc; /* рамка */
padding: 12px 10px; /* отступы текста */
width: 260px; /* ширина */
border-radius: 0px 0px 5px 5px; /* закругленные углы снизу */
}
.btn{
background: #1dabb8; /* фон */
border-radius: 5px; /* закругленные углы */
color: #fff; /* цвет текста */
float: right; /* выравнивание справа */
font-weight: bold; /* жирный текст */
margin: 10px; /* отступы */
padding: 12px 20px; /* оступы для текста */
}
.info{
width:130px; /* ширина */
float: left; /* выравнивание слева */
padding-top: 20px; /* оступ сверху для текста */
a{
color:#999; /* цвет ссылки */
text-decoration: none; /* убираем подчеркивание */
}
a:hover{
color: #1dabb8; /* цвет ссылки при наведении */
}
</style>
</head>
<body>
<div class="Myform">
<h1>Авторизация на сайте</h1>
<div class="inp">
<form name="regisrration" action="form.php" method="post">
<input class="log" type="text" required value="Логин" name="login">
<input class="pass" type="password" required value="Пароль" name="password">
<div class="info">
<a href="#">Забыли пароль?<a/>
</div>
<input class="btn" type="submit" value="ВОЙТИ">
</form>
</div>
</div>
</body>
</html>
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
