каким образом можно скрыть текстовое поле html
Каким образом можно скрыть текстовое поле html
Это поле, которое позволяет выбрать цвет.
Пример
Атрибут value используют для установки исходного цвета, его можно не указывать.
Поле ввода даты
Поле типа date позволяет ввести дату с помощью календаря.
Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.
Пример
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step=»any».
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Блокирование элементов форм
У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).
Блокирование
Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. К тому же такие поля не отправляются на сервер.
Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.
На рис. 1 представлены разные элементы форм в заблокированном состоянии.
Рис. 1. Вид заблокированных элементов в Chrome
Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 1 показано применение скриптов для изменения блокировки кнопки.
Пример 1. Блокирования поля
HTML5 IE Cr Op Sa Fx
Результат данного примера в Safari показан ниже (рис. 2).
Рис. 2. Заблокированное текстовое поле
В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».
Поле только для чтения
Поля формы можно не только блокировать, но и переводить их в режим только для чтения. В этом случае доступ к ним сохраняется, но изменять значения заданные по умолчанию нельзя. Разумеется, речь идёт только о полях, где требуется вводить текст. Выделять и копировать текст можно, но изменить не получится.
В примере 2 показано создание поля для чтения.
Скрыть поле ввода (оставить только кнопку)
HTML!? Есть поле ввода Type text, после ввода текста и нажатия entrer теряется фокус, как его оставить в этом же поле?
HTML!? Есть поле ввода Type text, после ввода текста и нажатия entrer теряется фокус, как его.
Показать/скрыть текстовое поле при нажатии на кнопку
Как Показать/скрыть текстовое поле при нажатии на кнопку? При загрузки страницы текстовое поле.
Как скрыть форму и оставить ее только в процессах?
Здравствуйте, я пишу некую прогу.Вообщем я хочу чтобы при запуске и её работе программа.
Как скрыть кнопку программы из TaskBar, но оставить программу в списке приложений Диспетчера задач?
1. Как в Delphi7 под WindowsXP скрыть кнопку программы из TaskBar, но оставить программу в списке.
Скрыть главное меню в акаунте и оставить только пользовательское
Здравствуйте,у меня такая проблема Есть сайт,на сайте Главное меню и меню пользователя,и у меня.
Как оставить поле ввода заполненным?
Пусть есть простенькая программка: пишем что-нибудь в поле ввода, нажимаем на кнопку, и ниже.
У окна Inputbox оставить только одну кнопку OK
подскажите, пожалуйста, как у окна Inputbox оставить только одну кнопку OK (соответственно.
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Каким образом можно скрыть текстовое поле html
3.1 PHP и поля HTML-форм
Использование элемента дизайна форма при разработке Web-сайта является наиболее популярным способом организации интерактивного взаимодействия с его посетителями. С помощью языка HTML можно создавать как простые, так и сложные формы, предполагающие множественный выбор из нескольких вариантов. Формы состоят из одного или несколько полей, в которые пользователь может ввести различную информацию, либо выбрать какую-то опцию. После ввода информации, она передается на сервер, где может обрабатываться различными средствами, в том числе, с помощью языка PHP.
3.1.1 Текстовые поля
Ниже представлен пример обработки информации из текстового поля. В данном примере присутствует HTML-форма для ввода имени любимого автора. Программа считывает введенную информацию и осуществляет вывод ее на экран.
HTML-код формы для ввода информации представлен ниже.
Пример использования текстового поля
Реализация данного кода представлена на рисунке 3.1
Таким образом, как видно на рисунке 3.1, в данном примере, при загрузке Web-страницы, на экране появляется однострочное текстовое поле, в которое пользователю необходимо ввести информацию и нажать кнопку “Отправить”. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл text.php.
Код файла-обработчика представлен ниже.
Реализация данного кода представлена на рисунке 3.2.
Как видно на рисунке 3.2, на экран выводится информация о любимом авторе, то есть “Alexandr Pushkin”. Программа обработки введенных данных text.php, состоит из одной строки РНР-кода: “$_GET [‘Author’]”, которая отображает содержимое переменной “$Author”. Данная переменная не генерируется в РНР-коде, а автоматически создается, как часть массива “$_GET”, при передаче данных на сервер. При этом “GET” обозначает метод протокола HTTP, с помощью которого передаются данные.
В HTML-файле было создано текстовое поле с именем “Author”. Когда данные из формы передаются Web-серверу, создается массив “$_GET” с элементом “Author”. Также на рисунке 3.2, в строке окна браузера представлен результат запроса, в котором на сервер передается пара “переменная”=“значение”. В данном примере переменной “Author” присваивается значение “Alexandr Pushkin”, то есть на сервер передается пара “Author=Alexandr+Pushkin” и эта строка видна пользователю Web-страницы. Эта строка запроса вверху страницы выглядит следующим образом: “?Author=Alexandr+Pushkin”, так как используется метод GET. Использование метода GET вынуждает браузер отправлять информацию из формы в виде строки запроса, а не скрывать ее в теле HTTP-запроса [4].
Также необходимо отметить, что имена переменных в языке РНР чувствительны к регистру символов. Так переменные “Author” и “author” являются двумя разными переменными. Если, в представленном выше примере вместо переменной “$Author” написать “$author”, то содержимое данной переменной на сервер передаваться не будет и на экране не выведется (рисунок 3.3).
3.1.2 Текстовая область
Текстовые области предназначены для того, чтобы принимать от пользователя предложения и даже целые строки. Для того чтобы создать текстовую область, следует использовать HTML-тег
Ниже представлен пример использования текстовой области для ввода информации о любимых Web-сайтах пользователя.
HTML-код формы для ввода информации представлен ниже.
Пример использования текстовой области
Результат работы данного кода представлен на рисунке 3.4.
Таким образом, как видно на рисунке 3.4, в данном примере, при загрузке Web-страницы на экране появляется текстовая область, в которую пользователю необходимо ввести информацию и нажать кнопку “Отправить”. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл textarea.php.
Код файла-обработчика представлен ниже.
Результат работы данного кода представлен на рисунке 3.5.
Как видно на рисунке 3.5, на сервер передается информация о любимых Web-сайтах пользователя. В данном случае строка запроса не присоединяется, так как в программе был использован метод POST. Использование этого метода необходимо для того, чтобы скрыть информацию из формы при передаче на сервер [4].
Ниже приведен пример работы с флажками для проверки, является ли пользователь студентом Оренбургского государтсвенного университета.
HTML-код формы для ввода информации представлен ниже.
Пример использования флажка
Реализация данного кода представлена на рисунке 3.6
Таким образом, как видно на рисунке 3.6, в данном примере, при загрузке Web-страницы на экране появляется флажок, который пользователю необходимо отметить и нажать кнопку “Отправить”. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл checkbox.php.
Код файла-обработчика представлен ниже.
Реализация данного кода представлена на рисунке 3.7.
При использовании нескольких флажков, каждый из них является отдельным элементом. Можно выбрать один или несколько флажков, или вообще не выбрать ни одного. При этом если пользователем будут выбраны все флажки, на экран выведется содержимое всех выбранных флажков. Для этого у каждого флажка устанавливается свое значение.
Ниже приведен пример работы с несколькими флажками для выбора языков программирования, которыми владеет пользователь.
HTML-код формы для ввода информации представлен ниже.
Выберите язык, на котором Вы программируете:
Результат работы данного кода представлен на рисунке 3.8.
Таким образом, как видно на рисунке 3.8, в данном примере, при загрузке Web-страницы появляются флажки, которые пользователю необходимо отметить и нажать кнопку “Отправить”. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл checkboxes.php.
Код файла-обработчика представлен ниже.
Результат работы данного примера представлен на рисунке 3.9.
Как видно на рисунке 3.9, пользователем был выбран только один флажок и на экран выведено содержимое переменной, равное “C++/C#”. Содержимое остальных переменных выведено не было, так как пользователь не установил другие флажки. Таким образом, в соответствующие PHP-переменные данные передаваться не будут.
Переключатели в HTML-формах используются в тех случаях, когда имеется набор возможных ответов, но выбрать можно только один из них. В отличие от флажков, для связи переключателей друг с другом необходимо задать всем переключателям одной группы одинаковое имя.
Ниже приведен пример использования переключателей для выбора названия столицы России.
HTML-код формы для ввода информации представлен ниже.
Пример использования переключателей
Результат работы данного кода представлен на рисунке 3.10.
Таким образом, как видно на рисунке 3.10, в данном примере, при загрузке Web-страницы на экране появляются переключатели, из которых пользователю необходимо отметить только один и нажать кнопку “Отправить”. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл radio.php.
Код файла-обработчика представлен ниже.
Реализация данного кода представлена на рисунке 3.11.
Как видно на рисунке 3.11, на экран выводится значение переменной “$Question”, равное “Москва”. Необходимо отметить, что в коде файла radio.html создается три переключателя, имеющих одинаковое имя, но разные значения. Однако при обработке данных с помощью сценария отображается содержимое только одной переменной, так как может быть только один правильный ответ. В этом заключается основное отличие использования переключателей от флажков [4].
Списки или выпадающие списки представляют собой элементы управления формами, которые обычно отображают несколько объектов. Иногда они имеют стрелку, которая позволяет пользователю перемещаться вниз к дополнительным объектам. В языке HTML списки создаются с помощью тегов
Ниже представлен пример использования списков, в котором программа получает от пользователя информацию о желаемой бытовой технике и фирме-производителе. Первый список допускает выбор только одного типа бытовой техники. Во втором допускается множественный выбор фирмы-производителя.
HTML-код формы для выбора информации представлен ниже.
Пример использования списков
Результат работы данного кода представлен на рисунке 3.12.
Таким образом, как видно на рисунке 3.12, в данном примере, при запуске Web-страницы на экране появляются два списка, в которых необходимо выбрать информацию и нажать кнопку “Отправить”. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл listbox.php.
Код файла-обработчика представлен ниже.
Результат работы данного примера представлен на рисунке 3.13.
Как видно на рисунке 3.13, на экран выводятся результаты выбора пользователя. В данном случае он выбрал технику утюг и фирму производителя “LG” и “Samsung”. То есть, при выборе бытовой техники перемененной “$Tech” присвоилось значение “Утюг”. В сценарии listbox.php атрибут “name” связан с PHP-переменной “$_POST [‘Tech’]”.
При выборе фирмы-производителя атрибуту “name” было присвоено значение “$Production[]”, где квадратные скобки интерпретируют соответствующую переменную как массив. Список содержит четыре пункта, поэтому в массиве будет четыре элемента. Содержимое каждого из них необходимо отобразить.
При работе с массивами в языке PHP индекс массива ссылается на элемент, а нумерация элементов начинается с нуля. Тогда переменная “$Production[0]” будет ссылаться на первый пункт в списке, то есть LG, а переменная “$Production[1]” на второй пункт в списке, то есть Samsung. Элементы “$Production[2]” и “$Production[3]” не содержат ничего, так как пользователь выбрал только два первых пункта списка [4].
3.1.6 Скрытые поля форм
При работе с формами может возникать необходимость получения информации, содержащейся на одной Web-странице и передачи ее другой Web-странице, без какого-либо ввода данных пользователем. В теге для этого существует еще один параметр, который позволяет передавать информацию в поле, как если бы оно было текстовым, скрывая, при этом, сам элемент управления и его значение от пользователя. Такое поле называется скрытым полем формы (или скрытым элементом управления) [4].
Действие скрытых полей несколько отличается от действия уже рассмотренных элементов управления. Их можно использовать для отправки информации, хранящейся в РНР-переменных.
Чтобы использовать скрытое поле в PHP-странице, можно написать всю HTML-форму в операторах echo, передающих содержимое PHP-переменных через HTML-теги [4].
Ниже представлен пример использования скрытых полей форм для чтения содержимого списка и отображения пользовательского выбора на следующей странице.
HTML-код формы для выбора информации представлен ниже.
Результат работы данного кода представлен на рисунке 3.14.
Таким образом, как видно на рисунке 3.14, в данном примере, при загрузке Web-страницы на экране появляется список, в котором пользователю необходимо выбрать информацию. При этом форма, отправляющая скрытые поля, содержит элементы данного списка в переменных “$Hidden1”, “$Hidden2”, “$Hidden3”, содержащих текст “Иванов”, “Петров”, “Сидоров” соответственно. После нажатия кнопки “Отправить”, подключается обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл hidden.php.
Код файла-обработчика представлен ниже.
Результат работы данного примера представлен на рисунке 3.15.
Как видно на рисунке 3.15, на экран выводятся исходные три варианта для выбора (“Иванов”, “Петров”, “Сидоров”), а затем выводится выбор пользователя. В данном случае это “Сидоров”.
Главная особенность использования этого способа заключается в том, что можно опустить апострофы в именах переменных массива. Для формирования списка создается три переменных. Затем с помощью echo-операторов создается форма. Она ничем не отличается от обычной HTML-формы, за исключением того, что там, где нужны кавычки, следует писать не двойные, а одинарные кавычки, иначе echo-оператор будет работать неправильно.
Вторая PHP-страница отображает содержимое элементов управления, созданных на первой странице. Сначала выводится содержимое трех скрытых полей формы. Это полезно, потому что обычно содержимое всего списка не передается. Последние строки отображают выбранный пользователем пункт.
3.1.7 Поля ввода паролей
Поля ввода паролей, по сути, представляют собой текстовые поля, в которых вводимые символы заменяются звездочками. Они хранят и передают информацию так же, как и текстовые поля.
Обработка полей ввода паролей и текстовых полей ничем не отличается. Следует, однако, отметить, что если для передачи данных из поля такого типа использовать метод GET, то пароль в строке запроса не шифруется и будет видимым. Это не означает, что метод POST является безопасным методом передачи данных. Речь идет только о том, что информация при передаче методом POST непосредственно не показывается пользователю. Чтобы действительно обеспечить безопасность передаваемых данных, необходимо применять какой-либо специальный протокол для реального шифрования данных.
3.1.8 Кнопки submit и reset
Кнопка типа Submit используется для передачи данных пользователя на сервер.
Кнопка инициирует отправку данных пользователя из формы на сервер. При нажатии на кнопку “submit”, данные будут передаваться на обработчик, указанный в атрибуте “action” тега “form”. При этом в массиве “$_GET” или “$_POST” будет создана переменная “submit”.
Кнопка типа Reset устанавливает все элементы управления на форме в их первоначальное состояние.
Выбор кнопки “reset ” вернет значение полей в исходное состояние. На практике элементы Submit и Reset используются вместе. При создании сложных форм всегда должна присутствовать кнопка, позволяющая отправить данные из полей формы, и всегда должна быть кнопка очистки содержимого полей.
3.1.9 Использование значений, возвращаемых формами, в PHP-сценариях
Выше были рассмотрены все разновидности элементов управления формами и примеры передачи на сервер их содержимого средствами языка РНР. Однако, приводимые до сих пор примеры лишь выводят содержимое элементов управления на другой Web-странице, при этом, не проверяя вводимую информацию на корректность.
Далее представлен пример совместного использования элементов управления формами и основных операторов языка PHP, для создания и обработки формы заявки на получение кредита в банке. Пример состоит из двух Web-страниц. На первой странице генерируется форма для ввода информации пользователя по получению кредита. Вторая страница принимает переданные значения и выполняет некоторые простые операции над ними, чтобы принять или отклонить заявку на кредит [4].
В данном примере у пользователя запрашивается размер денежной суммы, которую он желает взять в кредит, возраст и размер текущей заработной платы. После этого приложение вычисляет сумму, которую банк может предложить заявителю, на основании данных о возрасте и заработной плате. В конце расчетов выдается либо положительный ответ, в случае, если банк может выдать кредит, либо отрицательный, в обратном случае.
HTML-код формы для ввода информации представлен ниже.
Заявка на получение кредита
Заявка на получение кредита в Alphabank.
Реализация данного кода представлена на рисунке 3.16.
Таким образом, как видно на рисунке 3.16, в данном примере, при загрузке Web-страницы на экране появляется форма для ввода информации, в которую пользователю необходимо ввести свои данные и нажать кнопку “Подать заявку”, чтобы отправить данные, либо кнопку “Очистить”, для сброса данных. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл loan.php.
Код файла-обработчика представлен ниже.
Заявка на получение кредита
Заявка на получение кредита в Alphabank
Реализация данного кода представлена на рисунке 3.17.
При этом при передаче информации на сервер был использован метод POST, так как этот метод скрывает конфиденциальную информацию от пользователей.
3.1.10 Проверка обязательных полей
При обработке данных из форм, пользователи Web-сайта могут вводить в HTML-формы любые данные или не вводить их вовсе, независимо от того, как хорошо сделана форма и что сценарий ожидает получить от пользователя. Главная защита от таких проблем это проверка информации из форм, как на клиентской, так и на серверной стороне. В языке PHP, работающем на стороне сервера, для этого используется стандартный условный оператор [4].
При обработке данных пользователя из форм, при появлении ошибок бывает необходимо прервать обработку данных. Для этого можно использовать любой метод для окончания обработки, но существует более жесткий оператор языка PHP, который останавливает всю работу программы. Это оператор exit. После того, как интерпретатор языка PHP встречает оператор exit, ни HTML-код, ни PHP-код больше не обрабатываются и выполнение скрипта прерывается.
Ниже приведен пример обработки заявок на получение кредита, выполненный более устойчивым по отношению к пользова¬тельским ошибкам, за счет внедрения проверки HTML-формы.
HTML-код формы для ввода информации представлен ниже.
Заявка на получение кредита
Заявка на получение кредита в Alphabank.
Реализация данного кода представлена на рисунке 3.18.
Таким образом, как видно на рисунке 3.18, в данном примере, при загрузке Web-страницы на экране появляется форма для ввода информации, в которую пользователю необходимо ввести свои данные. Затем нужно нажать кнопку “Подать заявку”, чтобы отправить данные, либо “Очистить” для сброса данных. После этого подключится обработчик, указанный в атрибуте “action” тега “form”. В данном примере это файл loan.php.
Код файла-обработчика представлен ниже.
Как видно на рисунке 3.19, на экран выводится одно из сообщений об ошибке, так как пользователь не заполнил некоторые поля формы. В данном случае в программе проверяется существование заданной переменной с помощью встроенной функции isset. Также в программе проверяется, не ввел ли пользователь очевидно неверную информацию. Если необходимое условие не соблюдается, то сценарий отображает сообщение об ошибке и завершает работу [4].
3.2 Использование стандартных операторов языка PHP при обработке данных пользователя из форм
3.2.1 Использование булевых операторов и оператора IF
Оператор if, при работе с формами, используется для проверки на правильность введенной информации пользователя. При этом если пользователь случайно сделает ошибку или введет некорректные данные, то программа осуществляет проверку и выводит соответствующее сообщение.
Ниже приведен пример сценария, в котором осуществляется деление двух чисел между собой. При этом необходимо осуществить проверку, чтобы не произошло деление на нуль. То есть, чтобы второе число не было равно нулю. Если осуществится деление на нуль, то сгенерируется ошибка.
HTML-код программы проверки деления чисел представлен ниже.
Пример использования оператора if
Деление любого числа (кроме нуля)
Пример реализации данного кода приведен на рисунках 3.20 и 3.21.
Таким образом, как видно на рисунке 3.20, в данном примере, при загрузке Web-страницы на экране появляется форма для ввода чисел, которые требуется поделить между собой. Затем необходимо нажать кнопку “Разделить”.
В примере, отображенном на рисунке 3.20, пользователь ввел корректные данные, программа выполнила вычисления и вывела результат на экран. При этом пользователю не было выведено никаких сообщений.
На рисунке 3.21 приведен пример обработки некорректных данных. На экран выводится сообщение пользователю “На нуль делить нельзя”, так как в данном примере пользователь ввел нуль в качестве второго значения.
Одна из возможностей уменьшить вероятность возникновения такой ошибки заключается в задании в HTML-коде значений по умолчанию для полей первого и второго чисел, равным не нулю, а единице [4].
3.2.2 Использование операторов сравнения
3.2.2.1 Операторы “>” и “
Пример использования операторов сравнения
$number)
<
echo » Baшe число слишком большое. «;
echo «
Загаданное число:
$number. Вы проиграли. Попробуйте еще раз. «;
>
else if ($_POST[‘guess’] Baшe число слишком маленькое. «;
echo «Загаданное число:
$number. Вы проиграли. Попробуйте еще раз. «;
>
else
<
echo »
Загаданное число:
$number. Вы выиграли! «;>
>
?>
На рисунке 3.22 представлен результат выполнения данного кода.
Таким образом, как видно на рисунке 3.22, в данном примере при загрузке Web-страницы появляется поле формы, в которую пользователь должен ввести число. После этого, с помощью операторов сравнения, осуществляется проверка соответствия введенного и загаданного числа. Как видно на рисунке, загаданное число было равно восьми, а число пользователя четырем, то есть число пользователя слишком маленькое. О чем было выведено соответствующее сообщение.
При работе с формами в языке PHP, помимо операторов сравнения, также часто используют операторы неравенства для проверки введенной пользователем информации. Ниже приведен пример использования этих операторов для проверки информации о столице России [4].
HTML-код программы проверки введенных данных представлен ниже.
На рисунке 3.23 представлен результат работы данного кода.
Таким образом, как видно на рисунке 3.23, в данном примере, при загрузке Web-страницы появляется форма, в которой пользователю необходимо выбрать один из трех вариантов ответа и нажать кнопку “Отправить ответ”. После этого введенный ответ сравнивается с правильным, и выводится соответствующее сообщение. В данном случае пользователю выводится сообщение “Верно, Москва – правильный ответ”, что означает, что он правильно выбрал вариант ответа.
3.2.3 Логические операторы
При обработке данных пользователя из форм на стороне сервера также используются логические операторы. К ним относятся такие операторы как операторы логического “И” (and), логического “ИЛИ” (or), логического исключающего “ИЛИ” (xor), а также операторы логического “НЕ”(!).
Ниже приведен пример использования логических операторов для проверки информации о возрасте и наличии водительских прав пользователя для того, чтобы определить, можно ли доверить ему автомобиль напрокат [4].
HTML-код программы проверки информации пользователя представлен ниже.
Результат работы данного кода представлен на рисунках 3.24 и 3.25.
Чтобы собрать дополнительную информацию, используется более сложная по сравнению с уже рассмотренными HTML-форма. В коде используется оператор else, позволяющий отображать форму, только если она не была отправлена пользователем, потому что как только пользователь отправил заявку, нет необходимости отображать форму снова.
3.2.4 Оператор SWITCH
Наряду с другими операторами цикла, в языке PHP также используется оператор switch для проверки данных пользователя из форм.
Ниже представлен пример использования оператора switch для обработки заказа путевок в Турцию. В зависимости от того, какой был выбран город и какого класса отель, рассчитывается стоимость путевки пользователя.
HTML-код программы расчета стоимости путевок представлен ниже.
Пример использования оператора switch
Заказ путевок в отели Турции.
Реализация данного кода представлена на рисунке 3.26.
Таким образом, как видно на рисунке 3.26, в данном примере, при загрузке Web-страницы на экране появляется форма заказа путевки, в которой пользователю необходимо указать город, в котором он хотел бы провести отпуск, а также класс отеля. При нажатии на кнопку “Отправить заказ”, рассчитывается стоимость путевки, в зависимости от выбора пользователя. После этого стоимость путевки выводится на экран [4].
При этом обрабатываются все возможные варианты. Три варианта городов, умноженные на три класса отеля. К таким вариантам относятся: город Алания и трехзвездочный, четырехзвездочный и пятизвездочный отели. Также, город Кемер и трехзвездочный, четырехзвездый и пятизвездочный отели. И, наконец: город Анталия и трехзвездочный, четырехзвездочный, пятизвездочный отели.
3.2.5 Использование циклов при обработке данных пользователя из форм
Оператор while является одним из популярных операторов цикла, используемым при обработке данных пользователя из форм в языке PHP.
Ниже представлен пример обработки заявки на получение кредита в банке Alphabank. При этом пользователю предлагается выбрать сумму кредита, а также ввести сумму, которую он планирует вносить ежемесячно в счет погашения кредита. После этого в программе рассчитывается период, в течение которого пользователь сможет погасить выбранный кредит [4].
HTML-код программы расчета срока погашения кредита представлен ниже.
Реализация данного кода представлена на рисунке 3.27.
Таким образом, как видно на рисунке 3.27, в данном примере, при загрузке Web-страницы на экране появляется форма для расчета периода выплаты кредита. В данной форме пользователю необходимо выбрать сумму кредита, а также ввести предполагаемую сумму ежемесячного платежа. После этого нажать кнопку “Подать заявку”. После обработки заявки на экран выведется сообщение, в котором пользователь сможет узнать, сколько ему месяцев необходимо будет выплачивать кредит.
При этом необходимо отметить, что если пользователь введет слишком маленькую сумму ежемесячного платежа, ему выводится соответствующее сообщение “Чтобы погасить кредит, требуются более крупные ежемесячные платежи”. Так как, при этом условии цикл будет продолжаться бесконечно долго, потому что условие “сумма кредита” больше нуля всегда будет верным [4].
Поэтому, если создается условие для бесконечного цикла, следует выйти из цикла с помощью команды exit, предварительно отправив пользователю соответствующее сообщение (рисунок 3.28).
Таким образом, если ли в программе возникает бесконечный цикл, браузер может, в конце концов, зависнуть, а если не предпринимать определенных мер, то зависнет и Web-сервер. Это означает, что необходимо позаботиться о том, чтобы бесконечные циклы не возникали [4].
3.2.5.2 Цикл DO WHILE
Оператор do while работает аналогично while, за исключением того, что условие проверяется в конце цикла, а не в начале. В этом заключается важное отличие оператора do while: код в фигурных скобках выполняется, по крайней мере, один раз, даже если условие ложно.
Ниже представлен пример использования оператора do while для проверки вводимого числа пользователя на предмет того, является ли оно простым. При этом простым является число, которое делится без остатка только на себя и на единицу [4].
HTML-код программы проверки вводимого числа представлен ниже.
Пример использования цикла do while
Введенное число не является простым. «;>
else < echo " Введенное число является простым. HR>«;> >
?>
Реализация данного кода представлена на рисунке 3.29.
Таким образом, как видно на рисунке 3.29, в данном примере, при загрузке Web-страницы, на экране появляется форма для ввода числа пользователя. После нажатия кнопки “Проверить число” программа проверяет, является ли это чело простым и выводит соответствующее сообщение. В данном примере пользователь ввел число четыре, которое не является простым, о чем пользователю было выведено соответствующее сообщение.
Оператор for также используется в языке PHP для обработки данных пользователя из форм.
Далее представлен пример использования цикла for для динамического ввода имен детей пользователей, в зависимоти от того, сколько у него детей. В программе создается динамическая форма, которая принимает от пользователя некоторое число, использует это число для установки количества элементов управления, отображаемых на второй странице, а затем на третьей странице отображает содержимое этих элементов управления.
HTML-код программы для ввода информации о детях пользователя представлен ниже.
Результат работы данного примера представлен на рисунках 3.30, 3.31, 3.32.
Таким образом, как видно на рисунке 3.30, в данном примере при загрузке Web-страницы появляется форма, в которую пользователю требуется ввести число детей. После нажатия кнопки “Отправить число” данное число передается сценарию. Программа, таким образом, сообщает браузеру, что необходимо создать форму, состоящую из того количества полей, которые указал пользователь.
После этого на экране отображается несколько текстовых полей, количество которых соответствует значению, указанному пользователем. В каждое из этих полей пользователю необходимо ввести имя очередного ребенка и нажать кнопку “Далее” (рисунок 3.31). Однако если у пользователя нет детей, то отображаться текстовые поля не будут. В результате программа выводит имена детей на экран (рисунок 3.32).
Таким образом, циклы в языке PHP являются мощным средством для обработки данных из форм. Так, если в данном примере пользователь ввел бы большое число детей, то без использования циклов в программе пришлось бы использовать большое количество строк для считывания и большое количество строк для вывода имен детей на экран.