аватар |

Уроки / HTML /

Урок 11. Элементы формы: текстовая область и список.

Textarea (текстовая область)


Главная задача textarea (текстовой области) - передача большого количества символов от клиента к обработчику данных. Основное отличие от, например, поля заключается в объёме передаваемых и видимых символов. Input - строка, а textarea - может отображаться как одну так и более строк. Куда Вам будет удобнее вписывать большие объёмы текста?) input же нужен, например, для заполнения графы с фамилией, именем, городом, паролем и тп регистрационный данных.

<textarea> - это парный тег. Если Вы хотите, чтобы по умолчанию в textarea указывался какой-либо текст, то пропишите его между этими тегами, а если хотите оставить поле пустым, то между открывающим и закрывающим тегами не должно быть ничего.

У тега <textarea> имеется несколько атрибутов.

cols и rows

Данные атрибуты отвечают за высоту и ширину текстовой области.
cols - это высота, а rows ширина. Высота записывается не в пикселях, а в строчках. Ширина записывается в количестве столбцов.

<textarea cols="10" rows="15"></textarea>


name

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

<textarea name="feedback" cols="40" rows="8">Введите здесь ваш вопрос</textarea>



Select (выпадающий список)


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

<select> - это тег парный. Внутри данного тега прописываются теги <option>, в которых записываются варианты ответа. Тег <option> так же парный, слова записываются как раз внутри него. Пример использования тега:

<select>
  <option>Вариант 1</option>
  <option>Вариант 2</option>
  <option>Вариант 3</option>
</select>

Для того, чтобы при заполнении формы использовался мульти-выбор, добавляем к тегу <select> одиночный атрибут multiple.

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

Код HTML

<select size="3" multiple>
  <option>Футбол</option>
  <option>Хоккей</option>
  <option>Баскетбол</option>
</select>



Пример


Создаём форму-пример с textarea и select.

Код HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>

<body>

<form name="action" method="post" action="#">
<p>Вопрос:</p>
<p><textarea name="feedback" cols="40" rows="8">Введите здесь ваш вопрос</textarea>
</p>
<p>Важность вопроса:<p>
<select>
<option>Очень важный</option>
<option>Средний</option>
<option>Обычный</option>
</select>
<p><input type="submit" value="Отправить"></p>
</form>

</body>
</html>

И смотрим пример работы html с textarea и select.

Демонстрация Скачать исходники


Спасибо за внимание!)
 



Распечатать
Похожие статьи
25 января 2013 17:08 Урок 2. Структура html документа (страницы)
30 января 2013 16:37 Урок 10. Форма и элементы: флажок, радиокнопка, поле
30 января 2013 16:21 Урок 4. Ссылки в html
30 января 2013 16:33 Урок 8. Таблицы в html
25 января 2013 17:13 Урок 3. Заголовки и форматирование текста


Комментарии к статье (vk.com)