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

Для отправки формы на сервер используется кнопка SUBMIT , такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда html форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки - Perl, PHP, С.

Тег FORM - создаём форму

Для указания браузеру, где начинается и заканчивается html форма , используется тег FORM. Между открывающим и закрывающим тегами и можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. В документе допускается наличие любого количества форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине формы не должны быть вложены одна в другую.


В какой версии HTML появился элемент canvas?
XHTML Basic 1.1
HTML 4.01 Transitional
HTML 5


Атрибуты тега FORM приведены ниже:

  • action - указывает обработчика, к которому обращаются данные формы при их отправке на сервер, в качестве обработчика может выступать CGI-программа или HTML-документ, а так же можно указать адрес электронной почты, начиная его с ключевого слова maiito .
  • enctype - устанавливает тип для данных, отправляемых вместе с формой.
  • method - этот параметр сообщает серверу о цели запроса, используют два основных метода: GET и POST :
    • get - этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке.
    • post - посылает на сервер данные в запросе браузера, что позволяет отправлять большее количество данных, чем доступно методу GET , поскольку у него установлено ограничение в 4 Кб.
  • target - после обработки формы данные возвращаются в виде html-документа, а с помощью этого атрибута можно определить окно, в которое будет загружаться итоговая веб-страница. Имя окна задаётся параметром NAME .
    • _blank - загружается в новом окне браузера;
    • _self - загружает страницу, возвращаемую обработчиком формы в текущее окно;
    • _parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self ;
    • _top - отменяет все фреймы, если они имеются, и загружает страницу в полном окне браузера, в противном случае этот параметр работает как _self .
Элементы форм

Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д.

Текстовое поле

Текстовое поле предназначено для ввода символов с клавиатуры. Различают три элемента формы, которые используются для этой цели, - однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле:

  • Однострочное текстовое поле - такое поле предназначено для ввода пользователем строки текста. Размер поля можно ограничить по ширине, но это делается больше для удобства дизайна, чтобы элемент можно было вместить в отведенное для него место. Текст при ограничении ширины поля можно писать как обычно, но при наборе введенные ранее символы скрываются.
    • maxlength - максимальное количество символов, разрешенных при наборе текста, если этот параметр опустить, то число вводимых символов неограничено.
    • name - имя поля, предназначено для того, чтобы обработчик формы мог идентифицировать поле.
    • size - ширина поля, физический размер зависит от настроек операционной системы и выбранного браузера.
    • value - начальный текст, содержащийся в поле.

Пример использования текстового поля приведен ниже:


Введите имя:



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

Введите имя:

Ширина текстового поля - величина нестабильная и в разных может меняться в небольших пределах. Для html формы , которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. В этом случае лучше вообще отказаться от использования параметра size и заменить его стилями. К тому же CSS позволяет изменять (background) , (font) и (border) .

С применением стилей может выглядеть, примерно так:

Введите имя:
  • Поле для ввода пароля - обычное текстовое поле, вводимый текст в котором отображается звездочками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Параметры поля для пароля аналогичны параметрам текстового поля. Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить права доступа.


Логин:
Пароль:


Посмотрим, что получилось, в браузере:

Логин: Пароль:
  • Многострочное текстовое поле - для создания области, в которую можно вводить несколько строк текста, предназначен тег TEXTAREA . В отличие от тега INPUT , в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Параметры поля отличаются от однострочного варианта и перечислены ниже:
    • cols - ширина текстового поля, которая определяется числом символов моноширинного шрифта.
    • disablet - блокирует доступ и изменение текстового поля. В таком случае оно отображается серым цветом и недоступным для активации пользователем.
    • name - определяет уникальное имя элемента TEXTAREA . Как правило, это имя применяется при отправке данных на сервер или для доступа к полю через скрипты. В качестве имени используется набор символов, включая числа и буквы.
    • readonly - когда к тегу TEXTAREA добавляется этот параметр, текстовое поле недоступно для изменения пользователем, в том числе в него не допускается вводить новый текст или модифицировать существующий.
    • rows - высота текстового поля, которая определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
    • wrap - параметр говорит браузеру о том, как осуществлять перенос текста в поле TEXTAREA и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, а когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки.

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


Введите имя:

Введите ваш отзыв:


В браузере увидим:

Введите имя:

Введите ваш отзыв:

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

Изображения в текстовом поле

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

Вначале готовим необходимое изображение, а затем добавляем его к тегу INPUT в виде фона, используя атрибут . Исходный рисунок можно уменьшить в графическом редакторе или, наоборот, увеличить высоту поля, подгоняя его под высоту изображения. С этой целью применяется свойство height . В качестве аргумента параметра background необходимо использовать no-repeat , тогда рисунок будет отображаться только один раз и не станет повторяться, как это задано для фона по умолчанию. Чтобы не писать текст поверх рисунка, к стилю тега INPUT следует добавить атрибут padding-left . Он обеспечивает набор текста правее рисунка, а его значение зависит от ширины изображения.

Примерно так:

Логин: Пароль:

Из-за того, что текстовое поле изображается утопленным за счет трехмерной рамки, реальная высота области несколько меньше указанной высоты. Так, в данном примере используются рисунки высотой 34px, если установить такое же значение и для поля, то изображения окажутся обрезанными снизу. Чтобы этого не произошло, высота поля в примере задана больше. С той же целью можно установить другой вид рамки, используя стилевое .

Кнопки

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

Кнопку на веб-странице можно создать двумя способами - с помощью тега INPUT и тега BUTTON . Рассмотрим вначале добавление кнопки через INPUT и его синтаксис.

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




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

Второй способ создания кнопки основан на использовании тега BUTTON . ОН по своему действию напоминает результат, получаемый с помощью тега INPUT . В отличие от этого тега, BUTTON предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе и . Используя стили, можно задать вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

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

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

Кнопка с текстом
Отправить

Вот, что получилось:

Кнопка с текстом Отправить
  • Кнопка SUBMIT - предназначена для отправки данных на сервер. Её вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега FORM . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде html-документа. Что именно делает обработчик, зависит от автора сайта; так, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.



Браузер отобразит:

  • Кнопка RESET - при нажатии на кнопку RESET данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Но для больших форм от использования кнопки RESET лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придется заполнять форму заново.

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





Посмотрим код html формы в отображении браузера:У этого поля три основных параметра: name , value и checked :

  • name - однозначно идентифицирует поле, вдобавок, поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. Такой подход однозначно устанавливает принадлежность поля к определенной группе.
  • value - задает, какое значение будет отправлено на сервер. Здесь каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.
  • checked - применяется для предварительного выделения пункта списка.

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


Сколко будет 2+2?
3
4
Тьма

В браузере форма будет иметь вид:

Сколко будет 2+2?
3
4
Тьма
Флажки

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

Параметры флажков идентичны переключателям, а именно: name задает имя поля, value - его значение, a checked устанавливает флажок как помеченный. При этом каждый флажок, входящий в группу, рассматривается как независимый, поэтому имена и значения у них должны различаться.


C какими операционными системами вы знакомы?
Windows 95/98
Windows 2000
System X
Linux
X3-DOS

Браузер отобразит.

Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы.

Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.

Но всему свое время, пока мы научимся добавлять html-формы на свои страницы, а обрабатывать информацию из них будем учиться в других уроках, посвященных, например, javascript.

Итак, в html форма задается тегами . Все остальные элементы формы располагаются между этими тегами.

У тега есть несколько параметров:

  • name - имя формы. Необходимо, если на странице несколько форм
  • action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем
  • method - определяет способ отправки информации
  • target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы
На данном этапе можете не очень вникать в эти параметры, их назначение станет очевидным при изучении языков обработки данных. А пока запомните, что все элементы формы располагаются между тегами :

Текстовое поле

Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом

Результат:

Параметры:

  • name - имя элемента,
  • type - тип элемента (в данном случае - text),
  • size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
  • maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
  • value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.
Возможны еще два параметра:
  • disabled - блокирует поле от любых изменений,
  • readonly - делает поле доступным только для чтения.
Пример:

Результат:

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

Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра type="password" .

Пример:

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

Результат:

Введите пароль:
Попробуйте ввести что-нибудь в этом поле.

Флажки

Вы, конечно, встречали подобный элемент:

Какими языками вы владеете:
английский немецкий испанский французский

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

Пример:

Какими языками вы владеете:
английский немецкий испанский французский

Рассмотрим его параметры:

  • type - тип элемента (в данном случае - checkbox),
  • name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
  • value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",
  • checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

    Переключатели

    В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio" , все остальные такие же, как у флажков.

    Укажите ваш пол:
    мужской женский

    Результат:

    Укажите ваш пол:
    мужской женский

    Кнопки

    Существует четыре вида кнопок:

    • submit - кнопка отправки содержимого формы web-серверу. Ее параметры:
      • type="submit" - тип кнопки,
      • name - имя кнопки,
      • value - надпись на кнопке.
    • image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
      • type="image" - тип графической кнопки,
      • name - имя кнопки,
      • src - адрес картинки для кнопки.
    • reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
      • type="reset" - тип кнопки очищения,
      • name - имя кнопки,
      • value - надпись на кнопке.
    • button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:
      • type="button" - тип произвольной кнопки,
      • name - имя кнопки,
      • value - надпись на кнопке.
      • onclick - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.
    Если на форме несколько кнопок, то они должны иметь разные названия.

    Пример кода:

    Результат:

    Кнопки можно задавать и по другому, при помощи тегов . Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

    • type - тип кнопки, может принимать значения:
      • reset - кнопка очистки формы,
      • submit - кнопка отправки данных,
      • button - кнопка произвольного действия.
    • name - имя кнопки,
    • value - надпись на кнопке.
    Пример кода: Отправить

    Результат:

    Отправить
  • physical - перенос и на экране и при поступлении на сервер.
  • disabled - неактивное поле,
  • readonly - разрешено только чтение.
    • Пример:

    Результат:

    Попробуйте ввести текст и посмотрите на разницу в значениях параметра wrap .

    Раскрывающиеся списки

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

    • :
      • name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.
      • size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки.
      • multiple - разрешает выбор нескольких элементов списка.
    • :
      • selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.
      • value - значение, которое будет отправлено серверу, если пункт выбран.
    Пример:

    Скажем, вы создаете Мастер в форме HTML. Одна кнопка возвращается, и один идет вперед. Поскольку кнопка "Назад" появляется сначала в разметке, когда вы нажимаете "Enter", она будет использовать эту кнопку для отправки формы.

    Что бы я хотел сделать, это решить, какая кнопка используется для отправки формы, когда пользователь нажимает Enter. Таким образом, когда вы нажмете Enter, мастер переместится на следующую страницу, а не предыдущую. Вам нужно использовать tabindex для этого?

    21 ответ

    Надеюсь, это поможет. Я просто делаю трюк float с кнопками справа.

    Таким образом, кнопка Prev слева от кнопки "Далее", но Next вначале в HTML-коде:

    F { float: right; } .clr { clear: both; }

    Изменить: Преимущества по сравнению с другими предложениями: нет доступных JavaScript, обе кнопки остаются type="submit"

    Можно ли изменить предыдущий тип кнопки на такую ​​кнопку:

    Надеюсь, что это поможет.

    Дайте своим кнопкам для отправки такие же имена:

    Когда пользователь нажимает кнопку ввода и запрос переходит на сервер, вы можете проверить значение для submitButton на своем серверном коде, который содержит коллекцию форм name/value . Например, в классическом ASP:

    If Request.Form("submitButton") = "Previous Page" Then " Code for Previous Page ElseIf Request.Form("submitButton") = "Next Page" Then " Code for Next Page End If

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

    Иногда предоставленное решение @palotasb недостаточно. Существуют случаи, когда, например, кнопка отправки "Фильтр" помещается над кнопками "Следующий и предыдущий". Я нашел обходное решение для этого: скопируйте кнопку отправки, которая должна действовать как кнопка отправки по умолчанию в скрытом div и поместить ее в форму над любой другой кнопкой отправки. Технически он будет отправлен другой кнопкой при нажатии Enter, а затем при нажатии на видимую кнопку Далее. Но поскольку имя и значение одинаковы, нет никакой разницы в результатах.

    div.defaultsubmitbutton { display: none; }

    Filtered results

    Если вы действительно хотите, чтобы он работал как диалоговое окно установки, как насчет того, чтобы просто сосредоточиться на кнопке "Далее" OnLoad. Таким образом, если пользователь нажимает Return, форма отправляется и идет вперед. Если они хотят вернуться, они могут нажать клавишу Tab или нажать кнопку.

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

    Однако, если вы разместите две формы на странице HTML, вы можете сделать это.

    Форма 1 имела бы предыдущую кнопку.

    Form2 будет иметь любые пользовательские входы + следующую кнопку.

    Когда пользователь нажимает Enter в Form2, загорается кнопка "Следующий подарок".

    Это работает без javascript или CSS в большинстве браузеров:

    Previous Page Next Page

    Firefox, Opera, Safari, Google Chrome работают.
    Как всегда, проблема IE.

    Эта версия работает при включении javascript:

    Previous Page Next Page

    Таким образом, недостаток в этом решении:
    Предыдущая страница не работает, если вы используете IE с отключенным Javascript.
    Имейте в виду, кнопка возврата все еще работает!

    Я бы использовал Javascript для отправки формы. Функция будет вызвана событием OnKeyPress элемента формы и будет определять, был ли выбран ключ Enter. Если это так, он отправит форму.

    Вот две страницы, в которых приводятся методы, как это сделать: , . Исходя из этого, здесь приведен пример использования (на основе ):

    сохранить имя всех кнопок отправки одинаково - "prev" Единственное отличие - это атрибут value с уникальными значениями. Когда мы создадим script, эти уникальные значения помогут нам определить, какая из кнопок отправки была нажата.

    И напишите следующее:

    BtnID = "" if Request.Form("prev") = "Previous Page" then btnID = "1" else if Request.Form("prev") = "Next Page" then btnID = "2" end if

    Для того, чтобы это сделать, нужно изменить порядок вкладок. Будь проще.

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

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

    Вот что я пробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор if, который выполнит требуемое действие, если нажата любая кнопка.

    If(isset($_POST["prev"])) { header("Location: previous.html"); die(); } if(isset($_POST["next"])) { header("Location: next.html"); die(); }

    Если у вас несколько активных кнопок на одной странице, вы можете сделать что-то вроде этого:

    Отметьте первую кнопку, которую вы хотите ввести триггеры Enter , как кнопка по умолчанию в форме. Для второй кнопки привяжите его к кнопке Backspace на клавиатуре. // Backspace eventcode равен 8.

    $(document).on("keydown", function(event) { if (event.which.toString() == "8") { var findActiveElementsClosestForm = $(document.activeElement) .closest("form"); if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) { $("form#" + findActiveElementsClosestForm.id + " .secondary_button").trigger("click"); } } });

    Надеюсь, что это поможет.

    Кнопка по умолчанию элемента формы - это первая кнопка отправки в дереве порядок, владельцем формы которого является элемент формы.

    Если пользовательский агент поддерживает предоставление пользователю неявной формы (например, на некоторых платформах нажмите клавишу "enter", а текст поле сфокусировано неявно представляет форму)...

    Наличие следующего ввода: type = "submit" и изменение предыдущего ввода на type = "button" должно указывать желаемое поведение по умолчанию.

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

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

    Пример: Простая HTML-форма
    • Попробуй сам »

    Моя первая форма:
    Имя:
    Фамилия:



    Простая форма

    Моя первая форма:
    Имя:
    Фамилия:


    Элемент

    Формы вставляются на веб-страницы посредством элемента . Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент .
    Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
    Большинство атрибутов элемента влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method . Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

    Элемент

    Практически все поля для формы создается с помощью элемента (от англ. input — ввод). Внешний вид элемента меняются в зависимости от значения его атрибута type :

    Вот некоторые значения атрибута type :

    Ввод текста и пароля

    Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type . Для добавления однострочного поля ввода текста в форму следует внутри элемента прописать атрибут type со значением text:

    Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

    Пример создания формы с полем для ввода пароля:

    Пример: Поле ввода пароля
    • Попробуй сам »

    Ваш логин:

    Пароль:




    Ваш логин:

    Пароль:


    Вместе с этим атрибутом можно использовать атрибут maxlenght , значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size . По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size , рекомендуется использовать средства каскадных таблиц стилей (CSS).
    Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

    Переключатели (radio)

    Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

    Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value . Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
    Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

    • Попробуй сам »

    Сколько Вам лет?

  • младше 18
  • от 18 до 24
  • от 25 до 35
  • более 35




    • Сколько Вам лет?

  • младше 18
  • от 18 до 24
  • от 25 до 35
  • более 35