HTML с нуля. Лекция 3


Приветствую Вас, дорогие читатели! С опозданием в два дня  — третья лекция «HTML с нуля». Писать в блог получается все реже и реже. Всему виной — создание сайтов, очень тяжело найти время на написание статей.  Ваши комментарии очень много для меня значат, они дают мне понять, что блог действительно нужен. Ну, это было небольшое лирическое отступление. Перейдём к изучению.Сегодня мы с Вами познакомимся с формами.

Что такое формы?

Вы наверняка не раз встречали на сайтах поле поиска, так вот поиск — это форма, у которой один элемент. Формой называется то, что находится между тегом <form> и </form>. Форма служит для обмена информацией между пользователем и сервером. У тега <form> есть свои атрибуты:

  • accept-charset — Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
  • action — Адрес программы или документа, который обрабатывает данные формы.
  • autocomplete — Включает автозаполнение полей формы.
  • enctype — Способ кодирования данных формы.
  • method — Метод протокола HTTP.
  • name — Имя формы.
  • novalidate — Отменяет встроенную проверку данных формы на корректность ввода.
  • target — Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Но форма не будет формой, если у неё нет хотя бы одного поля и кнопки, посредством которой  введённые  данные будут отправлены на сервер. Когда мы говорим «отправлены на сервер» — подразумевается страница-обработчик, на которой выполняются раздличные действия над полученной информацией. Для того, чтобы указать, какая страница будет обрабатывать данные нашей формы, используется атрибут action.
Следующий атрибут, который мы должны указать — это method. Он отвечает за то, в каком виде будут предоставленны данные странице-обработчику. Может принимать два значения GET и POST. Я обычно использую метод POST. Но подробнее об этом мы поговорим, когда начнём учить PHP с нуля.

Что внутри формы?

Сейчас давайте разберёмся с содержимым, которое расположено между внутри формы. Помимо обычных html-тегов (br, label, table, p, span, a, div) можно встретить следующие теги: <input>, <textarea>, и <select>. Давайте поговорим о них подробнее. Начнём с <textarea>.

Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. У <textarea> 13 атрибутов:

  • accesskey — Переход к полю с помощью сочетания клавиш.
  • autofocus — Автоматическое получение фокуса.
  • cols — Ширина поля в символах.
  • disabled — Блокирует доступ и изменение элемента.
  • form — Связывает текстовое поле с формой по её идентификатору.
  • maxlength — Максимальное число введенных символов.
  • name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
  • placeholder — Указывает замещающийся текст.
  • readonly — Устанавливает, что поле не может изменяться пользователем.
  • required — Обязательное для заполнения поле.
  • rows — Высота поля в строках текста.
  • tabindex — Порядок перехода между элементами при нажатии на клавишу Tab.
  • wrap — Параметры переноса строк.

Теперь поговорим о теге <input>. Он имеет много атрибутов, но мы начнём с самого главного — с атрибута type, который имеет следующие значения.

Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. Пиво Чай Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются
на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются
звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких
предложенных.
Пиво Чай Кофе
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

Вот список остальных атрибутов:

  • accept — Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
  • accesskey — Переход к элементу с помощью комбинации клавиш.
  • align —  Определяет выравнивание изображения.
  • alt — Альтернативный текст для кнопки с изображением.
  • autocomplete — Включает или отключает автозаполнение.
  • border — Толщина рамки вокруг изображения.
  • checked — Предварительно активированный переключатель или флажок.
  • disabled — Блокирует доступ и изменение элемента.
  • form — Связывает поле с формой по её идентификатору.
  • formaction — Определяет адрес обработчика формы.
  • formenctype — Устанавливает способ кодирования данных формы при их отправке на сервер.
  • formmethod — Сообщает браузеру каким методом следует передавать данные формы на сервер.
  • formnovalidate — Отменяет встроенную проверку данных на корректность.
  • formtarget — Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
  • list — Указывает на список вариантов, которые можно выбирать при вводе текста.
  • max — Верхнее значение для ввода числа или даты.
  • maxlength — Максимальное количество символов разрешенных в тексте.
  • min — Нижнее значение для ввода числа или даты.
  • multiple — Позволяет загрузить несколько файлов одновременно.
  • name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
  • pattern — Устанавливает шаблон ввода.
  • placeholder — Выводит подсказывающий текст.
  • readonly — Устанавливает, что поле не может изменяться пользователем.
  • required — Обязательное для заполнения поле.
  • size — Ширина текстового поля.
  • src — Адрес графического файла для поля с изображением.
  • step — Шаг приращения для числовых полей.
  • tabindex — Определяет порядок перехода между элементами с помощью клавиши Tab.
  • type — Сообщает браузеру, к какому типу относится элемент формы.
  • value — Значение элемента.

Ещё один тег, который можно встретить в форме — <select>. Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>.

Список множественного выбора Раскрывающийся список

У тега <select> есть свои атрибуты:

  • accesskey — Позволяет перейти к списку с помощью некоторого сочетания клавиш.
  • autofocus — Устанавливает, что список получает фокус после загрузки страницы.
  • disabled — Блокирует доступ и изменение элемента.
  • form — Связывает список с формой.
  • multiple — Позволяет одновременно выбирать сразу несколько элементов списка.
  • name — Имя элемента для отправки на сервер или обращения через скрипты.
  • required — Список обязателен для выбора перед отправкой формы.
  • size — Количество отображаемых строк списка.
  • tabindex — Определяет последовательность перехода между элементами при нажатии на клавишу Tab

В свою очередь тег <option> тоже имеет свои атрибуты:

  • disabled — Заблокировать для доступа элемент списка.
  • label — Указание метки пункта списка.
  • selected — Заранее устанавливает определенный пункт списка выделенным.
  • value — Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Например, можно сделать выпадающий список, в котором будут отображаться имена девочек.

Что бы всё стало предельно ясно, вот код, в котором описана большая форма:

<html>
<head>
<title>Форма для отправки резюме на вакансию программиста</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="form.html" method="post">
<label for="name">Ф.И.О.</label><br />
<input type="text" name="fullname" id="name" size="20" maxlength="50" min="10" /><br />
<label for="bestlang">Каким языком программирования Вы владеете в совершенстве?</label><br />
<select id="bestlang" name="bestlang" />
<option disabled="disabled" selected="selected">Выберите язык</option>
<option>PHP</option>
<option>C#</option>
<option>C++</option>
<option>Perl</option>
<option>Delphi</option>
<option>Ruby</option>
<option>JavaScript</option>
<option>Java</option>
</select><br />
Какой у вас опыт работы в сфере IT?<br />
<input type="radio" name="exp" id="exp1" checked="checked" /><label for="exp1">Менее года</label><br />
<input type="radio" name="exp" id="exp2" /><label for="exp2">1 год</label><br />
<input type="radio" name="exp" id="exp3" /><label for="exp3">2 года</label><br />
<input type="radio" name="exp" id="exp4" /><label for="exp4">3 года</label><br />
<input type="radio" name="exp" id="exp5" /><label for="exp5">4-5 лет</label><br />
<input type="radio" name="exp" id="exp6" /><label for="exp6">Более 5 лет</label><br />
<input type="radio" name="exp" id="exp7" /><label for="exp7">Более 10 лет</label><br />
<label for="lang">Какими языками Вы владеете?</label><br />
<input type="checkbox" id="lang1" /><label for="lang1">Русский</label><br />
<input type="checkbox" id="lang2" /><label for="lang2">Английский</label><br />
<input type="checkbox" id="lang3" /><label for="lang3">Немецкий</label><br />
<input type="checkbox" id="lang4" /><label for="lang4">Французский</label><br />
<input type="checkbox" id="lang5" /><label for="lang5">Итальянский</label><br />
<input type="checkbox" id="lang6" /><label for="lang6">Китайский</label><br />
<label for="email">Введите Ваш контактный email</label><br />
<input type="email" id="email" /><br />
<label for="photo">Ваша фотография</label><br />
<input type="file" id="photo" /><br />
<label for="robot">Вы Робот?</label><br />
<input type="text" id="robot" readonly="readonly" value="нет" /><br />
<label for="isrobot">Если Вы робот, сколько будет 87+148?</label><br />
<input type="text" id="isrobot" disabled="disabled" value="235" /><br />
<input type="submit" name="send" value="Отправить данные" /> <input type="reset" name="reset" value="Очистить форму" />
</form>
</body>
</html>

Визуальный пример по этой ссылке

При написании статьи некоторое описание тегов было взято с htmlbook.ru

Stas Kuryan

Web developer. Перфекционист в написании кода.

15 комментариев

  1. Diam     

    Красиво сделал, читабельно и приятно глазу. Неудивительно, что ты столько времени потратил!

  2. Саша     

    Спасибо за 3-ю лекцию.

    Почему в данном коде, у меня русский текст отображается вопросительными знаками? (firefox)

    • Stafox        Автор

      Вероятно всё дело в кодировке браузера. Попробуйте изменить на Кирилицу Windows-1251.

      А вообще, лучше я изменю кодировку страницы примера.

  3. caxa     

    А вот я не очень понял как назначить адресс для тега img?

  4. Марина     

    Очень удивилась прочитав информацию «О себе». Мало Белорусов пишут такие замечательные и поучительные статьи. Привет из Минска)

    • Stafox        Автор

      Привет в ответ 🙂 Спасибо на добром слове.

  5. Никита Плохань     

    все освоил за 3-4 дня. (эту лекцию ) на 100%. но почему у меня когда я это написал. выскакивают вопросительные знаки? браузер гугл хром.

    • Stafox        Автор

      Теги режутся. Нужно пофиксить. Вставьте пока свой код на paste.ubuntu.com, и ссылку сюда потом.

  6. alban     

    В чём смысл атрибутов for, id?
    Ф.И.О.

    • Stafox        Автор

      Для того, чтобы связать label и input и используется атрибут «for». Есть объектная модель в JavaScript, позволяющая обратиться к input, при выполнении действий над label, в том случае, если они связаны.

      А id является уникальным идентификатором (должен быть уникальным), в основном используется для того, чтобы можно было обратиться к элементу из JavaScript напрямую.

  7. alban     

    т.е . эти два атрибута сделаны для явы, а в html эта связь ничего не играет?
    если я напишу
    label ФИО /label
    input type=»text» name=»fullname» size=»20″ maxlength=»50″ min=»10″, то в данном случае не смогу связать их при применении явы?

    • Stafox        Автор

      Да, для JS (Java — это другой язык программирования). Сможете конечно, но другими методами.

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

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