Php для отправки данных формы используется кнопка типа: Отправка данных формы | htmlbook.ru

  document.addEventListener ("отправить", (e) => {
  
  const form = e.цель;

  
  fetch (form.action, {
    метод: form.method,
    тело: новые FormData (форма),
  })
    
    .then ((res) => res.text ())

    
    .then ((текст) => новый DOMParser (). parseFromString (текст, "текст / html"))

    
    .then ((doc) => {
      
      const result = document.createElement ("div");
      result.innerHTML = doc.body.innerHTML;

      
      result.tabIndex = -1;

      
      form.parentNode.replaceChild (результат, форма);

      
      result.focus ();
    })
    .catch ((err) => {
      
      форма.querySelector ("[роль = предупреждение]"). hidden = false;
    });

  
  Array.from (form.elements) .forEach ((field) => (field.disabled = true));

  
  form.querySelector ("[роль = предупреждение]"). hidden = true;

  
  e.preventDefault ();
});  

form.elements необходимо превратить в массив с использованием Array.from , чтобы мы перебрали его с помощью forEach и установили атрибут disable на true для каждого поля.

Теперь мы попали в неприятную ситуацию, потому что если fetch завершится неудачно и мы закончим в нашем catch , все поля формы будут отключены, и мы больше не сможем использовать нашу форму.Давайте решим эту проблему, добавив тот же оператор в обработчик catch и , но вместо отключения полей мы включим поля.

  .catch (err => {

  
  Array.from (form.elements) .forEach (field => field.disabled = false);

  
  form.querySelector ('[роль = предупреждение]'). hidden = false;

});  

Хотите верьте, хотите нет, но мы еще не выбрались из леса. Поскольку мы отключили все элементы, браузер переместил фокус на элемент .Если fetch не работает, мы попадаем в обработчик catch , включаем наши элементы формы, но пользователь уже потерял свое местоположение на странице (это особенно полезно для пользователей, использующих клавиатуру, или, опять же, для пользователей, которые приходится полагаться на программу чтения с экрана).

Мы можем сохранить текущий сфокусированный элемент document.activeElement , а затем восстановить фокус с помощью element.focus () позже, когда мы активируем все поля в обработчике catch и .Пока мы ждем ответа, мы переместим фокус на сам элемент формы.

  document.addEventListener ("отправить", (e) => {
  
  const form = e.target;

  
  fetch (form.action, {
    метод: form.method,
    тело: новые FormData (форма),
  })
    
    .then ((res) => res.text ())

    
    .then ((текст) => новый DOMParser (). parseFromString (текст, "текст / html"))

    
    .then ((doc) => {
      
      const result = document.createElement ("div");
      result.innerHTML = doc.body.innerHTML;

      
      result.tabIndex = -1;

      
      form.parentNode.replaceChild (результат, форма);

      
      result.focus ();
    })
    .catch ((err) => {
      
      Array.from (form.elements) .forEach ((field) => (field.disabled = false));

      
      lastActive.focus ();

      
      form.querySelector ("[роль = предупреждение]"). hidden = false;
    });

  
  const lastActive = document.activeElement;

  
  form.tabIndex = -1;
  form.focus ();

  
  Array.from (form.elements) .forEach ((field) => (field.отключено = правда));

  
  form.querySelector ("[роль = предупреждение]"). hidden = true;

  
  e.preventDefault ();
});  

Я признаю, что это не несколько строк JavaScript, но, честно говоря, там много комментариев.

Отображение состояния занятости

В завершение было бы неплохо показать состояние занятости, чтобы пользователь знал, что что-то происходит.

Обратите внимание, что, хотя fetch является необычным, в настоящее время он не поддерживает установку тайм-аута, а также не поддерживает события прогресса, поэтому для состояний занятости, которые могут занять некоторое время, не будет стыдно использовать XMLHttpRequest , было бы даже неплохо.

С учетом сказанного пришло время добавить класс к нашему предупредительному сообщению (ЧЕРТ, ВЫ ПРОШЛИ МЕНЯ!). Назовем его status-failure и добавим рядом с ним наш занятый абзац.

  

  

     Имя 
    
  

  

     Электронная почта 
    
  

  

    Ошибка подключения, попробуйте еще раз.

  

   Отправить 
  

Мы покажем состояние занятости после отправки формы и скроем его всякий раз, когда получим catch . Если данные отправлены правильно, вся форма заменяется, поэтому нет необходимости снова скрывать ее в потоке успеха.

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

Мы сохранили ссылки на два сообщения о состоянии в начале обработчика событий, это упрощает чтение кода в дальнейшем.

  document.addEventListener ("отправить", (e) => {
  
  const form = e.target;

  
  const statusBusy = form.querySelector (". статус-занято");
  const statusFailure = form.querySelector (". статус-сбой");

  
  fetch (form.action, {
    метод: форма.метод
    тело: новые FormData (форма),
  })
    
    .then ((res) => res.text ())

    
    .then ((текст) => новый DOMParser (). parseFromString (текст, "текст / html"))

    
    .then ((doc) => {
      
      const result = document.createElement ("div");
      result.innerHTML = doc.body.innerHTML;

      
      result.tabIndex = -1;

      
      form.parentNode.replaceChild (результат, форма);

      
      result.focus ();
    })
    .catch ((err) => {
      
      Array.from (form.elements) .forEach ((field) => (field.отключено = ложь));

      
      lastActive.focus ();

      
      statusBusy.hidden = false;

      
      statusFailure.hidden = false;
    });

  
  const lastActive = document.activeElement;

  
  statusBusy.hidden = false;
  statusBusy.tabIndex = -1;
  statusBusy.focus ();

  
  Array.from (form.elements) .forEach ((field) => (field.disabled = true));

  
  statusFailure.hidden = true;

  
  e.preventDefault ();
});  

Вот и все!

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

И последнее. Не удаляйте контур фокуса.

Заключение

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

Надеюсь, мы затронули пару новых API и методологий, которые вы можете использовать. Дайте мне знать, если у вас возникнут какие-либо вопросы!

HTML-форма: как отправлять данные с помощью HTML

Формы используются в веб-разработке для взаимодействия с пользователем. Сведения о физическом лице можно получить с помощью форм. Мы используем тег формы для создания форм в HTML. Мы можем использовать разные поля ввода для взаимодействия с пользователями. Эти поля ввода помещаются в тег HTML-формы. Элемент ввода может отображаться несколькими способами.Это зависит от атрибута типа. Это может быть текстовое поле, флажок, текстовая область и многое другое. Тег формы сам по себе имеет несколько атрибутов. Атрибут действия используется для указания места, куда будут отправлены данные формы. Атрибут метода используется, чтобы указать, как отправлять данные формы.

Темы в этой статье

Шаблоны HTML-форм

Ниже приведен пример формы HTML, которую можно использовать для регистрации.

 

 
 Зарегистрироваться 
 

  Имя: 

  
  
 

  Фамилия: 

  
  
 

  Электронная почта: 

  
  
 

  Пароль: 

  
  
 

  Подтвердите пароль: 

  
  
 

  Пол: 

   Мужской  Женский  Другое
  
 

  



 

Вывод:

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

Следующий код показывает HTML-форму страницы входа.

 

 
 Войти 
 

  Электронная почта: 

  
  
 

  Пароль: 

  
  
 

  


 

Форма радио

Существуют различные типы ввода, которые мы можем использовать для создания HTML-форм.Одно из них — радио. Радио — один из наиболее часто используемых типов ввода. Вы когда-нибудь замечали несколько круглых вариантов при регистрации или подписке онлайн? Например, при выборе пола. Это называется радио. Ниже приведен пример типов радио.

 


   Пол: 

   Мужской  Женский  Другое
  
 

  
  


 

В приведенном выше примере есть три переключателя.Вы можете выбрать только один из них. Атрибут value указывает значение каждой радиокнопки. Мы также можем использовать атрибут checked для первоначального выбора переключателя. В следующем примере есть отмеченный атрибут.

 


   Пол: 

   Male  Женский
 Другое
  
 

  



 

В приведенном выше примере мужскому переключателю присваивается отмеченный атрибут.

Проверки

Проверка играет важную роль в формах HTML. В форме несколько полей ввода всегда являются обязательными. Например, при регистрации на facebook такие поля, как имя, фамилия, адрес электронной почты и пароль, являются обязательными для заполнения. Для этой проверки мы используем обязательный атрибут.

 

 
 Войти 
 

   Имя: 

   
   
 

   Фамилия: 

   
   
 

   Электронная почта: 

   
   
 

  
 

  



 

Когда мы пытаемся отправить HTML-форму без заполнения поля электронной почты, появится сообщение, потому что мы отметили поле электронной почты как обязательное.

Мы также можем использовать атрибут maxlength в поле ввода, если тип — текст. Атрибут maxlength указывает максимальную длину, разрешенную для поля ввода. В следующем коде есть два поля ввода с текстом типа. Оба имеют максимальную длину десять. Это означает, что мы не можем ввести более десяти символов в эти поля ввода.

 


Имя: 



 

Фамилия: 





 

Мы должны использовать Javascript для проверки сложных форм.

Типы ввода формы

Мы можем использовать различные типы ввода при создании формы. Форма может состоять из нескольких полей ввода разных типов. Я объясню некоторые из самых основных и часто используемых типов ввода.

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

 


Имя: 



 

Фамилия: 



 



 

Поля ввода электронной почты широко распространены по всему Интернету.Каждый веб-сайт запрашивает электронное письмо, когда мы пытаемся зарегистрироваться. Для электронной почты ввод имеет отдельный тип. Если поле ввода имеет адрес электронной почты в качестве своего типа, вы должны ввести действующий адрес электронной почты, иначе будет отображаться сообщение. В следующем примере поле электронной почты имеет тип электронной почты. Если мы попытаемся отправить, не указав действующий адрес электронной почты, появится сообщение об ошибке.

 


Имя: 



 

Фамилия: 

 
 

Электронная почта: 



 


   

Он принимает только действительный адрес электронной почты.

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

 

 
 Войти 
 

Электронная почта: 



 

Пароль: 



 




 

Флажок:

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

 


 BMW

 

 Audi

 

 Феррари

 

 Mercedes

 






 

Подобно типу радио, нам также нужно присвоить значение каждому флажку.

Отправить:

Форма неполная без кнопок. Во входных тегах доступны кнопки трех типов. Самый важный из них — Отправить. Мы можем использовать тип отправки для создания кнопки, которая при нажатии отправляет данные формы по URL-адресу, указанному в атрибуте действия тега формы. Значение, присвоенное этому входу, — это текст, который появляется на кнопке.

 


Имя:  

Фамилия:  
 





 

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

Скрытый

Тип ввода отличается от любого другого типа ввода. Когда мы используем скрытый тип в поле ввода, это поле ввода не появляется на экране. Тогда какая от этого польза? Он используется веб-разработчиками для обновления базы данных при отправке формы. Пользователь не знает об этом поле ввода. Следующая форма имеет два поля ввода.Первый текстовый, второй — скрытый.

Этот тип ввода аналогичен комментарию HTML. Но в скрытом поле значение такого поля передается внутри формы.

 
<тело

  Имя:  

  
  

Второе поле ввода не видно.

Вывод:

TextArea

Текстовая область — это не тип ввода, а сам тег. Он также часто используется в HTML-формах. Мы можем использовать тег textarea, чтобы предоставить пользователю место в форме, чтобы что-то написать. Мы определяем текстовую область количеством строк и столбцов. Он может содержать неограниченное количество символов. В следующем примере показана текстовая область с четырьмя строками и пятьюдесятью столбцами.

 

<форма>
    




 

Вывод:

Мы также можем инициализировать текстовую область, написав что-нибудь внутри тегов textarea.

Выбрать

Подобно тегу textarea, Select не является типом ввода. Это тег, который также часто используется в HTML-формах. Тег Select — это не что иное, как раскрывающийся список с различными вариантами выбора. Мы можем выбрать только один вариант. Тег select используется для создания раскрывающегося списка, а тег параметра — для создания параметра внутри него. Мы можем использовать любое количество тегов option внутри тега select. В следующем коде есть тег выбора с четырьмя параметрами.

 


  Выберите: 

  <выбор>
     Audi 
     BMW 
     Феррари 
     Мерседес 
  
  
 

  



 

Вывод:

Мы должны вставить атрибут значения в каждый тег option, потому что он помогает скрытно, когда мы используем Javascript.

Действие формы

Тег формы имеет атрибут действия. Этот атрибут определяет URL-адрес или файл, в который должны быть отправлены данные формы при нажатии на отправку. Помимо атрибута действия, есть еще один атрибут, называемый методом. Атрибут метода может иметь значение GET или POST. Он определяет, как отправить данные формы.

Когда мы используем метод GET, данные формы отправляются как переменная URL. В следующем HTML-файле есть форма входа.

 


Имя: 

 
 

Электронная почта: 
  
 




 

Вывод:

Атрибут действия содержит файл PHP action_get. При нажатии кнопки отправки данные формы отправляются в файл action_get.php.

 

Добро пожаловать  

Ваш адрес электронной почты: 

 

Вывод:

Когда используется метод GET, данные формы отправляются через URL-адрес в адресной строке.Обратите внимание на картинку ниже. Мы можем видеть данные формы, отправленные ранее.

Вывод:

Метод post не отправляет данные через URL. Вместо этого данные формы встроены в HTTP-запрос. Атрибут действия следующей формы содержит файл PHP action_post.

 


Имя: 

 
 

Электронная почта: 
  
 




 

Вывод:

Следующий файл — action_post.php

 

Добро пожаловать  

Ваш адрес электронной почты: 

 

Вывод:

Обратите внимание на адресную строку после отправки формы. Мы видим, что в URL-адресе нет значений.

Пример PHP для чтения отправленной формы

В вышеприведенной теме мы наблюдаем разницу между GET и POST.Хотя в адресной строке разница была, но вывод остался прежним. В файле action_get.php я использую следующий код для печати данных формы.

 Добро пожаловать  

Ваш адрес электронной почты:  

В файле action_post.php я использовал следующий код.

 Добро пожаловать  

Ваш адрес электронной почты:  

Мы видим, я отдельно напечатал имя и адрес электронной почты в обоих файлах.Это нормально, когда есть только два поля ввода, но что делать, если в HTML-форме несколько полей ввода? Печать данных каждого поля ввода приведет к получению кода, состоящего из слишком большого количества строк. Более того, другим будет сложно анализировать код. Чтобы решить эту проблему, мы можем использовать цикл Foreach, предоставляемый PHP. Мы можем использовать цикл foreach для перебора полей ввода. В следующем примере представлена ​​HTML-форма регистрации с различными полями ввода.

 


Имя: 

 
 

Отчество: 

 
 

Фамилия: 

 
 

Электронная почта: 
  
 

Пол: 

 Мужской  Женский
 Другое 
 




 

Вывод:

Сообщение о действии.php выглядит следующим образом:

 

 $ value) {
echo "$ key is $ value 
";
}
?>

 

Вывод:

Соблюдайте приведенный выше код. В цикле Foreach используется $ _POST, потому что я указал метод формы как POST. Если мы хотим использовать метод GET, напишите $ _GET вместо $ _POST. Ключ $ представляет имя каждого поля, а значение $ представляет значение каждого поля.echo используется для печати данных на экране.

Заключение

— один из лучших способов взаимодействия с пользователем. Мы можем использовать эти формы для отправки данных или их извлечения. Есть множество типов ввода, которые мы можем использовать для создания формы. Ранее я уже объяснял несколько общих и важных типов.

Вы также можете настроить цвета шрифта или цвета фона в полях формы. Изображения также можно использовать как кнопки.

Мы также можем использовать Javascript для обработки форм перед их публикацией за кулисами.Например, мы можем объединить строку или проанализировать числа перед отправкой формы.

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

Обработка ввода в PHP

Обработка пользовательского ввода в PHP

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

HTML-формы

Формы обозначаются в документе HTML с помощью тега заполнения формы:

URL-адрес, указанный после ACTION, является URL-адресом вашей программы. МЕТОД — это средство передачи данных из формы в программу. В этом примере мы использовали метод «POST», который является рекомендуемым. Есть еще один метод, называемый «GET», но с этим методом связаны общие проблемы. Оба будут рассмотрены в следующем разделе.

В форме может быть что угодно, кроме другой формы.Для создания объектов пользовательского интерфейса используются следующие теги: INPUT, SELECT и TEXTAREA.

Тег INPUT определяет простой интерфейс ввода:

Что даст следующее:

Различные атрибуты в основном говорят сами за себя.ТИП — это разновидность представляемого вами входного объекта. Допустимые типы включают «текст», «пароль», «флажок», «радио», «отправить», «сбросить» и «скрытый». Каждый ввод, кроме «submit» и «reset», имеет ИМЯ, которое будет связано со значением, возвращаемым во вводе в программу. Это не будет видно пользователю (если он не прочитает исходный HTML-код). Остальные поля будут объяснены типами:

«текст» — относится к простому текстовому полю ввода. VALUE относится к тексту по умолчанию в текстовом поле, SIZE представляет визуальную длину поля, а MAXLENGTH указывает максимальное количество символов, которое допускает текстовое поле.Для всего этого есть значения по умолчанию (ничего, 20, без ограничений).

«пароль» — то же, что и обычное поле ввода текста, но вводимые символы скрыты.

«флажок» — относится к переключателю, который независимо включен или выключен. ЗНАЧЕНИЕ относится к строке, отправляемой на сервер, когда кнопка отмечена (не отмеченные флажки игнорируются). Значение по умолчанию — «включено».

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

«отправить» и «сбросить» — это кнопки внизу большинства форм, которые вы увидите, чтобы отправить форму или очистить ее. У них не обязательно быть ИМЯ, а ЗНАЧЕНИЕ относится к метке на кнопке. Имена по умолчанию — «Отправить запрос» и «Сброс» соответственно.

«скрытый» — этот ввод невидим с точки зрения пользовательского интерфейса (хотя не обманывайтесь, думая, что это какая-то функция безопасности — «скрытые» поля легко найти, просматривая источник документа или исследуя URL-адрес для метода GET).Он просто создает привязку атрибута / значения без необходимости действий пользователя, которые прозрачно передаются при отправке формы.

Второй тип интерфейса — это интерфейс SELECT, который включает всплывающие меню и таблицы с прокруткой. Вот примеры обоих:


опция 1
опция 2
опция 3
опция 4
опция 5
опция 6
опция 7



<ВЫБРАННАЯ ОПЦИЯ> опция 1
<ВЫБРАННАЯ ОПЦИЯ> опция 2
<ОПЦИЯ> опция 3
<ОПЦИЯ> опция 4
опция 5
опция 6
опция 7


Что даст нам:

Опция 1 вариант 2 вариант 3 вариант 4 вариант 5 вариант 6 вариант 7 Опция 1 вариант 2 вариант 3 вариант 4 вариант 5 вариант 6 вариант 7

Атрибут SIZE определяет, является ли это меню или прокручиваемым списком.Если он равен 1 или отсутствует, по умолчанию используется всплывающее меню. Если он больше 1, вы увидите прокручиваемый список с элементами SIZE. Параметр MULTIPLE, который заставляет выбор быть прокручиваемым списком, означает, что может быть выбрано более одного значения (по умолчанию только одно значение может быть выбрано в прокручиваемом списке).

OPTION более или менее говорит само за себя — он дает имена и значения каждого поля в меню или в прокручиваемой таблице, и вы можете указать, какие из них выбраны по умолчанию.

Последний тип интерфейса — это интерфейс TEXTAREA:

<br /> </code> <code> У Мэри был ягненок. <br /> </code> <code> Ягненок? <br /> </code> <code> Ягненок! <br /> </code> <code> У Мэри был ягненок. <br /> </code> <code> Это шерсть была бела как снег. <br /> </code> <code>

 HTML), включая новую строку после первого тега и перед последним тегом. 

 Обработка ввода на стороне сервера — PHP 
 PHP может обрабатывать запросы как GET, так и POST.Анализ ввода выполняется за вас с помощью PHP, поэтому вы полностью отделены от фактического формата входных данных. 
Сценарии PHP 
 обычно представляют собой комбинацию кода HTML и PHP, заключенную в теги   , и выполняются в ответ на HTTP-запросы от клиента. Давайте посмотрим на очень простую программу PHP, традиционную HelloWorld: 
   

  печать ""; 
 печать «<заголовок>»; 
 $ title = "Привет, мир"; 
 print ""; 
 печать ""; 
 print ""; 
 print " 
 $ title 
 ";  

  $ param = $ _GET ["параметр"]; 
   if ($ param) {
 print "Спасибо за прекрасную привязку param = '$ param'."; 
}  
  печать ""; 
 печать "";  
 ?>  
 Мы снова обсудим моменты этого кода в разделе, посвященном выводам PHP, но пока мы сосредоточимся на стороне ввода. Переменная  $ _GET  - это ассоциативный массив, содержащий параметры из клиентского запроса. Значения параметров, переданных из HTML FORM, можно получить, обратившись к элементу массива, соответствующему имени параметра.Именно с помощью этих механизмов вы можете получить любое из значений, введенных или неявных в форме. Как можно заключить из приведенного выше примера, PHP возвращает значение null, если параметр, имя которого вы запрашиваете, не имеет значения. Привязки непроверенных кнопок не передаются в сообщениях GET или POST. Вы можете проверить значение null, чтобы определить, когда кнопки выключены. PHP также содержит функции для проверки ключей массива, такие как isset. 
 Переменная  $ _POST  содержит параметры из сообщения POST. $ _REQUEST  содержит все содержимое массивов  $ _GET ,  $ _POST  и  $ _COOKIE . Обязательно ознакомьтесь с документацией PHP на предмет предостережений и ограничений при использовании этих трех аргументов. Например, значение  $ _GET  может быть не более 100 символов. 
 Возврат вывода пользователю 
 В вашем проекте вы будете заботиться о возврате HTML-документов пользователю. Документы будут создаваться динамически на основе результатов запроса.Вы можете отформатировать его как хотите, используя обычные процедуры форматирования HTML и теги. Приятной особенностью PHP является возможность включать как стандартный HTML-контент, так и код PHP. Это позволяет нам отделить содержимое статической презентации от содержимого, динамически генерируемого вашим PHP-кодом. Например, мы могли бы переписать приведенный выше пример HelloWorld следующим образом: 
   
  
  
  
   
   
 
 
   

   $ param = $ _GET ["param"]; 
 if ($ param) {
 print "Спасибо за прекрасную привязку param = '$ param'."; 
} 
?>  
   
   
 Обратите внимание, что переменная  $ title  все еще доступна в последующих блоках кода   . 
 Вы можете предоставить отдельные HTML-формы и PHP-код для обработки. В качестве альтернативы (или дополнительно) вы можете интегрировать FORM в свой PHP-код, создавая FORM на лету в вашей программе, которая будет вызываться при вызове GET или POST клиентом.Например, вы можете включить поле ввода на страницу вывода, чтобы пользователь мог отправить другой запрос, аналогично тому, как поисковые системы Интернета включают поле запроса на страницу результатов. 
 Обработка специальных символов 
 Специальные символы, такие как &, <и>, необходимо экранировать как & amp ;, & lt; и & gt; соответственно в тексте HTML (подробнее см. Учебное пособие W3School по HTML). Более того, специальные символы, появляющиеся в URL-адресах, необходимо экранировать иначе, чем когда они появляются в тексте HTML.Например, если вы связываете текст со специальными символами и хотите встроить их в расширенные URL-адреса в качестве значений параметров, вам необходимо экранировать их: преобразовать пробел в + или% 20, преобразовать & в% 26, преобразовать = в% 3D, преобразовать от% до% 25 и т. д. (Как правило, любой специальный символ может быть экранирован знаком процента, за которым следует шестнадцатеричное значение ASCII символа.) Важно: НЕ экранируйте символ &, который фактически разделяет параметры! Будьте осторожны, чтобы не перепутать escape-строки для текста HTML со строками для URL-адресов.
 В PHP вы не должны (и не должны) выполнять эти преобразования вручную. PHP содержит множество встроенных функций для синтаксического анализа, кодирования и декодирования HTML и URL. Просмотрите документацию PHP для получения дополнительной информации. 
 Пещера программирования 
 Есть два способа отправить данные непосредственно в программу CGI: GET и POST.
 
 Данные GET состоят из параметров, указанных в URL-адресе.HTML-формы отправляют данные таким образом, когда в форме указан метод «get».
 
 POST в основном означает любой метод отправки данных, который не является простым GET.
 
 Давайте взглянем на сценарий PHP, который извлекает данные GET и отображает результаты в виде HTML.
 


 src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">

 
 PHP Get: получение данных в PHP с помощью ассоциативного массива GET 
 «Получить» данные появляются в вашем PHP-скрипте в ассоциативном массиве с именем  $  GET  .
 
 Следующий сценарий показывает, как можно получить определенные параметры с помощью $ GET; мы также перебираем массив $ _GET и показываем все значения параметров.


  



 $ value) {
    echo $ key, '=>', $ value, "
 n";
}

// Показать конкретное значение.
$ id = $ _GET ['идентификатор'];

if ($ id) {
    echo '
 ID:', $ id, "
 n";
}
еще {
    echo '
 Нет параметра ID.
 ';
}

?>






 
 Если мы получим доступ к указанной выше странице по следующему URL-адресу (со скриптом, запущенным на localhost)
 http: //localhost/test.php? Id = до свидания и режим = запустить
 .... мы получаем следующий HTML-вывод.
id => до свидания
режим => запустить

ID: до свидания


 
 Отправка данных GET с помощью HTML-форм 
 Мы также можем вызвать приведенный выше сценарий, используя форму в HTML. Вот простая HTML-форма. Обратите внимание, что для формы "method" установлено значение "get".




















 
 Когда мы открываем эту форму в браузере, мы получаем текстовое поле и кнопку. Мы введем «привет» в текстовое поле и нажмем ОК:
 Наш PHP-скрипт теперь отображает следующее:
ввод => привет

Параметр ID отсутствует.
 Значение текстового поля формы (названное 'input') появилось в ассоциативном массиве $ _GET.
 Если вы хотите отправить много данных в форме или не хотите, чтобы данные формы отображались в URL-адресе, вам следует использовать POST вместо GET.
 PHP Post: получение данных POST с помощью PHP 
 Данные публикации отображаются в вашем PHP-скрипте в ассоциативном массиве $ _POST.
 В следующей HTML-форме я изменил метод get на post. Я также добавил скрытый элемент управления вводом с именем id.




















 
 Я изменил test.php, чтобы посмотреть на ассоциативный массив  $  POST   вместо  $ GET .

  



 $ value) {
    echo $ key, '=>', $ value, "
 n";
}

// Показать конкретное значение.$ id = $ _POST ['идентификатор'];

if ($ id) {
    echo '
 ID:', $ id, "
 n";
}
еще {
    echo '
 Без параметра ID 
';
}

?>






 
 Введите  одуванчик  в HTML-форму и нажмите ОК.
 Новый сценарий PHP отображает следующее:
id => 1234
input => одуванчик

ID: 1234


 
 HTML-форма с текстом типа ввода, паролем, радио, флажком, раскрывающимся списком выбора, кнопкой 
  HTML-формы  используются для  отправки данных  через Интернет и часто используются в качестве контактной формы   для преобразования введенной пользователем информации в потенциальных клиентов. HTML-формы  используются для передачи данных на сервер.
 Элементы, используемые в  HTML-форме :  тег формы  как родительский,  input ,  textarea, ,  select ,  button  и  label .
 Элементы HTML-формы 
 Тег HTML-формы
 Тег ввода
 Пароль типа ввода
 Файл входного типа
 Кнопки радио
 Флажок
 Выбрать раскрывающийся список
 Textarea
 Кнопка
 Fieldset
 Тег HTML-формы 
  Тег формы  определяет форму  , и в этом теге есть атрибут действия  , который сообщает форме, куда будет отправлено ее содержимое при отправке.
 HTML-форма   может иметь  элементов ввода ,  флажок ,  переключатели ,  кнопка отправки  и др. Форма также может содержать  раскрывающийся список выбора ,  текстовое поле ,  набор полей ,  легенда  , а  обозначают  элементов.
 Создать HTML-форму 
  Форма  построена внутри тега
.См. Код ниже
 

/* Содержание */

  
 Атрибуты формы 
 Атрибуты HTML-формы
 Атрибут
 Значения
 Использовать
 метод
 получить или отправить
 http get метод отправить данные формы, но отображается в url.Сообщение 
 содержит данные в теле. более безопасен, так как данные не видны пользователю по URL-адресу
 действие
 путь
 бэкэнд-файл, собирающий данные формы
 наименование
 любое имя
 наименование формы контроля
 Элемент ввода 
 Самым важным элементом формы является элемент ввода  .Элемент ввода   используется для получения информации о пользователе. Элемент ввода может иметь тип  текст ,  пароль , флажок  , переключатель  ,  кнопку отправки  и другие.
 Атрибуты в элементе ввода 
 Тип
 Имя атрибута
 значений
 Использовать
 тип
 текст, пароль, файл, радио, флажок, кнопка, отправить и сбросить
 определяет тип  входа  управления.
 размер
 значение по умолчанию - 20
 изменить размер элемента управления вводом
 tabindex
 любое числовое значение
 используется для определения последовательности, которой следует пользователь при навигации с помощью вкладки   клавиши
 значение
 любое возможное значение
 установить значение по умолчанию для управления вводом
 макс. Длина
 n цифр
 установить максимальное количество символов
 отключен
 отключенный элемент управления вводом или тег fieldset
 проверено
 Установите флажок или переключатель
 кратно
 Используется в файле типа ввода для загрузки нескольких файлов
 Текст типа ввода 
  Текст типа ввода   - это общий элемент ввода   для имени, фамилии, страны, чисел и символов.Тип ввода по умолчанию - текст. Даже если мы пропустим атрибут типа в элементе ввода, тип ввода по умолчанию - текст. Но все равно  рекомендуется определять атрибут типа в элементе ввода .
 Этикетка 
  Ярлык  используется для записи содержимого непосредственно перед текстовым полем. Чтобы указать конкретную метку, поместите ввод внутри метки или
значение атрибута for внутри метки должно соответствовать идентификатору элемента управления вводом.
 Ввод в этикетке 
 
 Имя:  

  
 Вход за пределами метки 
 
 Фамилия: 

 

  
 Тип ввода текста со значением 
 Атрибут значения
   также может использоваться внутри ввода или текстового поля.Обычно мы просим пользователя заполнить значения, но если значение фиксировано, используйте атрибут значения.
 
<форма>
     Имя: 
    

     Фамилия: 
    

  
 Максимальная длина 
  maxlength  атрибут используется для ограничения количества символов в текстовом поле. maxlength Значение  - это число. Атрибут Maxlength полезен для проверки формы.
 Вход с максимальной длиной 
 
<форма>
 Имя: 


 Возраст: 


  
 Тип ввода Пароль 
 Пароль типа ввода   используется для записи паролей.Значение пароля записывается в зашифрованной форме  . т.е.  пользователь не может видеть, копировать или вырезать данные пароля из пароля типа ввода .
 
<форма>
     Пароль: 
    


  
 Тип ввода Файл 
  Файл типа ввода  позволяет пользователю выбирать файл из своей системы.Это можно использовать для  загрузить изображение , загрузить резюме, загрузить видео или аудио и т. Д.
 Значение по умолчанию для файла типа ввода - «Файл не выбран». После загрузки файла имя файла заменяет этот текст, за которым следует расширение.
 
<форма>
     Резюме: 
    

  
 Файл входного типа с несколькими 
 
<форма>
     Резюме: 
    

  
 Радиокнопки 
  Радиокнопки  используются для выбора одного элемента   среди группы.
 Чтобы позволить окну выбирать один радиомодуль, используйте  атрибут имени  с  одинаковым значением  на обоих радиовходах.
 Радиокнопка для выбора пола 
 Радиокнопка для нескольких вопросов 
 Флажок 
  Флажок  используется для выбора нескольких вариантов, в отличие от переключателя.Их можно отмечать и снимать. Мы можем использовать флажок для хобби, интересов, условий и т. Д.
 Флажок формы 
 
 : велосипед 
 : Автомобиль 
  
 Чекбокс с отключенным 
 Checbox также может иметь  отключенный атрибут .Флажок  отключен  не может быть отмечен, означает, что установленный флажок останется установленным, а снятый флажок останется снятым. См. Пример
.
 Флажок с отметкой 
 Состояние флажка по умолчанию не отмечено. Но мы можем изменить состояние по умолчанию на  проверено , используя  проверенный атрибут  в флажке типа ввода. См. Пример
 Выбрать раскрывающийся список 
  выберите  или  раскрывающийся список выбора  используется для выбора одного или нескольких вариантов в раскрывающемся списке. Выбор  параметров являются фиксированными, поэтому используемый может выбрать только данный вариант или параметры. Для выбора города, страны, даты, месяца, года и т. Д. Используется  Select Dropdown .
 Выберите пример раскрывающегося списка 
 Текущий город проживания:
--Выберите город - Нью-Йорк, Чикаго, Лос-Анджелес, Вашингтон, округ Колумбия,
 
    <выбор>
        <опция выбрана отключена> - Выбрать город - 
         Нью-Йорк 
         Чикаго 
         Лос-Анджелес 
         Вашингтон, округ Колумбия 
    
  
 Выбор с помощью Optgroup 
  Элемент Optgroup  используется для группировки нескольких опций в раскрывающемся списке выбора.Имя optgroup устанавливается с помощью атрибута  label  в optgroup.
 Текущий город проживания:
--Выберите город - Нью-ДелиКолкатаМумбаиЧеннаиНоидаГурграмФаридабадГазиабад
 
<выбор>
    <опция выбрана отключена> - Выбрать город - 
    
         Нью-Дели 
         Калькутта 
         Мумбаи 
         Ченнаи 
    
    
         Нойда 
         Gurgram 
         Фаридабад 
         Газиабад 
    

  
 Несколько атрибутов в выборе 
  Несколько атрибутов  используется в раскрывающемся списке выбора, чтобы выбрать более одного варианта с помощью клавиши  Ctrl  или  Cmd .
 Выберите несколько городов:
--Выберите город - Нью-ДелиКолкатаМумбаиЧеннаиНоидаГурграмФаридабадГазиабад  Нажмите  Ctrl  или  Cmd  для множественного выбора. 
 
<выбрать несколько>
    <опция выбрана отключена> - Выбрать город - 
    
         Нью-Дели 
         Калькутта 
         Мумбаи 
         Ченнаи 
    
    
         Нойда 
         Gurgram 
         Фаридабад 
         Газиабад 
    


  
 Выберите дату рождения в раскрывающемся списке 
 --Выберите месяц - JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC - Выберите дату - 12345678
121314151617181
22232425262728293031
 Текстовое поле 
  Textarea  используется для записи нескольких строк.Например, сообщение, запрос, адрес, комментарии, отзывы и т. Д. Textarea может иметь атрибуты  row  и  col . Строки по умолчанию - 2, а столбцы по умолчанию - 20.
 Пример Textarea 
 
     
    
     
    
     

  
 Кнопка отправки 
  Кнопка отправки  или  тип ввода submit  используется для отправки информации от пользователя на веб-сервер.Кнопка «Отправить» может использоваться только один раз в теге формы.
 Пример кнопки отправки 
 
    
  
 Кнопка сброса 
  Кнопка сброса  или  сброс типа ввода  используется для перезагрузки данных формы без обновления веб-страницы. Сброс также используется один раз в теге формы.
 Создать кнопку сброса 
 
    
  
 Тег кнопки 
  Тег кнопки  или  Кнопка  может создавать кнопки, подобные кнопке типа ввода.Тег кнопки - это парный элемент. Мы можем использовать изображение, значок или дочерний элемент внутри тега кнопки.
 Тип кнопок 
 Кнопка,   Кнопка  .
 Кнопка сброса,   Кнопка  .
 Кнопка "Отправить",   Кнопка  .
 Пример тега кнопки 
 Кнопка 1
Кнопка 2
Сброс настроек
Представлять на рассмотрение
 
     Кнопка 
  
 Полевой набор 
 Форма или элементы управления формой также могут быть помещены в тег  fieldset . Тег Fieldset  используется для группировки форм или нескольких элементов управления вводом.  Fieldset  групповые элементы управления формы в области с рамкой. Мы также можем использовать тег легенды   внутри набора полей.
 Основные функции  Fieldset : , чтобы отключить несколько элементов управления формой .
 Fieldset с легендой 
 Форма запроса
 

    
 Форма запроса 
        

             Имя:  
            
             

  
 Fieldset с отключенным 
 Fieldset также поддерживает атрибут  disabled .При добавлении атрибута disables все элементы управления формы, включая кнопку отправки, отключаются. Таким образом, пользователь не может заполнить и отправить данные формы.
 Форма запроса
 
<набор полей отключен>
    
 Форма запроса 
        

             Имя: