HTML Формы. Обработчик или источник события submit Пример: Простая HTML-форма

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

Стоимость

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

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

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

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 .

Проверка

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

Примеры

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

Очень долго выдумывал какое дать название этой статье и ничего лучшего не смог придумать. Это единственное название, которое хоть как-то отражает суть изложенного. Я, если честно, не знаю как правильно это называется, поэтому назвал статью также, как пытался найти хоть какую-то информацию в поисковике по этой теме.

На одном из сайтов мне потребовалось в одной форме использовать две кнопки submit , которые пересылали бы заполненные данные разным PHP -“обработчикам”, в зависимости от нажатия кнопки. Google ничего вменяемого мне не ответил, видимо я просто не так его как-то об этом просил, поэтому пришлось придумывать самому.

Вот и выложил на Ваш суд.

Суть проблемы

После самостоятельной реализации, я все таки нашел несколько решения, которые основывались на использовании обычных кнопок, к которым прикручивался JS.

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

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

Для того, чтобы было более проще понять что я хочу и как это работает вот реально рабочий пример, в виде формы, у который 2 submit`a, пересылающие данные на разные страницы.

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

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

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

Замечание

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

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

Обсуждение:

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

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

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

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

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

Описание:

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

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

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

Замечание

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

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

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

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

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в 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