Html создать форму: Ваша первая HTML форма — Изучение веб-разработки

Содержание

Ваша первая HTML форма - Изучение веб-разработки

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

Необходимые знания: Базовое представление о компьютерах и базовое понимание HTML.
Цель: Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.

Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент <input>, однако есть и другие элементы, о которых тоже стоит узнать.

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

Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.

Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: <form>, <label>, <input>, <textarea> (en-US) и <button>.

Прежде, чем продолжить, скопируйте простой HTML-шаблон — вы будете создавать свою форму внутри него.

Элемент

<form>

Создание форм начинается с элемента

<form>:

<form action="/my-handling-form-page" method="post">

</form>

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы <div> или <p>, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

  • Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы.
  • Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть "get" или "post").

Теперь добавьте указанный выше код с элементом <form> внутрь тега <body> в вашем HTML.

Элементы

<label>, <input> и <textarea> (en-US)

Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом 

<label>:

  • Поле ввода для имени — single-line text field (en-US)
  • Поле ввода для e-mail — input of type email (en-US): однострочное текстовое поле, которое принимает только e-mail адреса.
  • Поле ввода для сообщения — <textarea> (en-US), многострочное текстовое поле.

В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" name="user_mail">
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea name="user_message"></textarea>
    </li>
  </ul>
</form>

Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.

Здесь элементы <li> используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута

for на каждом элементе <label>, который принимает в качестве значение id элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.

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

В HTML-элементе <input> самым важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента <input>. Вы найдёте больше информации об этом далее в статье Стандартные виджеты форм.

  • В нашем простом примере мы используем <input/text> (en-US) для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.
  • Для второго поля ввода мы используем тип <input/email> (en-US), который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введённые пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.

Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге.  <textarea> (en-US) — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента 

<input> вам необходимо использовать атрибут value следующим образом:

<input type="text" value="по умолчанию в этом элементе находится этот текст" />

Если вы хотите определить значение по умолчанию для HTML-элемента <textarea> (en-US), вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:

<textarea>
по умолчанию в этом элементе находится этот текст
</textarea>

Элемент

<button>

Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента <button>. Необходимо добавить следующий код перед закрывающим тегом </form>:

<li>
  <button type="submit">Send your message</button>
</li>

HTML-элемент <button> также принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button.

  • Клик по кнопке submit (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте action элемента <form>.
  • Клик по кнопке reset сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.
  • Клик по кнопке button не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.

Примечание: вы также можете использовать HTML-элемент <input> с соответствующим атрибутом type , чтобы создать кнопку:  <input type="submit">. Главным преимуществом HTML-элемента <button> в сравнении с элементом <input> заключается в том, что <input>

может принимать в себя только простой текст, в то время как <button> позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.

Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.

Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.

Сначала необходимо добавить HTML-элемент <style> на вашу страницу внутрь тега head в HTML. Это должно выглядеть следующим образом:

<style>

</style>

Внутри тега стилей добавьте следующий код:

form {
  
  margin: 0 auto;
  width: 400px;
  
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  
  font: 1em sans-serif;

  
  width: 300px;
  box-sizing: border-box;

  
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  
  border-color: #000;
}

textarea {
  
  vertical-align: top;

  
  height: 5em;
}

.button {
  
  padding-left: 90px; 
}

button {
  
  margin-left: .5em;
}

Теперь наша форма выглядит намного лучше.

Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент <form> определяет куда и каким способом отправить данные благодаря атрибутам action и method.

Мы определяем имя name для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.

Чтобы переименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea name="user_message"></textarea>
  </div>

  . ..

В нашем примере форма отправит три куска данных с именами "user_name", "user_email" и "user_message". Эти данные будут отправлены на URL "/my-handling-form-page" через метод HTTP POST.

На стороне сервера скрипт, расположенный на URL "/my-handling-form-page" получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье Отправка данных формы.

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: 

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

Дополнительные темы

Как сделать Форму регистрации



Узнайте, как создать форму регистрации с помощью CSS.



Как создать форму регистра

Шаг 1) добавить HTML:

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:

Пример


 
    Register
    Please fill in this form to create an account.
   

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
    <hr>

    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>. </p>
    <button type="submit">Register</button>
  </div>

  <div>
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>



Шаг 2) добавить CSS:

Пример

* {box-sizing: border-box}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.registerbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/* Add a blue text color to links */
a {
  color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}


Совет: Пойдите к нашему учебнику формы HTML для того чтобы выучить больше о формах HTML.

Совет: Перейдите в наш CSS Form учебник, чтобы узнать больше о том, как стиль элементов формы.


Создание форм. Урок HTML

Содержание:

Основным элементом для создания форм в HTML служит тег Form, а самая простейшая форма имеет два текстовых поля и кнопку. Ничего сложного в создании такой формы нет, а мы будем использовать её в качестве рабочего примера:

Стоит отметить, что более сложные формы могут также иметь текстовые области — расширенные текстовые поля; чекбоксы — переключатели, где галочкой отмечается согласие со значением пункта; радио-кнопки, которые служат для выбора одного из предложенных вариантов. Рассмотрим эти элементы ниже.

Если научиться делать простую форму, то и сложную сделать будет не намного труднее — разница будет заключаться в нескольких добавочных строчках.

Вот так будет выглядеть каркас нашей формы:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" name="Любое" target="_blank">
...
</form>

Его нужно рассмотреть отдельно, потому что тег Form имеет два обязательных атрибута, которые должны присутствовать в любой форме:

  1. action — адрес обработчика данных формы. Это может быть локальный скрипт на вашем сайте, а в данном примере — это URL сервиса рассылок.
  2. method — определяет метод запроса данных: «post» — закрытая передача данных через запрос браузера, он наиболее распространённый. Метод «get» подразумевает открытую передачу данных через адресную строку браузера и используется реже.
  3. name — необязательный атрибут, который задаёт название формы. Актуально при использовании нескольких форм, или, если имя формы необходимо для работы определённого скрипта.
  4. target — необязательный атрибут, при значении «_blank» загружает URL обработчика данных в новой вкладке браузера.

Создание элементов формы

Для создания элементов формы используется незакрывающийся тег Input с обязательным атрибутом type, который имеет множество значений (см. Справочник HTML — Input).

Нам же для создания двух текстовых полей понадобятся два тега Input со значением «text» атрибута type. А для создания кнопки — парный тег Button, где у атрибута type — значение «submit», которое будет отправлять данные обработчику:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" target="_blank">
<input type="text" name="field_name_first" placeholder="Ваше Имя"> <input type="text" name="field_email" placeholder="Ваш E-mail"> <button type="submit" name="lead_subscribe">Получить бесплатно!</button>
</form>

Вот что означают атрибуты тега Input в нашей форме:

  1. type — значение «text» означает текстовое поле. Значение «password» - текстовое поле для ввода пароля с отображением звездочек; «range» — ползунок; «reset» — кнопка сброса и др. (подробнее: Справочник HTML — Input).
  2. name — имя полей.
  3. placeholder — видимый текст в поле формы, при наведении фокуса — исчезает. Как вариант: атрибут value — значение по умолчанию, при сбросе пользователем введённых данных — восстанавливается первоначальная текстовая надпись.

Вот как будет выглядеть готовая форма, если её поместить в контейнер Div и выравнять по центру:

Читайте инструкцию о том, как сделать красивую форму подписки для JustClick и Smartresponder — с лёгким кодом, используя стили CSS.

Чекбоксы и кнопки

Для создания чекбоксов и радио-кнопок также используется тег Input, разница только в значениях атрибута type:

                
<form action="URL" method="post">
<input type="checkbox" name="box" value="1">Поставьте галочку, если согласны
<input type="radio" name="radiobutton" value="1">Красный <input type="radio" name="radiobutton" value="2">Жёлтый <input type="radio" name="radiobutton" value="3">Зелёный
</form>

Имена (значения атрибута name) у тегов произвольные, но для радио-кнопок одной группы они должны совпадать. Визуальный результат:

Атрибуты name и value не являются обязательными, а используются при обработке данных формы с помощью скриптов, к примеру, это может быть JavaScript.

Осталось узнать о двух тегах, которые используются для создания сложных форм: Textarea и Select.

Текстовая область

Чтобы сделать текстовую область, куда допустимо ввести текст из нескольких строк с сохранением переносов, используем тег Textarea:

                
<form action="URL" method="post">
<textarea rows="5" cols="30">Ваша биография</textarea>
</form>

Атрибуты rows и cols являются обязательными для версий ниже HTML5 и задают число строк и их общую длину. Получаем следующую текстовую область, которая может вмещать 5 строк по 30 символов в каждой:

Ваша биография

Создание выпадающего списка

Для создания выпадающего списка используем тег Select, а для его отдельных элементов тег Option:

                
<form action="URL" method="post">
<select name="forscript"> <option value="1">Элемент 1</option> <option value="2">Элемент 2</option> <option value="3">Элемент 3</option> <option value="4">Элемент 4</option> </select>
</form>

Атрибуты обоих тегов не обязательны. Однако, атрибут value — задает значение для пары «Имя=Значение» отправляемого обработчику (например: JavaScript), а имя — это значение атрибута name тега Select. Таким образом, значение переменной forscript будет forscript=1 или forscript=2 и т.д.

Получаем выпадающий список из 4-х элементов:

Элемент 1Элемент 2Элемент 3Элемент 4

Содержание:

Поделиться с друзьями:

Работа с формами — Документация Django 1.7

Форма в HTML – это набор элементов в <form>...</form>, которые позволяют пользователю вводить текст, выбирать опции, изменять объекты и конторолы страницы, и так далее, а потом отправлять эту информацию на сервер.

Некоторые элементы формы - текстовые поля ввода и чекбоксы - достаточно простые и встроены в HTML. Некоторые – довольно сложные, состоят из диалогов выбора даты, слайдеров и других контролов, который обычно используют JavaScript и CSS.

Кроме <input> элементов форма должна содержать еще две вещи:

Например, форма авторизации Django содержит несколько <input> элементов: один с type="text" для логина пользователя, один с type="password" для пароля, и один с type="submit" для кнопки “Log in”. Она также содержит несколько скрытых текстовых полей, которые Django использует для определения что делать после авторизации.

Форма также говорит браузеру, что данные должны оправляться на URL, указанный в атрибуте action тега <form> - /admin/ - и для отправки необходимо использовать HTTP метод, указанный атрибуте method - post.

При нажатии на элемент <input type="submit" value="Log in"> данные будут отправлены на /admin/.

GET или POST

GET и POST – единственные HTTP методы, которые используются для форм.

Форма авторизации в Django использует POST метод. При отправке формы браузер собирает все данные формы, кодирует для отправки, отправляет на сервер и получает ответ.

При GET, в отличии от POST, данные собираются в строку и передаются в URL. URL содержит адрес, куда отправлять данные, и данные для отправки. Пример работы можно посмотреть на странице поиска по документации Django. При оправке формы поиска, вы будете перенаправлены на URL https://docs.djangoproject.com/search/?q=forms&release=1.

GET и POST обычно используются для разных действий.

Любой запрос, который может изменить состояние системы - например, который изменяет данные в базе данных - должен использовать POST. GET должен использоваться для запросов, которые не влияют на состояние системы.

Не следует использовать GET для формы с паролем, т.к. пароль появится в URL, а следовательно в истории браузера и логах сервера. Также он не подходит для отправки большого количества данных или бинарных данных, например, изображения. Web-приложение, которое использует GET запросы в админке, подвержено атакам: не сложно подделать форму для запроса на сервер и получить важные данные о системе. POST использует дополнительные механизмы защиты, например, CSRF защиту, и предоставляет больше контроля за доступом к данным.

GET удобен для таких вещей, как форма поиска, т.к. URL, который представляет GET запрос, можно легко сохранить в избранное или отправить по почте.

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


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