Софт-Архив

Html Hidden img-1

Html Hidden

Рейтинг: 4.2/5.0 (1821 проголосовавших)

Категория: Windows: Расширения

Описание

Visibility: visible ( hidden )

visibility: visible ( hidden ) | Как сделать HTML элемент невидимым | CSS Чем отличаются visibility: hidden; от display: none; и opacity: 0;

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

С opacity: 0; элемент полностью прозрачен. Дочерние теги, как и сам родитель, доступны, они, например, могут получать фокус.

С transform: scale(0, 0); элемент полностью сужен, а значит и недоступен. Он продолжает занимать то же пространство, что и при transform: scale(1, 1);.

С height: 0; коробка блока равна сумме margin + padding + border [см. боксовая модель HTML ]. Если они не заданы, у блока останется его блочность, иначе говоря, строчные элементы, следующие после него, будут писаться с новой строки. Содержимое тега доступно, но, поскольку блок не имеет высоты, на него наезжают нижестоящие элементы (см. тут второй пример). Скрыть содержимое можно с помощью свойства overflow.

Свойство clip работает только в паре с position: absolute;. При clip: rect(0, 0, 0, 0); элемент обрезан со всех сторон и аналогичен display: none;.

При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.

Из перечисленных transition и animation не работает с display. height: auto; и clip: auto; .

На CSS можно добиться поставленного результата несколькими способами. Так, например, отображения, аналогичного display: none;. коли добавить position: absolute; или position: fixed;.

Как сделать текст невидимым на HTML странице

И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку ) или в виде всплывающего сообщения.

Я так и не поняла приемлема ли ситуация, когда человек видит логотип, а поисковый робот надпись с названием сайта: Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения. Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов. чтобы сделать сайт более удобным для индексирования. [support.google.com ] В любом случае, нужно прописать изображению атрибут alt. По нему Google тоже передаёт анкорный вес.

Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:

Другие статьи, обзоры программ, новости

HTML 5

7.1 Атрибут hidden

Все HTML элементы могут иметь атрибут hidden. Атрибут hidden является логическим атрибутом. Если данный атрибут присутствует в элементе, то это означает, что элемент ещё или уже не имеет непосредственного отношения к текущему состоянию страницы, или что он используется в целях объявления содержания для создания возможности повторного использования элемента в других частях страницы, вместо того, чтобы элемент был напрямую доступен пользователю. Web-браузеры не должны отображать элементы, которые имеют атрибут hidden. Это требование может осуществляться косвенно, через стиль слоя. Например, HTML + CSS web-браузер может реализовать эти требования, используя правила, предложенные в разделе Визуализация/Rendering.

Примечание: Поскольку этот атрибут обычно реализуется с помощью CSS, можно также переопределить его с помощью CSS. Например, правило, которое применяет 'display: block', ко всем элементам отменяет результат действия атрибута hidden. Следовательно, авторы должны перепроверять код при написании своих стилей, чтобы убедиться, что атрибут всё еще актуален.

Пример кода:

В следующем скелетном примере атрибут используется, чтобы скрыть основной экран веб-игры, пока пользователь входит в систему:

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

Элементы, которые не имеют атрибута hidden. не должны содержать гиперссылки на элементы, которые имеют атрибут hidden. Атрибуты элементов label и output. которые не имеют атрибут hidden. не должны привязывать данные элементы к элементам с атрибутом hidden. В обоих случаях подобные ссылки только введут пользователей в заблуждение.

Однако элементы и скрипты могут относиться к элементам, которые скрыты в других контекстах.

Пример кода:

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

Однако, было бы хорошо, использовать ARIA атрибут aria-describedby ссылающийся на описания, которые имеют атрибут hidden. Скрытые описания подразумевают, что они не являются действующими в состоянии покоя, они могут быть написаны таким образом, что они полезны в конкретном контексте, на который они ссылаются от образов, которые они описывают.

Аналогичным образом, элемент canvas с атрибутом hidden может быть использован по сценарию графического движка в качестве скрытого буфера, а также форма контроля может относиться к скрытому элементу form. используя атрибут элемента form .

Доступным API рекомендуется предоставлять способ раскрывать структурированное содержание, отмечая его как скрытый по умолчанию. Такие объекты не должны быть заметными для пользователей в нормальном потоке документа в любой форме, как при использовании Вспомогательных Технологий (ВТ) так и при использовании основных web-браузеров.

Когда такие функции доступны, web-браузеры могут использовать их, чтобы раскрывать полную семантику элементов с атрибутом hidden для ВТ при необходимости, если такое объекты являются упомянутыми косвенно в ID ссылке или в действительном хэш-имени ссылки. Это позволяет ВТ получить доступ к структуре этих элементов с атрибутом hidden по запросу пользователя, сохраняя при этом скрытое содержание во всех устройствах вывода с нормальным потоком документа. Авторы, желающие предотвратить инициативу пользователя - посмотреть элемент с атрибутом hidden. не должен ссылаться на элемент с таким атрибутом.

Ввиду того, что некоторые web-браузеры создают скрытые элементы при предоставлении таких элементов в ВТ, авторы не должен ссылаться на элементы с атрибутом hidden. которые будут утрачивать существенное значение при создании.

Элементы в разделе скрытом с помощью атрибута hidden по-прежнему активны, например скрипты и элементы управления формой в таких разделах, по-прежнему выполняться, и возвращают соответствующие результаты. Только они представляют изменения пользователю.

IDL атрибут hidden должен отражать содержание атрибута с тем же именем.

Внимание: содержимое данного документа является результатом перевода соответствующей официальной HTML статьи. Права на официальную статью принадлежат W3.

hidden . HTML 5.0;

Работа с формами

Хелпер Html.BeginForm

Для создания форм мы вполне можем использовать стандартные элементы html, например:

Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Buy. Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:

Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса. Данный хелпер создает как открывающий тег <form>. так и закрывающий тег </form>. Поэтому при рендеринге представления в выходной поток у нас получится тот же самый html-код, что и с применением тега form. Поэтому оба способа идентичны.

Здесь есть один момент. Если у нас в контроллере определены две версии одного метода - для методов POST и GET, например:

То есть фактически вызов страницы с формой и отправка формы осуществляется одним и тем же действием Buy. В этом случае можно не указывать в хелпере Html.BeginForm параметры:

Ввод информации

В предыдущем примере вместе с хелпером Html.BeginForm использовались стандартные элементы html. Однако набор html-хелперов содержит также хелперы для ввода информации пользователем. В MVC определен широкий набор хелперов ввода практически для каждого html-элемента. Что выбрать - хелпер или стандартный элементы ввода html, уже решает сам разработчик.

Вне зависимости от типа все базовые html-хелперы используют как минимум два параметра: первый параметр применяется для установки значений для атрибутов id и name. а второй параметр - для установки значения атрибута value

Html.TextBox

Хелпер Html.TextBox генерирует тег input со значением атрибута type равным text. Хелпер TextBox используют для получения ввода пользователем информации. Так, перепишем предыдущую форму с заменой полей ввода на хелпер Html.TextBox:

Мы получим тот же результат:

Html.TextArea

Хелпер TextArea используется для создания элемента <textarea>. который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea("text", "привет <br/> мир")

будет следующая html-разметка:

Обратите внимание, что хелпер декодирует помещаемое в него значение,в том числе и html-теги, (все хелперы декодируют значения моделей и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.

Этот хелпер сгенерирует следующую разметку:

Html.Hidden

В примере с формой мы использовали скрытое поле input type="hidden". вместо которого могли бы вполне использовать хелпер Html.Hidden. Так, следующий вызов хелпера:

@Html.Hidden("BookId", "2")

сгенерирует разметку:

А при передачи переменной из ViewBag нам надо привести ее к типу string: @Html.Hidden("BookId", @ViewBag.BookId as string)

Html.Password

Html.Password создает поле для ввода пароля. Он похож на хелпер TextBox. но вместо введенных символов отображает маску пароля. Следующий код:

@Html.Password("UserPassword", "val")

генерирует разметку:

Html.RadioButton

Для создания переключателей применяется хелпер Html.RadioButton. Он генерирует элемент input со значением type="radio". Для создания группы переключателей, надо присвоить всем им одно и то же имя (свойство name ):

Этот код создает следующую разметку:

Html.CheckBox

Html.CheckBox может применяться для создания сразу двух элементов. Возьмем, к примеру, следующий код:

@Html.CheckBox("Enable", false)

Это выражение будет генерировать следующий HTML:

То есть кроме собственно поля флажка, еще и генерируется скрытое поле. Зачем оно нужно? Дело в том, что браузер посылает значение флажка только тогда, когда флажок выбран или отмечен. А скрытое поле гарантирует, что для элемента Enable будет установлено значение даже, если пользователь не отметил флажок.

Html.Label

Хелпер Html.Label создает элемент <label/>. а передаваемый в хелпер параметр определяет значение атрибута for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и текст на метке независимо друг от друга. Например, объявление хелпера Html.Label("Name") создает следующую разметку:

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

Html.DropDownList

Хелпер Html.DropDownList создает выпадающий список, то есть элемент <select />. Для генерации такого списка нужна коллекция объектов SelectListItem. которые представляют элементы списка. Объект SelectListItem имеет свойства Text (отображаемый текст), Value (само значение, которое может не совпадать с текстом) и Selected. Можно создать коллекцию объектов SelectListItem или использовать хелпер SelectList. Этот хелпер просматривает объекты IEnumerable и преобразует их в последовательность объектов SelectListItem. Так, код @Html.DropDownList("countires", new SelectList(new string[] <"Russia","USA", "Canada","France">),"Countries") генерирует следующую разметку:

Теперь более сложный пример. Выведем в список коллекцию элементов Book. В контроллере передадим этот список через ViewBag:

Здесь мы создаем объект SelectList, передавая в его конструктор набор значений для списка (db.Books), название свойства модели Book, которое будет использоваться в качестве значения (Author), и название свойства модели Book, которое будет использоваться для отображения в списке. В данном случае необязательно устанавливать два разных свойства, можно было установить одно и то же свойство и для значения, и для отображения.

Тогда в представлении мы можем так использовать этот SelectList:

И при рендеринге представления все элементы SelectList добавятся в выпадающий список

Html.ListBox

Хелпер Html.ListBox. также как и DropDownList. создает элемент <select />. но при этом делает возможным множественное выделение элементов (то есть для атрибута multiple устанавливается значение multiple ). Для создания списка, поддерживающего множественное выделение, вместо SelectList можно использовать класс MultiSelectList :

Этот код генерирует следующую разметку:

С передачей одиночных значений на сервер все понятно, но как передать множественные значения? Допустим, у нас есть следующая форма:

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

PHP-сценарии обработки HTML-форм

PHP-сценарии обработки HTML-форм

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

1. Кнопки - Тег <BUTTON>

Тег <BUTTON> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <INPUT> (с параметром type="button | reset | submit" ). В отличие от этого тега, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <BUTTON> должен располагаться внутри формы, устанавливаемой элементом <FORM>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <BUTTON>. если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <BUTTON> в контейнер <FORM> обязательно. Закрывающий тег </BUTTON> обязателен.

Параметры:

disabled - блокирует доступ и изменение элемента.

type - тип кнопки

value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Параметр DISABLED Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab. мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.

Параметр TYPE Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции. Значение по умолчанию: button.

Аргументы:

button - Обычная кнопка.

reset - Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.

Submit - Кнопка для отправки данных формы на сервер.

Параметр VALUE Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение », где имя задается параметром name тега <BUTTON>. а значение — параметром value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.

1.1. Кнопка (input type=button) 1.2. Кнопка с изображением (input type=image)

Кнопки с изображениями аналогичны по действию кнопке Submit. но представляют собой рисунок. Для этого задаем type=image и src="http://in-internet.narod.ru/teor/image.gif".

Когда пользователь щелкнет где-нибудь на изображении, соответствующая форма будет передана на сервер с двумя дополнительными переменными - sub_x и sub_y. Они содержат координаты нажатия пользователя на изображение. Опытные программисты могут заметить, что на самом деле имена переменных, отправленных браузером, содержат точку, а не подчеркивание, но PHP автоматически конвертирует точку в подчеркивание.

1.3. Кнопка отправки формы (input type=submit)

Служит для отправки формы сценарию. При создании кнопки для отправки формы необходимо указать 2 атрибута: type="submit" и value="Текст кнопки". Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

РНР-сценарий не требуется.

1.4. Массив кнопок (submit) для выбора варианта действий 2. Кнопка сброса формы (Reset)

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

РНР-сценарий не требуется.

Флажки checkbox предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

5. Текстовое поле (text)

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value. то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

6. Поле для ввода пароля (password)

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

7. Скрытое текстовое поле (hidden)

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

8. Выпадающий список (select)

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Но будет передано значение последней выбранной кнопке.

Список начинается с парных тегов <select></select>. Теги <option></option> позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected. то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1. то список будет выпадающим. Если указан атрибут multiple. то разрешено выбирать несколько элементов из списка. Но эта схема практически не используется, а при size = 1 не имеет смысла.

Если необходимо создать выпадающий с предсказуемой последовательностью. Например, список с годами с 2000 по 2050. То используется следующий прием.

9. Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. При необходимости можно указать атрибут readonly. который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea>.

Существует параметр wrap – задание переноса строк. Возможные значения:

off - отключает перенос строк;

virtuals - показывает переносы строк, но отправляет текст как он введен;

physical - переносы строк оставляются в исходном виде.

По умолчанию тег <textarea> создает пустое поле шириной в 20 символов и состоящее из 2 строк.

Для того, чтобы в многострочном текстовом поле соблюдалось html-форматирование (перенос строк по средством тега <br> или <br \> ), то используйте функцию nl2br().

10. Кнопка для загрузки файлов (browse)

Служит для реализации загрузки файлов на сервер. При создании текстового поля также необходимо указать тип поля type как "file".

СПОСОБЫ ОБЩЕНИЯ БРАУЗЕРА С СЕРВЕРОМ

Способов, предоставляемых протоколом HTTP. немного. Это важная информация. Никаких других способов нет. На практике используются два: GET - это когда данные передаются в адресной строке, например, когда пользователь жмет ссылку. POST - когда он нажимает кнопку в форме.

Чтобы передать данные методом GET не надо создавать на HTML-странице форму (использовать формы для запросов методом GET вам никто не запрещает - но это тупость) - достаточно ссылки на документ с добавлением строки запроса которая может выглядеть как переменная=значение пары объединяются с помощью амперсанда & а к URL страницы строка присоединяется с помощью вопросительного знака «? ».

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

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

Недостаток в том, что просто изменив параметры в адресной строке пользователь может повернуть ход сценария непредсказуемым образом, это создает огромную дыру в безопасности в сочетании с неопределенными переменными и register_globals on или кто-нибудь может узнать значение важной переменной (например ID -сеcсии) просто посмотрев на экран монитора.

Для чего следует использовать.

- для доступа к общедоступным страницам с передачей параметров (повышение функциональности)

- передача информации не влияющей на уровень безопасности

Для чего не следует использовать.

- для доступа к защищенным страницам с передачей параметров

- для передачи информации влияющей на уровень безопасности

- для передачи информации не подлежащей модифицированию пользователем (некоторые передают текст SQL-запросов.

Метод POST

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

Преимущество.

- большая безопасность и функциональность запросов с помощью форм методом POST.

Недостаток.

- меньшая доступность.

Для чего следует использовать.

- для передачи большого объема информации (текст, файлы..);

- для передачи любой важной информации;

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

Для чего не следует использовать.

- нет ограничений.

Загрузка файлов методом POST

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

Страница для загрузки файлов может быть реализована при помощи специальной формы, которая выглядит примерно так:

В приведенном выше примере "_URL_" необходимо заменить ссылкой на PHP-скрипт. Скрытое поле MAX_FILE_SIZE (значение необходимо указывать в байтах) должно предшествовать полю для выбора файла, и его значение является максимально допустимым размером принимаемого файла. Также следует убедиться, что в атрибутах формы вы указали enctype="multipart/form-data". в противном случае загрузка файлов на сервер выполняться не будет.

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

Как определить метод запроса?

вернет GET или POST.

Какой способ следует применять?

• Если форма служит для запроса некой информации, например - при поиске, то ее следует отправлять методом GET. Чтобы можно было обновлять страницу, можно было поставить закладку и или послать ссылку другу.

• Если же в результате отправки формы данные записываются или изменяются на сервере, то следует их отправлять методом POST. причем обязательно после обработки формы надо перенаправить браузер методом GET. Так же, POST может понадобиться, если на сервер надо передать большой объём данных (у GET он сильно ограничен), а так же, если не следует "светить" передаваемые данные в адресной строке (при вводе логина и пароля, например).

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

Как передать данные в другой файл непосредственно из тела PHP-программы методом GET и POST?

Пример, для демонстрации отправки данных методом POST и GET одновременно и получения ответа от сервера. В этом примере файл file.php получил переменные:

GET var="23" и var2="54"

POST var3="test" и var4="еще тест"

Внимание, данные передаваемые через POST или GET всегда передаются строкой (string), независимо от того, через форму они передаются или через скрипт. Поэтому передавая число, помните, что в скрипт оно попадет как string.

Как перейти на другую страницу сайта из тела программы?

Через HTML:

На новую страницу На предыдущую с обновлением:

Через генерацию JavaScript-кода:

На предыдущую с обновлением: На предыдущую без обновления: Перезагрузить текущую страницу:

Через PHP-функцию:

На новую На предыдущую страницу с обновлением: На текущую страницу с обновлением и генерацией полного url-адреса:

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

ПРИМЕРЫ НЕОБЫЧНОГО ИСПОЛЬЗОВАНИЯ ФОРМ

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

Пример 1. Задание номера карточки.

Здесь отсутствует кнопка передачи данных, т.к. форма, состоящая из одного поля, передается автоматически при нажатии клавиши Enter.

Пример 2. Навигация по массиву (списку) по средством формы.

В этом примере осуществляется перемещение по списку (массиву) элементов с отражением его номера (ключа) и значения элемента в массиве с помощью кнопок и скрытой строки с передачей навигационного параметра.

ПРОВЕРКА КОРРЕКТНОСТИ ДАННЫХ ИЛИ ДОПУСТИМОСТИ ВВОДИМЫХ ДАННЫХ

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

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

• Проверить, что поле, в которое заносится электронный адрес непустое (поскольку пользователь может просто забыть ввести адрес, и, если этот случай необработан, возникнет ошибочная ситуация);

• Проверить соответствие введенного адреса с помощью регулярного выражения.

Email обязательно должен содержать символ @. быть по длине не менее 8 символов, есть также регулярное выражение, по которому можно проверить данные на предмет соответствия адресу электронной почты.

Встает вопрос, как проинформировать пользователя о том, что он неправильно ввел данные? Один из вариантов решения этой проблемы - через сессионные переменные.

Пусть есть страница form.php. на которой расположена наша форма, и есть файл send.php. который является обработчиком данных формы в файле form.php.

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

Пусть отправляется переменная email методом POST в файле send.php. то делаем:

1. Проверку на длину:

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

Такая проверка осуществляется зачастую с помощью регулярных выражений. Как известно, у адреса две составляющие - имя пользователя и имя домена, которые разделены знаком @. В имени пользователя могут присутствовать заглавные и прописные буквы цифры, знаки подчеркивания и минуса, точки. Для проверки разделителя между именем пользователя и именем домена в выражение требуется добавить +@.

Также не забывайте, что электронный ящик может находиться на поддомене xxx@xxx.xxx.com. или даже на домене четвертого, пятого уровня (как вариант, реально эта ситуация крайне редка, но отбрасывать эти адреса не стоит). Поэтому в регулярном выражении не забывайте использовать точку (экранированную "\. ") для указания того, что часть адреса после "@ " может содержать точку как разделитель доменных имен.

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

Для проверки доменного имени первого уровня учитываем, что его длина уже составляет не только 2 символа (.ru ) или 3 символа (.com ), но и 4 символа - .info. и даже 6 символов. Поэтому добавляем такое выражение:

Объединяя эти шаги, получаем следующее регулярное выражение для проверки адресов электронной почты:

Проверка осуществляется по этому шаблону с применением функции preg_match().

Эта пользовательская функция check_email возвращает true, если переданное значение переменной $email соответствует шаблону и false в противном случае.

В итоге проверка на корректность будет выглядеть так:

Соответственно в файле form.php перед формой прописываем следующее:

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

ДРУГИЕ ПРОВЕРКИ НА КОРРЕКТНОСТЬ ВВЕДЕННЫХ ДАННЫХ

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

Кроме чистых ошибок пользователя, необходимо также исключить ситуации, в которых возможно злонамеренное введение некорректных данных, к примеру, различных скриптов. Для этого вводимый пользователем текст необходимо обработать функциями удаления HTML-тегов (для исключения возможности написания скриптов на JavaScript и Visual Basic) и обратных слешей (для исключения возможности написания скриптов на Perl). Т. о. минимальный набор действий, необходимый для проверки корректности данных, вводимых пользователем, включает следующие этапы:

• проверка того, что пользователь ввел данные

• проверка допустимости вводимых пользователем данных (как правило, осуществляется при помощи регулярных выражений)

• обработка текста, введенного пользователем функцией htmlspecialchars для удаления HTML-тегов

• обработка текста, введенного пользователем функцией stripslashes для удаления обратных слешей

ФИЛЬТРАЦИЯ ДАННЫХ

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

После нажатия кнопки "OK" передаст скрипту index.php два значения - $login и $pass. Как их можно отфильтровать? Пример для переменной $login:

Вводимый пользователем текст необходимо обработать функциями удаления HTML-тегов (для исключения возможности написания скриптов на JavaScript и Visual Basic) и обратных слешей (для исключения возможности написания скриптов на Perl). К примеру, если переменная $login содержит текст с именем пользователя, то обработка этого текста выглядит так:

В первой строке мы проверяем существование переменной $login. если она существует - идем дальше, если нет - выводим сообщение об ошибке. Затем с помощью функции htmlspecialchars заменяем в этой переменной спецсимволы на их HTML-мнемоники. Функция stripslashes вырезает знак обратного слеша '\ '. Далее с помощью str_replace вырезаем знак прямого слеша, точку (иногда бывает полезно) и обратную кавычку.

Если вы знакомы с регулярными выражениями, то предыдущий пример можно записать гораздо короче:

Этот фрагмент кода будет проверять введенный логин на соответствие регулярному выражению '/[0-9a-z_]/i ', которое означает: все цифры + все латинские буквы в любом регистре + знак подчеркивания. Если логин содержит другие символы, то будет показано сообщение об ошибке.

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

Если не фильтровать переменную $module (или $_GET[`module`]. если register_globals отключен), то над сайтом могут вытворяться не очень хорошие вещи, вроде XSS. Нужно применять первый приведенный мной скрипт-чистильщик, разумеется, убрав сообщения об ошибках.

ПРОВЕРКА НА ПУСТОТУ ПОЛЯ

Проверка того, что пользователь ввел данные, может осуществляться, к примеру, с помощью функции isset: Для этой же цели можно использовать функцию empty:

На практике удобно сначала проверить, не пустой ли action формы, а потом уже проверять различные его составляющие: поле имя, e-mail и т. д. К примеру:

ТАБЛИЦА СРАВНЕНИЯ ТИПОВ В PHP

Следующая таблица демонстрируют работу PHP с типами переменных и операторами сравнения, как в случае свободного, так и в случае строгого сравнения. Также эта информация относится к разделу документации по приведению типов.

Замечание: HTML-формы не передают тип переменной: они всегда передают строки. Для проверки является ли строка числом, используйте функцию is_numeric().

Замечание: Использование if ($x) пока $x не определена сгенерирует ошибку E_NOTICE. Вместо этого используйте функцию empty() или isset() и/или инициализируйте переменную.

Таблица. Сравнение типов переменной $x и результатов функций PHP, связанных с типами

Hidden - HTML (HyperText Markup Language)

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.

This attribute must not be used to hide content that could legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.

Hidden elements shouldn't be linked from non-hidden elements and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.

Note: Changing the value of the CSS display property on an element with the hidden attribute overrides the behavior. For instance, an element styled display: flex will be displayed on screen regardless of the hidden attribute being present.

Скажем прощай oveflow: hidden!

rotorweb.ru Проблемы и решения в Web-дизайне Скажем прощай oveflow: hidden!

Понедельник, 21 декабря 2009

П родолжу эстафету, начатую автором блога cuprum.name. в которой эстафетостартер ( :) предлагает блогерам поделиться со своими читателями переводом интересных зарубежных статей из своего RSS -ридера.

Отмечу сразу, что переводом мой текст можно будет назвать лишь условно, скорее это будут свои мысли, основанные на чужой статье. А оригинал вы сможете найти здесь .

Сейчас в разметке большинства сайтов, в той или иной мере, используется подход с применением float. для «лечения» которого верстальщики применяют разные подходы (всем ведь известно про схлопывающийся контейнер для блоков с float. нарушение потока для последующих элементов разметки, и проблемы, связанные с этим?).

Из часто встречающихся решений для очистки плавающих блоков можно увидеть (кратко пройдёмся по всем методам):

1. Метод с дополнительным <div style="clear:both"></div>

Который ( <div> ) помещается в тот же контейнер, в котором есть плавающие блоки, непосредственно после них. Позволяет контролировать плавающие элементы относительно последующей разметки. Например, не позволит следующими за плавающей картинкой заголовкам, спискам, абзацам и т.д, наползать на неё.

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

2. Метод с position: relative

Позволяет «вернуть» высоту и видимость фона родительского блока, относительно плавающего, с помощью свойства position: relative .

Основная сложность метода в том, что такой подход трудно контролировать в сложной разметке, если родителей для элемента с float очень много. И для всех придется дополнительно прописывать CSS -свойство position: relative. Ест много времени верстальщика и требует усиленного тестирования. Поэтому, лучше сразу забыть про этот способ.

3. Метод overflow: hidden

Наиболее популярный, простой и часто встречающийся. Здесь можно остановиться подробнее, так, как с ним мы, собственно, и собрались попрощаться :)

Суть метода в том, что родителю плавающего блока добавляется свойство overflow: hidden. Преимущество в том, что по сравнению с предыдущим способом, можно вылечить поток всего лишь одной строкой.

Правда, требуется дополнительный «костыль» для IE 6: дополнительно включаем hasLayout с помощью zoom: 1. или, если требуется валидность, height: 1% .

Весь код в этом случае выглядит примерно так:

Несмотря на кажущуюся простоту, overflow: hidden иногда не годитcя, если в верстке нужно использовать элементы с отрицательным margin (попробуйте прицепить вебдванольный стикер в такой блок), есть проблемы с ссылками-якорями в Opera (об этом я расскажу в следующий раз), и способен преподнести сюрпризы, как в этом демо (два нижних примера).

Если есть ограничения, значит метод уже не универсальный.

4. Самоочистка для плавающих блоков

В общем, лучше сразу смотрите код, который недавно обновился и больше не поддерживает устаревший IE /Mac:

Судя по той же демке (пример 2), способ избавит вас (как минимум :) от проблем с тенью в CSS 3.

Способ более универсальный и гибкий, по сравнению с первыми двумя, и позволяет избежать проблем, связанных с «обрезкой» overflow: hidden и просто просится занять свое место в вашем личном CSS -фреймворке. Кроме того, это единственный метод, который применяется непосредственно к плавающему элементу, а не к его родителю.

Лучше всего его использовать, создав отдельный класс в стилевом листе для плавающих элементов, как, например. group в статье-источнике мыслей или книге Дэна Седерхольма «Handcrafted CSS».

Кроме того, чтобы эстафета получила активное развитие (или я кого-то забыл пригласить), предлагаю присоединиться, если вы ведёте блог на смежную тему, имеете в своем активе не ниже ста RSS -подписчиков и способны выполнить все условия эстафеты. Присоединяйтесь!