Обусловленные submit link. Странное поведение html form submit

есть ли способ сделать выбор группы опций?

Child Tag Child Tag

Keavon

до тех пор, пока это не поддерживается в стандарте html, любые и все ответы были проблематичными, в том числе:

Это привело меня к выводу лучше способ обойти эту проблему-либо использовать библиотеку, такую как UI-Selectable for all selects на вашем сайте (для согласованности), либо использовать первый вариант в optgroup для представления выбора всех детей с четким описанием (например, "все шведские автомобили"):

ALL Children Child Tag 1 Child Tag 2 .my-select { width: 60px; } Parent Child

немного другое решение..

OptionGroup { font-weight: bold; } Parent Tag Child Tag1 Child Tag2

ответ@grifos не поддерживается в браузерах WebKit и не работает при тестировании в IE 11.

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

Я видел хорошую реализацию этого в прошлом, это может выглядеть очень гладко!

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

Hide { display:none; } .show { display:block; } .selected.button { display:block; font-weight: bold; } button { text-align: left; min-width: 200px; margin-left: 10px; border: 0px; background: #eee; display: block; } #value_display { width: 210px; border: 1px solid #ddd; border-radius: 4px; padding-left: 8px; } opt 0 opt 0 opt 0-1 opt 0-2 opt 0-3 opt 0-4 opt 1 opt 1-1 opt 1-2 opt 1-3 opt 1-4 var showingOptions = false; var showingID = document.getElementById("value_display").innerHTML; function showOptions() { if(showingOptions) { document.getElementById("select_div").className = "hide"; showingOptions = false; } else { document.getElementById("select_div").className = "show"; showingOptions = true; } } function select(id){ document.getElementById(id).className = "selected button"; document.getElementById(showingID).className = "show"; showingID = id; document.getElementById("value_display").innerHTML = id; document.getElementById("select_div").className = "hide"; }

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

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

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

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 .

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

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

Устанавливает обработчик отправки формы на сервер, либо запускает это событие. Метод имеет три варианта использования:

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject .

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...} .

Убрать установленный обработчик можно с помощью метода unbind() .

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

Событие submit происходит непосредственно перед отправкой формы на сервер и в обработчике можно инициировать отмену отправки формы, вызвав метод eventObject.preventDefault() или просто возвратив false .

В IE событие submit в отличие от других событий не обладает свойством "всплытия вверх по иерархии". Однако начиная с jQuery-1.4 эта недоработка устранена и обработчики события submit , установленные на элементы, которые лежат выше элемента формы по иерархии, будут оповещены о предстоящей отправке данных на сервер.

// установим обработчик события submit, элементу с идентификатором foo, // после чего запретим отправку данных на сервер $("#foo" ) .submit (function () { alert ("Форма foo отправлена на сервер." ) ; return false ; } ) ; // вызовем событие submit на элементе foo $("#foo" ) .submit () ; // установим еще один обработчик события submit, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(".block" ) .submit ({ a: 12 , b: "abc" } , function (eventObject) { var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; alert ("Форма foo отправлена на сервер. " + "В обработчик этого события переданы данные: " + externalData ) ; } ) ;

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

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

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

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