Обработчик или источник события submit. Странное поведение html form submit Беспредельный submit html

Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.

Применение:
Для чего это может понадобиться? Всё просто, для придания эстетичного вида той самой кнопке.
Вот для сравнения. Наглядно видно, что вторая кнопка смотрится лучше.

Решение:
Для выполнения данной цели как и говорилось мы будем применять «input» с типом «submit». Ещё нам понадобится описать новый класс в таблице стилей «*.css»
Вот код для html-файла:

А вот и css:

Superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}

Украшаем:
Для украшения можно предложить изменять цвет фона кнопки при наведении. Как правило дизайнеры советуют менять цвет не кардинально, а всего лишь на тон светлее или темнее. Я при выполнении задачи предпочел затемнить кнопку. Для этого в css добавляем:

Superbutton:hover{
background:#358DE5;
}

Теперь кнопка ожила. На статичной картинке разность цветов не так заметна когда ты наводишь мышь и цвет в туже секунду меняется накладывая более темный оттенок.

Проблема рамки вокруг кнопки:
И всё вроде ничего и выглядит ничего и при наведении темнеет, но при нажатии мы видим ужасную рамку. Ещё эту рамку можно наблюдать если наша кнопка находится в фокусе, в том который по кнопке Tab перебирает элементы на странице.
Для этого мы пропишем в css ещё 2 псевдо класса, как и «hover». Это классы «active» который отвечает за вид при нажатии на кнопку и класс «focus» при фокусе на кнопке. Но есть одна особенность, так как у нас input и присвоенный ему класс, то active прописывать не обязательно.
Вот код:

Superbutton:focus{
outline:none;

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

Стоимость

Если вы решили использовать элементы для создания кнопок в своей форме, имейте это в виду: если внутри

есть только одна

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

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

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

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 .

Проверка

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

Примеры

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

Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.

1) Создание простой формы

Теги

и

задают начало и конец формы. Начинающий форму тег

содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET .

Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

$text = nl2br ($_POST [ "mytext" ]);
?>

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:

Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

2000
2001
2002
……………………………………………
2050

II. Ввод данных через цикл:

$year = 2000 ;
for ($i = 0 ; $i <= 50 ; $i ++) // Цикл от 0 до 50
{
$new_years = $year + $i ; // Формируем новое значение
echo "" . $new_years . "" ; //Формируем новую строчку
}
?>

Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST .

Описание:

Создадим HTML-форму для отправки файла на сервер.

В данной html-форме присутствует элемент browse , который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл" , файл передается сценарию-обработчику.

Затем необходимо написать сценарий обработчик action.php . Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

if(isset($_FILES [ "myfile" ])) // Если файл существует
{
$catalog = "../image/" ; // Наш каталог
if (is_dir ($catalog )) // Если такой каталог есть
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Времменый файл
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Имя файла
if(! copy ($myfile , $catalog )) echo "Ошибка при копировании файла " . $myfile_name // Если неудалось скопировать файл
}
else mkdir ("../image/" ); // Если такого каталога нет, то мы его создадим
}
?>

Замечание

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

Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox ’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:

Синий
Черный
Белый

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Если выбран хоть 1 элемент
else echo "Выберите значение" ;
?>

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

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 ) ; } ) ;

С приходом 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й версии).