Приветствую вас в очередном уроке по HTML! При работе над сайтом рано или поздно возникает необходимость в создании формы обратной связи. При помощи такой формы владельцы сайтов имеют возможность быть на связи со своими пользователями.

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

Но прежде чем мы приступим к разметке, давайте остановимся на том, как работают формы. Нужно знать, что при помощи языка гипертекстовой разметки мы лишь создаем саму форму, а за обработку ее данных HTML  не отвечает. На стороне сервера обработка данных форм выполняется при помощи таких языков программирования как php, java и др. Исходя из этого, для получения полностью рабочей формы нужно не только создать ее саму при помощи HTML, но и написать некий обработчик, например на языке php, который обработает данные введенные в форму. В этом уроке мы создаем саму форму, а в последующих займемся написанием простого обработчика. Итак, начинаем!

Видеоверсия:


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

Для начала давайте мы создадим новый HTML документ для нашей формы. Этом мы делаем при помощи сочетаний клавиш CTRL+N. Не забываем прописывать обязательные теги. В данном уроке я предлагаю создать простую форму, состоящую из полей для ввода имени пользователя и пароля. Сперва мы указываем парный тег <form>, так как именно с помощью него создаются формы в HTML. Внутри него прописываем атрибут «action». Значение данного атрибута мы пока оставим пустым. Далее указываем атрибут «method» со значением «post». Этому атрибуту мы можем придать значение «post» или «get». У обеих значений есть свои плюсы и минусы. Использование метода post является более безопасным, поэтому мы будем применять именно его.

<!Doctype html>
<head>
<title>Мой первый и простенький сайт</title>
<meta charset="UTF-8">
<body>

<form action="" method="post">

</form>

</body>
</html>

Создаем поле для ввода имени пользователя

Мы начинаем с того, что прописываем с нового абзаца «Имя пользователя». Далее, внутри тега <form> указываем универсальный тег <input>. Именно с помощью него мы создаем подавляющее большинство полей в HTML. Далее, внутри данного тега мы указываем атрибут «type» и его значение — «text». При помощи данного действия мы обозначаем, что данное поле будет для текста. Так как в нашей форме будет 2 поля для ввода данных, перед нами возникает законный вопрос — «Как нам разобраться, к каким полям для ввода относятся заполненные пользователем данные». Для решения данной головоломки мы указываем атрибут «name» и его значение «username». Таким образом, при получении данных с этого поля, мы видим значение «username», что означает «Имя пользователя». Следовательно, мы сразу же понимаем что информация, заполненная в этом поле для ввода относится к имени пользователя.

<!Doctype html>
<head>
<title>Мой первый и простенький сайт</title>
<meta charset="UTF-8">
<body>

<form action="" method="post">
<p>Имя пользователя <input type="text" name="username"></p>
</form>

</body>
</html>

Создаем поле для ввода пароля

Теперь, давайте приступим к созданию поля для ввода пароля. Сперва, с нового абзаца мы пишем «Пароль». Далее мы воспользуемся уже знакомым тегом <input>, а в атрибуте «type» укажем значение «password». Для того, чтобы понять какие данные заполнены в этом поле, мы указываем атрибут «name» и его значение «password».

<!Doctype html>
<head>
<title>Мой первый и простенький сайт</title>
<meta charset="UTF-8">
<body>

<form action="" method="post">
<p>Имя пользователя <input type="text" name="username"></p>
<p>Пароль <input type="password" name="password">
</form>

</body>
</html>

И наконец, давайте сохраним прогресс при помощи сочетаний клавиш CTRL+S и проверим результат. Мы переходим на веб-страницу и обновляем ее при помощи клавиши F5.

Форма для входа
Форма для входа в личный кабинет

Как видите, на нашей веб-странице появляется простенькая форма с 2-я полями для ввода. Кликнув по ним мы можем вводить необходимые данные. Вы можете спросить, в чем разница того, что в «Имени пользователя» атрибуту «type» мы дали значение «text», а в поле для пароля — «password». Все очень просто. Если в атрибуте «type» стоит значение «password», то при вводе пароля символы не отображаются на мониторе. Это сделано в целях безопасности, для предотвращения подсматривания пароля третьим лицом.

Настраиваем длину полей для ввода

Часто возникает необходимость в управлении размером поля для ввода. При помощи атрибута «size» мы можем задать длину полей. Для использования данной возможности мы переходим к тегу <input> и прописываем атрибут «size» со значением «30». Цифра «30» означает длину поля для ввода в символах. Я предлагаю задать такую же длину полю для ввода пароля.

<!Doctype html>
<head>
<title>Мой первый и простенький сайт</title>
<meta charset="UTF-8">
<body>

<form action="" method="post">
<p>Имя пользователя <input type="text" name="username" size="30"></p>
<p>Пароль <input type="password" name="password" size="30">
</form>

</body>
</html>

Далее мы сохраняем прогресс и проверяем результат.

увеличенные поля для ввода
увеличенные в длину поля для ввода

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

Настраиваем максимально возможное количество символов

Также, очень часто бывает нужно ограничить максимальное количество ввода символов. И у нас есть такая возможность. Для ее реализации мы возвращаемся к коду и в теге <input> указываем атрибут «maxlength» со значением «12». Думаю, для имени пользователя ограничения в 12 символов будет достаточным. Поле для ввода пароля мы можем ограничить 15 символами.

<!Doctype html>
<head>
<title>Мой первый и простенький сайт</title>
<meta charset="UTF-8">
<body>

<form action="" method="post">
<p>Имя пользователя <input type="text" name="username" size="30" maxlength="12"></p>
<p>Пароль <input type="password" name="password" size="30" maxlength="15">
</form>

</body>
</html>

Теперь, остается сохранить прогресс и проверить результат.

Ограничение на количество вводимых символов
«Ограничение на количество вводимых символов» в действии

Мы вводим символы и видим, что ограничение работает как часы. Сколько бы мы ни старались, больше положенного количества символов ввести невозможно.

Теперь, предлагаю немного резюмировать. Мы создали простую форму состоящую из полей для ввода имени пользователя и пароля. Это мы сделали при помощи тегов <form> и <input>. Также мы воспользовались атрибутами «type» — для задания типа поля, «name» — для указания ее имени, «size» — для определения размера и «maxlength» — для управления максимально возможным количеством символов .

На этом у меня все. В следующих видеоуроках мы продолжаем данную тему и создаем более сложные формы. Надеюсь, данный урок оказался для Вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих уроках!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

4 × пять =

Закрыть