Создаем простую форму 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 Обязательно оперативно ответим на все вопросы


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