Лого SiteHere.ru

Урок 9. Формы. Часть 1

Урок 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>

Как это выглядит в браузере:

Главная

Ваше имя

Ваши интересы

Футбол Баскетбол Хоккей

Ваш возраст

Введите пароль


Вы увидели много полей формы и возможно сильно испугались. Но не стоило этого делать :). Сейчас мы разберемся что мы здесь написали. Обо всём по порядку.

Форма создается специальным тегом <form></form>.

Тег <input> является одним из элементов формы и позволяет создавать разные элементы интерфейса для того чтобы взаимодействовать с пользователем. У данного тега есть атрибут type="", который отвечает за тип формы. У нас есть несколько случаев с разными типами.

    Типы тега <input>
  • text — если задан данный тип у атрибута, значит в данный элемент можно вводить текст.
  • checkbox — если задан данный тип у атрибута, значит в данный элемент является чекбоксом(он в браузере выбирается галочкой).
  • password — если задан данный тип у атрибута, значит в данный элемент можно вводить пароль и он будет скрыт кружочками.
  • reset — если задан данный тип у атрибута, значит данный атрибут предназначен для сброса полей формы. Он уже задан в html и никаких дополнительных команд прописывать не надо.

Как вы могли заметить у каждого элемента есть своё уникальное имя. Оно задается в атрибуте name="". Данное имя необходимо для того чтобы мы могли затем передавать в файл обработчик данные из тегов <input>. Имя должно быть уникальным. Атрибут size="20" у первого <form></form> задает длину данного элемента на странице. А атрибут 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">Хоккей
...

Как это выглядит в браузере:

Главная

Ваши интересы

Футбол Баскетбол Хоккей

Для создания чекбокса необходимо в атрибуте type="checkbox". Имя для одной группы чекбоксов должно быть одинаковым. ! НО это касается чекбоксов. Далее у каждого элемента чекбокса должно быть уникальное значение атрибута value="". Также есть такой атрибут без значения. Это атрибут checked — он устанавливает выделенным чекбокс которому присвоен данный атрибут.

И последнее что мы рассмотрим в данном уроке это как формируется выпадающий список(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>
...

Как это выглядит в браузере:

Главная

Ваш возраст

Выпадающий список формируется с помощью тега <select></select>. Затем задается имя для данного элемента в атрибуте name="old" и видимое количество элементов в атрибуте size="5". Затем внутри данного тега прописываются с помощью тега <option></option>. Внутри данного тега пишутся значения, которые будут выводится на странице, а внутри атрибута value="" прописываются значения, которые будут передаваться обработчику(другой странице) при передаче данных формы.


Данный урок оказался немного большим. Но все эти детали очень важны для понимания. Поэтому рекомендую вам тщательно в них разобраться, чтобы двигаться дальше. Сегодня мы рассмотрели как создать форму и некоторые элементы формы. Всё это не очень сложно. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.

Больше практикуйтесь!

3 комментария к записи
  • Анастасия

    Здравствуйте, у меня при создании чекбоксов на странице они размещаются в одной строке друг за другом, а как сделать что бы они шли в столбец?как у вас в примере

     
    • Юрий Немец

      Добрый день, Анастасия!

      Добавьте тег <br> между чек-боксами.

       
      • Анастасия

        cпасибо, все получилось

         

Добавить комментарий

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