HTML Формы. Несколько кнопок отправки в HTML-форме

• name - имя формы. Необходимо, если на странице несколько форм
• action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем
• method - определяет способ отправки информации
• target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы

Результат:

Попробуйте ввести текст и посмотрите на разницу в значениях параметра 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 , на кнопке по умолчанию будет добавлен текст «Очистить».

  Зачастую на 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 "Выберите значение" ;
  ?>

  Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута type .

  Атрибуты тега

  type Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text .
  Возможные значения:
  
  

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

  Autocomplete="off" Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. .setAttribute("autocomplete","off"); autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами: ... ... ... Пример эмуляции свойства автофокус для старых браузеров . disabled Делает элемент недоступным. Недоступные элементы не передаются на сервер. name Имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки. value Значение поля по умолчанию или надпись на кнопке. size Размер поля типа . maxlength Ограничение на количество символов, которые можно ввести в поле типа . readonly="readonly" или "" Запрещает изменение элемента. required Автоматически проверяет заполнено ли поле.
  Для подсветки правильно заполненного обязательно поля можно использовать следуюшую конструкцию style: min Минимальное значение числа в поле типа number . max Максимальное значение числа в поле типа number . step Шаг изменения числа в поле типа number . pattern Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern . placeholder Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
  Пример настройки стиля подсказки:

  В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.

  РЕЗУЛЬТАТ:

  List Список вариантов, которые можно выбирать при наборе в текстовом поле.
  Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

  Типы элемента INPUT

  Кнопка BUTTON

  Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).

  Пример

  РЕЗУЛЬТАТ:

  Кнопка SUBMIT

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

  Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit , заданный в теге

  . Ведь чтобы передать введенные в форму данные, в общем случае совсем не обязательно нажимать на кнопку SUBMIT . Можно просто нажать на клавиатуре клавишу ENTER , находясь в любом текстовом поле ввода. При этом произойдет передача данных.

  Пример

  РЕЗУЛЬТАТ:

  Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.

  Пример

  РЕЗУЛЬТАТ:

  Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

  Пример

  
  
  

  РЕЗУЛЬТАТ:

  Кнопка RESET

  Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.

  Совет: осторожно относитесь к выбору надписи на кнопке RESET . Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

  Пример

  РЕЗУЛЬТАТ:

  Поле ввода TEXT

  Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input , то тогда атрибут type="text" пропускать нельзя.
  Имя поля, задаваемое атрибутом name , всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

  Пример

  РЕЗУЛЬТАТ:

  Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку , то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

  Поле ввода чисел NUMBER

  Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

  Пример

  РЕЗУЛЬТАТ:

  Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как положительным, так и отрицательным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

  Пример

  РЕЗУЛЬТАТ:

  Для задания любого шага используйте step="any" .

  Пример

  РЕЗУЛЬТАТ:

  Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.

  Пароль

  Скрытое поле HIDDEN

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

  Пример

  ...Другие элементы формы....
  ...Другие элементы формы...

  Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.

  Пример

  Сценарий получит переменную с именем FormVersion , которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.

  Поле ввода адреса электронной почты

  Для ввода нескольких адресов можно добавить атрибут multiple , при этом для разделения адресов используется запятая (,)

  Пример

  E-mail:

  Attribute contains a DOMString which is displayed as the button"s label. Buttons do not have a true value otherwise.

  If you don"t specify a value , the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here"s an example of a submit button with a default label in your browser:

  Additional attributes

  formenctype

  A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

  Application/x-www-form-urlencoded This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as . multipart/form-data Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent."> elements of type file (). text/plain Plain text; mostly useful only for debugging, so you can easily see the data that"s to be submitted.

  If specified, the value of the formenctype attribute overrides the owning form"s action attribute.

  formmethod

  A string indicating the HTTP method to use when submitting the form"s data; this value overrides any method attribute given on the owning form. Permitted values are:

  Get A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form"s data, encoded as described by formenctype or the form"s enctype attribute. This URL is then sent to the server using an HTTP request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value. post The form"s data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post request. This method supports complex data and file attachments. dialog This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.

  formnovalidate

  A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element"s owning form.

  formtarget

  A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or ) represents a nested browsing context, embedding another HTML page into the current one.">