Создаем простую форму html

Блог / Html + Css / Создаем простую форму 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 h2 {
            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>
            <h2>Авторизация на сайте</h2>
            <div>
                        <form name="regisrration" action="form.
 
 
 php" method="post">
                                    <input type="text" required value="Логин" name="login">
                                    <input type="password" required value="Пароль" name="password">
                                   <div>
                                               <a href="#">Забыли пароль?<a/>
                                   </div>
                                   <input type="submit" value="ВОЙТИ">
                        </form>
            </div>
</div>
 
</body>
</html>

 

Если у вас появились вопросы, хотели бы записаться на урок, заказать статью(инструкцию) или приобрести видеоурок — пишите нам в: скайп: olegg.pann telegram, viber,whatsap — +380672998330 добавляйтесь на телеграмм-канал: t.me/webyk email: [email protected] мы в vk: vk.com/programing24 мы в fb: www.facebook.com/webprograming24 Обязательно оперативно ответим на все вопросы


Поделитесь в социальных сетях