Ф ормы в 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
Браузер отобразит.
Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в 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 создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:
Атрибут name
для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name
и разное значение атрибута value
. Атрибут vаluе
устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked
(с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:
- Попробуй сам »
Сколько Вам лет?
Сколько Вам лет?
In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:
Self Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified. _blank Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent . _parent Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self . _top Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self .
Using submit buttonsbuttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a element.
If you choose to use elements to create the buttons in your form, keep this in mind: if there"s only one inside the , that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.
A simple submit buttonWe"ll begin by creating a form with a simple submit button:
Let"s submit some text
This renders like so:
Try entering some text into the text field, and then submitting the form.
Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text=usertext , where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the ; see Sending form data for more details.
Adding a submit keyboard shortcutKeyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button - just as you would with any for which it makes sense - you use the accesskey global attribute.
In this example, s is specified as the access key (you"ll need to press s plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent"s own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.
Here"s the previous example with the s access key added:
Let"s submit some text
For example, in Firefox for Mac, pressing Control - Option - S triggers the Send button, while Chrome on Windows uses Alt + S .
The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn"t interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it"s not a complete solution for accessibility purposes.
Disabling and enabling a submit buttonTo disable a submit button, simply specify the disabled global attribute on it, like so:
You can enable and disable buttons at run time by simply setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .
ValidationSubmit buttons don"t participate in constraint validation; they have no real value to be constrained.
ExamplesWe"ve included simple examples above. There isn"t really anything more to say about submit buttons. There"s a reason this kind of control is sometimes called a "simple button."
Specifications| HTML Living Standard The definition of "" in that specification. |
Living Standard | |
| HTML5 The definition of "" in that specification. |
Recommendation |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile | ||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android Safari on iOS Samsung Internet | ||
| Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 |
С приходом HTML5 формы сталее более универсальными. Элемент input теперь может содержать электронные адреса, даты и много другое, их можно отмечать как обязательные не прибегая к javascript – и это всего лишь некоторые из наиболее ценных возможностей. Также теперь для одной формы можно задействовать несколько submit кнопок, а также теперь есть возможность вынести кнопку submit за пределы формы.
Несколько submit внутри одной формыДо недавнего времени в форму можно было вставить только одну кнопку submit, в противном случае форма обрабатывала только последнюю кнопку. Добавляя method="post" и url к элементу формы "form" мы получали рабочую форму.
Теперь ситуация изменилась – в HTML добавили новые свойства "formmethod" и "formaction". Они позволяют добавить метод post и url непосредственно в кнопку "submit", таким образом к form ничего дописывать не нужно. Имея эти параметры, прикрепленные к кнопке "submit", а не к form – все это добавляет больше гибкости форме. Теперь можно сделать столько кнопок, сколько будет необходимо для формы.
Теперь каждая кнопка "submit" относится к разным url и все это избавляет от того, что при верстке необходимо писать javascript код. Все это отлично работает и теперь по нажатии на какую-нибудь кнопку форма получит formmethod и formaction, которые перезапишут стандартные параметры method и action. Если в форме будет присутствовать обычная кнопка "submit" без новых параметров, то он вернет форме значения, установленные для элемента form.
Свойства formmethod и formaction поддерживаются всеми популярными браузерами
Элементы формы (input, select, textarea) за пределами формыОбщепринятый факт, что все элементы формы, принадлежащие ей должны находится внутри элемента . Это уменьшает гибкость при разработке дизайна самих форм. Благодаря новому атрибуту "form" теперь любой элемент можно вынести за пределы формы и разместь любой элемент формы в любой части страницы. Для этого всего лишь необходимо форме добавить идентификатор ID и затем значение этого идентификатора добавить ко всем элементам в качестве аттрибута.
На сегодняшний день аттрибут form поддерживается всеми популярными браузерами, за исключением Internet Explorer (вплоть до 10й версии).
Скажем, вы создаете Мастер в форме 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" должно указывать желаемое поведение по умолчанию.
