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

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.

Тег <form>

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://alfalavista.ru/index.php/component/search/?searchword=html&ordering=newest&searchphrase=all

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

<form action="URL">
  ...
</form>

Атрибуты

accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. Название кодировки, например Windows-1251, UTF-8 и др. Internet Explorer содержит ошибку при использовании кодировки ISO-8859-1, в этом случае браузер отправляет данные в кодировке Windows-1252.
<form action="handler.php" accept-charset="windows-1251">
action
Адрес программы или документа, который обрабатывает данные формы.

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

 <form action="mailto:
 This email address is being protected from spambots. You need JavaScript enabled to view it.
 " enctype="text/plain">
  <p><input type="submit" value="Написать письмо"></p>
 </form> 
autocomplete
Включает автозаполнение полей формы. Управляет автозаполнением полей форм. Значение может быть перекрыто атрибутом autocomplete у конкретных элементов формы.

Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete. К примеру, включение автозаполнения в браузере Chrome показано на рис. 1.

Настройки автозаполнения

Рис. 1. Настройки автозаполнения

При вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать необходимое (рис. 2).

Список для подстановки

Рис. 2. Список для подстановки

Синтаксис

<form autocomplete="on | off">...</form>

Значения

on
Включает автозаполнение формы.
off

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

Обязательный атрибут: Нет.

Значение по умолчанию: on

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег form, атрибут autocomplete</title>
 </head>
 <body>
  <form autocomplete="on">
   <p>Имя: <input name="user"></p>
   <p>Пароль: <input name="pass" type="password"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>
enctype

Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type="file"), следует определить атрибут enctype как multipart/form-data.

<form enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
...
</form>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Обязательный атрибут: Нет.

Значение по умолчанию: application/x-www-form-urlencoded

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут enctype</title>
 </head>
 <body>  
  <form action="handler.php"
   enctype="multipart/form-data" method="post">
   <p>Загрузите файл с картинкой</p>
   <p><input type="file" name="pic"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 3.

Поле для отправки файла

Рис. 3. Поле для отправки файла

method
Метод протокола HTTP. Атрибут method сообщает серверу о методе запроса.
<form method="get | post">...</form>

Значение атрибута method не зависит от регистра. Различают два метода — get и post.

get
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.
post
Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

Обязательный атрибут: Нет.
Значение по умолчанию: get

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут method</title>
 </head>
 <body>  
 <form action="handler.php" method="post">
  <p><input type="text" name="str"></p>
  <p><input type="submit" value="Отправить"></p>
 </form>
 </body>
</html>
name
Имя формы. Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.
<form name="имя">...</form>
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в атрибуте name.

Обязательный атрибут: Нет.
Значение по умолчанию: Нет.

novalidate
Отменяет встроенную проверку данных введенных пользователем в форме на корректность. Такая проверка осуществляется браузером автоматически при отправке формы на сервер и происходит для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required.

<form novalidate>...</form>

Значения: Нет.
Обязательный атрибут: Нет.
Значение по умолчанию: По умолчанию этот атрибут выключен

target
Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется атрибут target, в качестве его значения используется имя окна или фрейма. Если target не установлен, возвращаемый результат показывается в текущем окне.

<form target="имя окна">...</form>

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

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

Обязательный атрибут: Нет.
Значение по умолчанию:_self
Валидация : Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут target</title>
 </head>
 <body>
 <form action="handler.php" target="_blank">
   ... 
 </form>
 </body>
</html>

Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег: Обязателен.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM</title>
 </head>
 <body>

 <form action="handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</b></p>
  <p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
  <input type="radio" name="answer" value="a2">Операционная система<Br>
  <input type="radio" name="answer" value="a3">Большой полосатый мух</p>
  <p><input type="submit"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 4.

Рис. 1

Рис. 4. Вид элементов формы в окне браузера

Между тегами <form> и </form> вставляют кнопки для отправки или очищения данных, кнопки для подтверждения выбора, переключатели, выпадающие списки и поля для ввода данных.

 Синтаксис тега form:

<form action="URL" method="">
<input type="" name="">
...
</form>

<input>

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис:

HTML
<input атрибуты>
XHTML
<input атрибуты />

Атрибуты

accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.

Синтаксис

HTML
<input type="file" accept="MIME-тип">
XHTML
<input type="file" accept="MIME-тип" />

Применяется к полю для отправки файла (<input type="file">).

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую. В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/*для всех графических файлов.

Значение по умолчанию: нет.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут accept</title>
 </head>
 <body> 
  <form action="handler.php">
   <p><strong>Укажите картинку в формате JPEG, PNG или GIF</strong></p>
   <p><input type="file" name="img" accept="image/jpeg,image/png,image/gif">
   <input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Браузеры

Opera не воспринимает значения, если они разделены между собой пробелом (accept="image/jpeg, image/png, image/gif").
Firefox до версии 16.0 поддерживает только значения audio/*, video/* и image/*.
В Firefox 22 по умолчанию стоит выбор всех файлов, а не заданный фильтр.

accesskey
Переход к элементу с помощью комбинации клавиш. Атрибут accesskey позволяет перейти к элементу с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.
  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S
Синтаксис
HTML
<input accesskey="c">
XHTML
<input accesskey="c" />

Обязательный атрибут: Нет.
Значения: Цифра (0-9) или латинская буква (a-z).
Значение по умолчанию: Нет.

align

Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.

<input type="image" align="bottom | left | middle | right | top">

В табл. 1 перечислены возможные значение атрибута align и результат его использования.

Табл. 1. Использование значений align
Код HTMLОписаниеПример
<input type="image" src="/sample.gif" align="bottom"> Выравнивание нижней границы изображения по окружающему тексту.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="/sample.gif" align="left"> Выравнивает изображение по левому краю окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="/sample.gif" align="middle"> Выравнивание середины изображения по базовой линии текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="/sample.gif" align="right"> Выравнивает изображение по правому краю окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="/sample.gif" align="top"> Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Значение по умолчанию: bottom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут align</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
   <p><input src="images/imgbutton.gif" type="image" align="right"></p>
  </form>

 </body>
</html>

Браузеры также поддерживают значения absbottom, absmiddle, baseline и texttop, которые не включены в спецификацию HTML 4.01.

alt

Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис

HTML
<input type="image" alt="Текст">
XHTML
<input type="image" alt="Текст" />

Значения: Любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию: Нет.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут alt</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>...</p>
   <p><input src="images/imgbutton.gif" type="image" 
   alt="Отправить форму на сервер"></p>
  </form>

 </body>
</html>
autocomplete
Включает или отключает автозаполнение. Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках и не может в таком случае управляться атрибутом autocomplete. К примеру, включение автозаполнения в браузере Chrome показано на рис. 1. При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое (рис. 2).
<input type="text" autocomplete="on | off">
<input type="password" autocomplete="on | off">
<input type="email" autocomplete="on | off">
<input type="search" autocomplete="on | off">
<input type="url" autocomplete="on | off">
<input type="tel" autocomplete="on | off">
on
Включает автозаполнение текста.
off
Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Обязательный атрибут: Нет.
Значение по умолчанию: Зависит от настроек браузера.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут autocomplete</title>
 </head>
 <body>
  <form>
   <p>Имя: <input name="user" autocomplete="on"></p>
   <p>Пароль: <input name="pass" type="password"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>
autofocus

Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.

<input autofocus>

Значения: Нет.
Значение по умолчанию: По умолчанию атрибут autofocus не установлен.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут autofocus</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Поиск по сайту</p>
   <p><input type="search" name="s" autofocus>
   <input type="submit" value="Искать"></p>
  </form>
 </body>
</html>
border

Браузеры обрабатывают изображения, добавленные через тег <input>, подобно рисункам, созданным с помощью тега <img>. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.

<input type="image" border="толщина рамки">

Значения: Любое целое положительное число в пикселах.
Значение по умолчанию: 0
Аналог CSS: border

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут border</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>...</p>
   <p><input src="images/imgbutton.gif" type="image" border="2"></p>
  </form>

 </body>
</html>
checked

Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.

Синтаксис

HTML
<input type="radio" checked>
<input type="checkbox" checked>
XHTML
<input type="radio" checked="checked" />
<input type="checkbox" checked="checked" />

Значения: Нет.
Значение по умолчанию: По умолчанию этот атрибут выключен.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут checked</title>
 </head>
 <body>

  <form method="post" action="input5.php">
   <p><b>С какими операционными системами вы знакомы?</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<Br>
   <input type="checkbox" name="option2" value="a2">Windows 2000<Br>
   <input type="checkbox" name="option3" value="a3">System X<Br> 
   <input type="checkbox" name="option4" value="a4">Linux<Br> 
   <input type="checkbox" name="option5" value="a5">X3-DOS</p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Результат данного примера показан на рис. 5.

Помеченный флажок в форме

Рис. 5. Помеченный флажок в форме

disabled

Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передается на сервер.

Синтаксис

HTML
<input type="..." disabled>
XHTML
<input type="..." disabled="disabled" />

Применяется : Ко всем элементам формы.
Значения: Нет.
Значение по умолчанию: По умолчанию этот атрибут выключен.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут disabled</title>
 </head>
 <body>

  <form  action="handler.php">
   <p><input type="text" size="30" onFocus="this.form.submit.disabled=0"></p>
   <p><input type="submit" name="submit" value="Отправить" disabled></p>
  </form> 

 </body>
</html>
form
Связывает поле с формой по её идентификатору.

Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.

<input type="<тип>" form="<идентификатор>">
<form id="<идентификатор>">...</form>

Значения: Идентификатор формы (значение атрибута id тега <form>).
Значение по умолчанию: Нет.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут form</title>
 </head>
 <body>
  <form id="data"></form>
  <p><input placeholder="Ваше имя" name="user" form="data"></p>
  <p><input type="submit" value="Отправить форму" form="data"></p>
 </body>
</html>
formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогично атрибуту action тега <form>.

<input type="submit" formaction="URL">

Значения: Нет.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formaction</title>
 </head>
 <body>
  <form> 
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><input type="submit" formaction="handler.php" value="Отправить"></p>
  </form> 
 </body>
</html>
formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype тега <form>, при совместном использовании formenctype и enctype последний игнорируется.

<input type="submit" formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">

Значения:

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию: application/x-www-form-urlencoded

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formenctype</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Файл для заявки: <input name="file" type="file"></p>
   <p><input type="submit" formaction="handler.php" formmethod="post" 
      formenctype="multipart/form-data" value="Отправить">
  </form>
 </body>
</html>
formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

<input type="submit" formmethod="get | post">

Различают два метода — GET и POST, которые задаются ключевыми словами get и post.

get
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
post
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formmethod</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="user"></p>
   <p>Файл для заявки: <input name="file" type="file"></p>
   <p><input type="submit" formaction="handler.php" formmethod="post" 
   formenctype="multipart/form-data" value="Отправить">
  </form>
 </body>
</html>
formnovalidate

Отменяет встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у тега <input>.

Синтаксис: <input type="submit" formnovalidate>
Значения: Нет.
Значение по умолчанию: По умолчанию этот атрибут выключен.

formtarget

Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

<input type="submit" formtarget="<имя окна> | _blank | _self | _parent | _top">

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

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно.
_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут formtarget</title>
 </head>
 <body>
  <form>
   <p><iframe name="output" height="50" width="400"></iframe></p>
   <p>Ваше имя: <input name="user"></p>
   <p><input type="submit" formaction="handler.php" formtarget="output" 
      value="Отправить"></p>
  </form>
 </body>
</html>
list

Указывает на список вариантов, созданный с помощью тега <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.

<input list="<идентификатор>">
<datalist id="<идентификатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

Значение:  Имя идентификатора тега <datalist>.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут list</title>
 </head>
 <body>
  <form> 
   <p><input list="cocktail"></p>
   <datalist id="cocktail">
    <option>Аперитивы</option>
    <option>Горячие</option>
    <option>Десертные</option>
    <option>Диджестивы</option>
    <option>Молочные</option>
    <option>Слоистые</option>
   </datalist> 
  </form> 
 </body>
</html>

Вид текстового поля при наборе текста показан на рис. 6.

Выбор текста из списка

Рис. 6. Выбор текста из списка

max

Устанавливает верхнее значение для ввода числа или даты в поле формы.

<input type="number" max="максимальное число">
<input type="range" max="максимальное число">
<input type="date" max="верхняя дата">

Значения: Целое положительное или отрицательное число (для type="number", type="range"). Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию: Нет.

Пример 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 
  <form action="handler.php">
   <p>Укажите вашу температуру в градусах Цельсия</p>
   <input type="number" min="35" max="41" 
    value="36.6" step="0.1" /></p>
  </form> 
 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 
  <form action="handler.php">
   <p>Сегодня 1 января 2145 года. 
   Укажите дату вылета на планету Земля на ближайшие
   семь дней.</p>
   <p><input type="date" min="2145-01-01" max="2145-01-08"
   value="2145-01-01" /></p>
  </form> 
 </body>
</html>

Результат данного примера в браузере Opera 11 показан на рис. 7.

Ограничение ввода даты через атрибут max

Рис. 7. Ограничение ввода даты через атрибут max

maxlength

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

HTML
<input type="text" maxlength="число">
<input type="password" maxlength="число">
XHTML
<input type="text" maxlength="число" />
<input type="password" maxlength="число" />

Значения: Любое целое положительное число.
Значение по умолчанию:Ввод символов не ограничен.

min

Устанавливает нижнее значение для ввода числа или даты в поле формы.

<input type="number" min="минимальное число">
<input type="range" min="минимальное число">
<input type="date" min="нижняя дата">

Значения: Целое положительное или отрицательное число (для type="number", type="range"). Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию: Нет.

multiple

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

 <input type="file" multiple> <input type="email" multiple>

Значения: Нет.
Значение по умолчанию: По умолчанию атрибут multiple выключен.

Пример 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут multiple</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="file" name="photo" required multiple
      title="Загрузите одну или несколько фотографий"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут multiple</title>
 </head>
 <body>
  <form action="handler.php">
   <p>Укажите почтовые адреса через запятую:</p>   
   <p><input type="email" name="email" required multiple></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Браузеры: Opera 10.62, Firefox 3.6 и Safari поддерживают multiple только для type="file".

name

Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.

HTML
<input type="..." name="имя">
XHTML
<input type="..." name="имя" />

Применяется ко всем элементам формы.

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

Значение по умолчанию: Нет.

pattern

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

<input type="email" pattern="выражение">
<input type="tel" pattern="выражение">
<input type="text" pattern="выражение">
<input type="search" pattern="выражение">
<input type="url" pattern="выражение">

Некоторые типовые регулярные выражения перечислены в табл. 2.

Табл. 2. Регулярные выражения
ВыражениеОписание
\d [0-9] Одна цифра от 0 до 9.
\D [^0-9] Любой символ кроме цифры.
\s Пробел.
[A-Z] Только заглавная латинская буква.
[A-Za-z] Только латинская буква в любом регистре.
[А-Яа-яЁё] Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.
[0-9]{3} Три цифры.
[A-Za-z]{6,} Не менее шести латинских букв.
[0-9]{,3} Не более трёх цифр.
[0-9]{5,10} От пяти до десяти цифр.
^[a-zA-Z]+$ Любое слово на латинице.
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
^[ 0-9]+$ Любое число.
[0-9]{6} Почтовый индекс.
\d+(,\d{2})? Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})? Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} IP-адрес
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form>
    <p>Введите телефон в формате 2-xxx-xxx, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
  </body>
</html>
placeholder

Выводит текст внутри поля формы, который исчезает при получении фокуса.

<input placeholder="строка">

Значения: Текстовая строка. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию: Нет.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут placeholder</title>
 </head>
 <body> 
  <form action="handler.php">
   <p><input type=search placeholder="Введите текст для поиска">
   <input type="submit" value="Искать"></p>
  </form> 
 </body>
</html>

Результат примера показан на рис. 8.

 Текст внутри поля для поиска

Рис. 8. Текст внутри поля для поиска

readonly

Когда к тегу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. 

HTML
<input type="text" readonly>
<input type="password" readonly>
XHTML
<input type="text" readonly="readonly" />
<input type="password" readonly="readonly" />

Значения: Нет.
Значение по умолчанию: По умолчанию это значение выключено.

required

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

Chrome 11 Opera 11 Firefox 4
Chrome Opera Firefox

Рис. 9. Вид сообщения об обязательном поле

Синтаксис: <input required>
Значения: Нет.
Значение по умолчанию: По умолчанию атрибут required выключен.

size

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется

HTML
<input type="text" size="ширина">
<input type="password" size="ширина">
XHTML
<input type="text" size="ширина" />
<input type="password" size="ширина" />

Значения: Любое целое положительное число.
Значение по умолчанию: 20

src

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

HTML
<input type="image" src="URL">
XHTML
<input type="image" src="URL" />

Значения: В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию: Нет.

step

Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

<input type="number" step="число">
<input type="range" step="число">

Значения: Любое целое или дробное число.
Значение по умолчанию: 1

Пример 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут step</title>
 </head>
 <body> 
  <form action="handler.php">
   <p><input type="range" min="0" max="10" step="2">
  </form>
 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут step</title>
 </head>
 <body> 
  <form action="handler.php">
   <p>Введите произвольное значение от 0 до 1:</p>
   <p><input type="number" value="0" min="0" max="1" step="0.1">
  </form>
 </body>
</html>

Safari не поддерживает значение number для атрибута type, поэтому игнорирует и атрибут step для поля с числом.

tabindex

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.

HTML
<input tabindex="число">
XHTML
<input tabindex="число" />

Обязательный атрибут: Нет.
Значения: Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.
Значение по умолчанию: Нет.

type

Сообщает браузеру, к какому типу относится элемент формы.

HTML
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text">
XHTML
<input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" />

Обязательный атрибут: Да

В табл. 3 перечислены возможные значения атрибута type и получаемый вид поля формы.

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

В HTML5 добавлены новые значения, представленные в табл. 4.

Табл. 4. Значения type в HTML5
ТипОписание
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Ввод чисел.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Для телефонных номеров.
time Для времени.
url Для веб-адресов.
month Выбор месяца.
week Выбор недели.

Поддержка этих значений браузерами показана в табл. 5.

Табл. 5. Поддержка браузерами значений HTML5
Значение Internet Explorer Chrome Opera Safari Firefox Android iOS
color   21.0+ 11.01+        
date   5.0+ 10.62+ 5.0+     5.0+
datetime   5.0+ 10.62+ 5.0+     5.0+
datetime-local   5.0+ 10.62+ 5.0+     5.0+
email 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
month   5.0+ 10.62+ 5.0+     5.0+
number 10.0 6.0+ 10.62+ 5.0+   2.3+ 4.0+
range 10.0 5.0+ 10.62+ 5.0+ 23.0+   5.0+
search 10.0 5.0+ 11.01+ 5.0+ 4.0+   4.0+
tel 10.0 5.0+ 11.01+ 5.0+ 4.0+   3.1+
time   5.0+ 10.62+ 5.0+     5.0+
url 10.0 5.0+ 10.62+ 5.0+ 4.0+ 2.3+ 3.1+
week   5.0+ 10.62+ 5.0+     5.0+

 

Значение по умолчанию: text

Пример 1

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>  
 
  <form action="input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Пример 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
 </head>
 <body>   
  <form>
  <p>Введите число от 1 до 10</p>
  <p><input type="range" min="1" max="10"></p>
  </form>
 </body>
</html>
value

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <input>, а значение — атрибутом value.

В зависимости от типа элемента атрибут value выступает в следующей роли:

  • для кнопок (input type="button | reset | submit") устанавливает текстовую надпись на них;
  • для текстовых полей (input type="password | text") указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в атрибуте value;
  • для флажков и переключателей (input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь.
  • для файлового поля (input type="file") не оказывает влияние.
HTML
<input type="..." value="значение">
XHTML
<input type="..." value="значение" />

Применяется ко всем элементам формы.
Значения: Любая текстовая строка.
Значение по умолчанию: Нет.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT, атрибут value</title>
 </head>
 <body>  

  <form action="input12.php">
    <p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
    <p><input type="radio" name="answer" value="a1">Офицерский 
    состав<Br>
    <input type="radio" name="answer" value="a2">Операционная 
    система<Br>
    <input type="radio" name="answer" value="a3">Большой 
    полосатый мух</p>
    <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Тег <textarea>

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

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

 

 <textarea атрибуты> текст </textarea>

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег обязателен.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег TEXTAREA</title>
 </head>
 <body>

  <form action="textarea1.php" method="post">
    <p><b>Введите ваш отзыв:</b></p>
    <p><textarea rows="10" cols="45" name="text"></textarea></p>
    <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Атрибуты

accesskey

Атрибут accesskey позволяет перейти к текстовому полю с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S
<textarea cols="..." rows="..." accesskey="c"></textarea>

Обязательный атрибут: Нет.
Значения: Цифра (0-9) или латинская буква (a-z).
Значение по умолчанию: Нет.

autofocus

Автоматически устанавливает фокус в текстовое поле. В таком поле можно сразу набирать текст без переключения курсора в текстовое поле.

<textarea autofocus> </textarea>

Значения: Нет.
Значение по умолчанию: По умолчанию атрибут autofocus не установлен.

cols

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

<textarea cols="число">
</textarea>

Обязательный атрибут: Обязателен в HTML4, не обязателен в HTML5.
Значения: Любое целое положительное число.
Значение по умолчанию: В HTML4 зависит от настроек браузера и операционной системы. В HTML5 — 20.

disabled

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Заблокированный в поле текст не передается на сервер.

HTML
<textarea disabled></textarea>
XHTML
<textarea disabled="disabled"></textarea>

Значения: Нет.
Значение по умолчанию: По умолчанию это значение выключено.

form

Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами <form>.

<textarea form="идентификатор">
</textarea>

Значения: Идентификатор формы (значение атрибута id тега <form>).
Значение по умолчанию: Нет.

maxlength

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

<textarea maxlength="число">
</textarea>

Значения: Любое целое положительное число.
Значение по умолчанию: Нет.

name

Определяет уникальное имя элемента <textarea>. Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

<textarea name="имя">
</textarea>

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

Значение по умолчанию: Нет.

placeholder

Выводит текст внутри текстового поля, который исчезает при получении фокуса.

<textarea placeholder="строка">
</textarea>

Значения: Текстовая строка. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию: Нет.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут placeholder</title>
 </head>
 <body>
   <form action="handler.php">
     <p><textarea placeholder="Ваше сообщение"></textarea></p>
     <p><input type="submit" value="Отправить"></p>
   </form>
 </body>
</html>

Результат данного примера в браузере Chrome показан на рис. 10.

Вид текста, созданного с помощью атрибута placeholder

Рис. 10. Вид текста, созданного с помощью атрибута placeholder

Firefox 4 допускает изменять стиль текста, выводимого через атрибут placeholder, с помощью псевдокласса :-moz-placeholder.

textarea:-moz-placeholder { color: red; }

В Safari и Chrome стиль текста меняется следующим образом:

textarea::-webkit-input-placeholder { color: red; }

readonly

Когда к тегу <textarea> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

HTML
<textarea readonly></textarea>
XHTML
<textarea readonly="readonly"></textarea>

Значения: Нет.
Значение по умолчанию: По умолчанию это значение выключено.

required

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

Chrome Opera Firefox

Рис. 11. Вид сообщения об обязательном поле

<textarea required>
</textarea>

Значения: Нет.
Значение по умолчанию: По умолчанию атрибут required выключен.

rows

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

<textarea rows="число"></textarea>

Обязательный атрибут: Обязателен в HTML4, не обязателен в HTML5.
Значения: Любое положительное число.
Значение по умолчанию: В HTML4 зависит от настроек браузера и операционной системы. В HTML5 — 2.

tabindex

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на кнопку Tab.

<textarea tabindex="число"></textarea>

Обязательный атрибут: Нет.
Значения: Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.
Значение по умолчанию: Нет.

wrap

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

<textarea wrap="soft | hard">
</textarea>
soft
Длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы.
hard
Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер места автоматического переноса сохраняются. При этом значении обязательно должен присутствовать атрибут cols.
off
Нестандартное значение. Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Значение по умолчанию: soft

Некоторые старые браузеры также поддерживают нестандартные значения soft и physical вместо hard.

Тег <select>

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

   
Список множественного выбора Раскрывающийся список
Список множественного выбора Раскрывающийся список
<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег обязателен.

Атрибуты

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

 

Вверх