
Май 14, 2020 Запись была обновлена
Урок 9. Формы. Часть 1

Здравствуй, уважаемый читатель.
Это первая часть девятого урока изучения html, в котором мы поговорим о формах. Из данного урока вы узнаете как создать форму, какие бывают элементы форм. Данный урок очень важен.
Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы Урок 8. Выделения текста
Теория и практика
Понимание форм очень важная часть изучения технологии html. С помощью форм можно создать форму обратной связи, комментарии на сайте и т.д. Перейдем к примерам:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <html> <head> <title>Главная</title> </head> <body> <form> <p>Ваше имя</p> <input type="text" name="name" value="Введите Ваше имя..." size="20" maxlength="15"> <p>Ваши интересы</p> <input type="checkbox" name="interest" value="football" checked>Футбол <input type="checkbox" name="interest" value="basketball">Баскетбол <input type="checkbox" name="interest" value="hockey">Хоккей <p>Ваш возраст</p> <select name="old" size="5"> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="22">23</option> <option value="22">24</option> <option value="22">25</option> <option value="22">26</option> </select> <p>Введите пароль</p> <input type="password" name="pass" size="10" maxlength="10"> <p><input type="reset" name="Reset" value="Очистить форму"></p> </form> </body> </html> |
Как это выглядит в браузере:
Вы увидели много полей формы и возможно сильно испугались. Но не стоило этого делать :). Сейчас мы разберемся что мы здесь написали. Обо всём по порядку.
Форма создается специальным тегом
.Тег
является одним из элементов формы и позволяет создавать разные элементы интерфейса для того чтобы взаимодействовать с пользователем. У данного тега есть атрибут , который отвечает за тип формы. У нас есть несколько случаев с разными типами.- Типы тега
- text — если задан данный тип у атрибута, значит в данный элемент можно вводить текст.
- checkbox — если задан данный тип у атрибута, значит в данный элемент является чекбоксом(он в браузере выбирается галочкой).
- password — если задан данный тип у атрибута, значит в данный элемент можно вводить пароль и он будет скрыт кружочками.
- reset — если задан данный тип у атрибута, значит данный атрибут предназначен для сброса полей формы. Он уже задан в html и никаких дополнительных команд прописывать не надо.
Как вы могли заметить у каждого элемента есть своё уникальное имя. Оно задается в атрибуте
. Данное имя необходимо для того чтобы мы могли затем передавать в файл обработчик данные из тегов . Имя должно быть уникальным. Атрибут у первого задает длину данного элемента на странице. А атрибут — задает максимальное количество символов в элементе.Сейчас рассмотрим как формируется чекбоксы:
... <p>Ваши интересы</p> <input type="checkbox" name="interest" value="football" checked>Футбол <input type="checkbox" name="interest" value="basketball">Баскетбол <input type="checkbox" name="interest" value="hockey">Хоккей ... |
Как это выглядит в браузере:
Для создания чекбокса необходимо в атрибуте
. Имя для одной группы чекбоксов должно быть одинаковым. ! НО это касается чекбоксов. Далее у каждого элемента чекбокса должно быть уникальное значение атрибута . Также есть такой атрибут без значения. Это атрибут — он устанавливает выделенным чекбокс которому присвоен данный атрибут.И последнее что мы рассмотрим в данном уроке это как формируется выпадающий список(select).
Пример кода:
... <p>Ваш возраст</p> <select name="old" size="5"> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="22">23</option> <option value="22">24</option> <option value="22">25</option> <option value="22">26</option> </select> ... |
Как это выглядит в браузере:
Выпадающий список формируется с помощью тега
. Затем задается имя для данного элемента в атрибуте и видимое количество элементов в атрибуте . Затем внутри данного тега прописываются с помощью тега . Внутри данного тега пишутся значения, которые будут выводится на странице, а внутри атрибута прописываются значения, которые будут передаваться обработчику(другой странице) при передаче данных формы.Данный урок оказался немного большим. Но все эти детали очень важны для понимания. Поэтому рекомендую вам тщательно в них разобраться, чтобы двигаться дальше. Сегодня мы рассмотрели как создать форму и некоторые элементы формы. Всё это не очень сложно. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.
Больше практикуйтесь!
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Здравствуйте, у меня при создании чекбоксов на странице они размещаются в одной строке друг за другом, а как сделать что бы они шли в столбец?как у вас в примере
Добрый день, Анастасия!
Добавьте тег <br> между чек-боксами.
cпасибо, все получилось