Триколор 

Множественные submit для формы. Формы в HTML

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.

Пример 1. Отправка данных формы

HTML5 IE Cr Op Sa Fx

Данные формы

В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

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

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).

Пример 2. Открытие формы во фрейме

HTML5 IE Cr Op Sa Fx

Использование фрейма

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

HTML5 IE Cr Op Sa Fx

Форма

В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

HTML5 IE Cr Op Sa Fx

Отправка формы

Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.

Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих 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 - значение, которое будет отправлено серверу, если пункт выбран.
    Пример:

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

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

    Рассмотрим вначале добавление кнопки через и его синтаксис.

    Атрибуты кнопки перечислены в табл. 1.

    Создание кнопки показано в примере 1.

    Пример 1. Добавление кнопки

    HTML5 IE Cr Op Sa Fx

    Кнопка

    Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

    Рис. 1. Вид кнопки

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

    Рис. 2. Кнопки, созданные с помощью

    Синтаксис создания такой кнопки следующий.

    Надпись на кнопке

    Атрибуты перечислены в табл. 1, но в отличие от кнопки атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег добавляется внутрь , как показано в примере 2.

    Пример 2. Рисунок на кнопке

    HTML5 IE Cr Op Sa Fx

    Кнопка

    Кнопка с текстом Кнопка с рисунком

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

    Кнопка Submit

    Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

    Синтаксис создания кнопки Submit зависит от используемого тега или .

    Надпись на кнопке

    Атрибуты те же, что и у рядовых кнопок (пример 3).

    Пример 3. Отправка данных на сервер

    HTML5 IE Cr Op Sa Fx

    Кнопка

    Атрибут name для этого типа кнопки можно не писать. Если не указать значение value , то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

    Кнопка Reset

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

    Синтаксис создания указанной кнопки прост и похож на другие кнопки.

    Надпись на кнопке

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

    Пример 4. Кнопка для очистки формы

    HTML5 IE Cr Op Sa Fx

    Кнопка

    Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value , на кнопке по умолчанию будет добавлен текст «Очистить».

    Пытается отправить форму на сервер.

    Стоимость

    Если вы решили использовать элементы для создания кнопок в своей форме, имейте это в виду: если внутри есть только одна , эта кнопка будет обрабатываться как кнопка «отправить». Поэтому у вас должно быть привычка явно указывать, какая кнопка - кнопка отправки.

    Простая кнопка отправки

    Начнем с создания формы с простой кнопкой отправки:

    Let"s submit some text

    Это делает так:

    Попробуйте ввести текст в текстовое поле, а затем отправьте форму.

    После отправки пары имя / значение данных отправляется на сервер. В этом случае строка будет "text= usertext " , где «usertext» - это текст, введенный пользователем, закодированный для сохранения специальных символов. Где и как данные передаются, зависит от конфигурации ; см. « Отправка данных формы» для получения более подробной информации.

    Добавление сочетания клавиш отправки

    Ярлыки клавиш, также называемые клавишами доступа и эквивалентами клавиатуры, позволяют пользователю запускать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить комбинацию клавиш к кнопке отправки - так же, как и с любым для которого это имеет смысл, вы используете глобальный атрибут accesskey .

    В этом примере s указывается как ключ доступа (вам нужно нажать s плюс специальные ключи-модификаторы для вашей комбинации браузера / ОС. Чтобы избежать конфликтов с собственными комбинациями клавиш пользовательского агента, используются разные клавиши-модификаторы для ключи доступа, чем для других ярлыков на главном компьютере. Дополнительные сведения см. в разделе доступа.

    Вот предыдущий пример с добавленным ключом доступа s:

    Let"s submit some text

    Например, в Firefox для Mac нажатие кнопки Control - Option - S вызывает кнопку отправки, в то время как Chrome в Windows использует Alt + S.

    Проблема с приведенным выше примером заключается в том, что пользователь не будет знать, что такое ключ доступа! Это особенно верно, поскольку модификаторы обычно нестандартны, чтобы избежать конфликтов. При создании сайта обязательно указывайте эту информацию таким образом, чтобы это не мешало дизайну сайта (например, предоставляя легкодоступную ссылку, указывающую на информацию о том, какие ключи доступа к сайту). Добавление всплывающей подсказки к кнопке (с использованием атрибута title) также может помочь, хотя это не полное решение для целей доступности.

    Отключение и включение кнопки отправки

    Чтобы отключить кнопку отправки, просто укажите на ней disabled глобальный атрибут, например:

    Вы можете включать и отключать кнопки во время выполнения, просто disabled значение true или false ; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false .

    Проверка

    Кнопки отправки не участвуют в проверке ограничений; они не имеют реальной ценности для ограничения.

    Примеры

    Мы включили простые примеры выше. Больше нечего сказать о кнопках отправки. Причина такого рода контроля иногда называется «простой кнопкой».

    Скажем, вы создаете Мастер в форме 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" должно указывать желаемое поведение по умолчанию.