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

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

• input type="text"
• input type="checkbox"
• input type="radio"
• input type="password"
• input type="hidden" - для данных, невидимых пользователю
• input type="file" - для загрузки файлов
• textarea - для ввода больших объемов текста
• select - для выпадающих списков
• button — обычно используется для отправки данных формы, но также можно использовать input type="submit" и input type="image"

К тому же:

• возможности стилизации с помощью CSS ограничены
• расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
• валидация на стороне клиента требует JavaScript

Дополнительные типы полей

В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода

Тип	Описание
email	ввод email-адреса
tel	ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены
url	ввод URL
search	поле поиска с разрывами строк автоматически удаляется
number	число с плавающей точкой
range	элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров
date	ввод дня, месяца и года
datetime	ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны
datetime-local	ввод даты и времени без временной зоны
month	ввод месяца и года без временной зоны
week	ввод номера недели без временной зоны
time	ввод времени без временной зоны
color	выбор цвета

Атрибуты полей ввода

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

конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например

Атрибут	Описание
name	имя поля ввода
value	изначальное значение
checked	делает флажок или переключатель выбранным
maxlength	Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea
minlength	Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования - pattern=".{3,}", что проверит на наличие минимум трех символов во вводимой строке
placeholder	ненавязчивая подсказка внутри поля
autofocus	устанавливает фокус на указанный элемент (видимый) при загрузке страницы
required	указывает, что в поле должно быть введено значение (не пустое поле)
pattern	проверяет значение на соответствие регулярному выражению
min	минимальное разрешенное значение (числовое и дата)
max	максимальное разрешенное значение (числовое и дата)
step	шаг изменения значения. Например, input type="number" min="10" max="19" step="2" разрешит только значения 10, 12, 14, 16 или 18
autocomplete	указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения
inputmode	указывает способ ввода. Наиболее полезные возможности: verbatim - содержимое с дословной передачей смысла, например имена пользователей latin - латиница, например, поля поиска latin-name - имена, то есть с заглавной первой буквой latin-prose - содержимое с не дословной передачей смысла, например сообщения, твиты, прочее. numeric - числовые значения, где не подходят типы number и range , например, номера кредитных карт
size	размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS
rows	Количество текстовых строк (только для textarea)
cols	количество рядов символов (только для textarea)
list	ссылается на список опций
spellcheck	установить в true или false, чтобы включить/отключить проверку привописания для поля
form	идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы
formaction	указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений)
formmethod	задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений)
formenctype	указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений)
formtarget	указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений)
readonly	значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено
disabled	отключает поле ввода - нет валидации, и данные не будут отправлены

Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.

Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.

Списки данных

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

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

Возможно указывать значения и текстовые пояснения к значениям, например:

Internet Explorer

но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом:

Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.

Отключение валидации

Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.

Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.

Поля вывода

Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации

• output - результат вычисления пользовательских действий
• progress - полоса прогресса (атрибуты value и max задают состояние)
• meter - шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum

Разделение и подпись полей

Согласно спецификации , каждый элемент формы считается параграфом, и отделяется от остальных частей элементом

Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.

Что более важно - метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:

Имя

Фамилия

Email адрес

Подпишитесь на рассылку

Элементы управления не стандартизированы

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

Поддержка браузерами

Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.

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

Всегда используйте правильный тип!

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

Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.

1. Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
2. IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
3. JavaScript плагин, как в jQuery UI позволяет определять собственный формат - да хоть YYYY-MM-DD - но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.

Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.

За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется...

Валидация на серверной стороне

Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:

• багов браузера или ошибок в JavaScript, пропускающих неверные данные
• пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
• отправка данных с систем, которые вы не контролируете
• перехват данных на пути от браузера к серверу (обычно по HTTP)

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

И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.

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

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

Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина очень простая: создать форму HTML гораздо проще, чем ту "точку внешнего мира", в которую HTML форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Перл или Си.

Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.

В настоящее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

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

Как устроена HTML форма

Форма открывается тегом

и заканчивается тегом

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

Тег

может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

Обязательный атрибут. Определяет, где находится обработчик формы.

Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET . Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET .

Определяет, каким образом данные из формы HTML будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded .

Простейшая HTML форма

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

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

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:

Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму (пример 11). Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.

Простейшая форма

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали! .

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

Как HTML форма собирает данные

Существуют и другие типы элементов . Каждый элемент должен включать атрибут NAME=[имя] , определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами . Большинство элементов должны включать атрибут VALUE="[значение]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов и , однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов :

TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).

Пример:

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user .

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*). Пример:

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля - 10 символов. Введенный пароль передается обработчику в переменной pw .

TYPE=radio

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

Пример:

9600 бит/с
14400 бит/с
28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 . Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800 .

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:

Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS .

TYPE=hidden

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

Пример:

Определяет скрытую переменную version , которая передается обработчику со значением 1.1 .

TYPE=reset

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

Пример:

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

Помимо элементов , формы HTML могут содержать меню и поля для ввода текста .</p> <p>Меню <SELECT> из n элементов выглядит примерно так:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[значение 1]">[текст 1] <OPTION VALUE="[значение 2]">[текст 2] ... <OPTION VALUE="[значение n]">[текст n] </SELECT> </p><p>Как Вы видите, меню начинается с тега <SELECT> и заканчивается тегом </SELECT> . Тег <SELECT> содержит обязательный атрибут NAME , определяющий имя переменной, которую генерирует меню.</p> <p>Тег <SELECT> может также содержать атрибут MULTIPLE , присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.</p> <p>Тег <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <OPTION> может включать атрибут checked , показывающий, что <a href="/windows-10/princip-raboty-o-baze-dannyh-nebolshie-elementy-upravleniya/">данный элемент</a> отмечен по умолчанию.</p> <h3>Разберем небольшой пример:</h3> <SELECT NAME="selection"> <OPTION VALUE="option1" checked>Вариант 1 <OPTION VALUE="option2">Вариант 2 <OPTION VALUE="option3">Вариант 3 </SELECT> <p>Такой фрагмент определяет меню из трех элементов: Вариант 1 , Вариант 2 и Вариант 3 . По умолчанию выбран элемент Вариант 1 . Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3 .</p> <p>После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым. Например:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50> А здесь - Ваш адрес...

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут ROWS устанавливает высоту окна в строках (в примере - 5). Атрибут COLS устанавливает ширину окна в символах (в примере - 50).

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

Важно знать, что русские буквы в окне при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.</p> <h3>Пример:</h3> <p>Для демонстрации использования форм HTML я написал небольшую программу на PHP, которая находится по адресу:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht </p><p>Исходные данные в эту программу передаст форма, описанная в примере 12 :</p><p> <HTML> <HEAD> <TITLE>Пример 12</TITLE> </HEAD> <H1>Несколько более сложная форма </H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Расскажите немного о себе...</H2> <P>Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные. </P> <P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR> Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR> Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской <INPUT TYPE=radio NAME=gender VALUE="female">женский<BR> Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR> <INPUT TYPE=submit VALUE="Запустить обработчик"></P> </FORM> </BODY> </HTML> </p><p>Заполняйте форму HTML, жмите на кнопку и смотрите, что будет...</p> <p><b>Маленькая хитрость, <br> или как отправить форму почтой </b></p><p>Все это прекрасно, скажут скептики, но на кой ляд нужны HTML формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти.</p> <p>HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике.</p> <p>Допустим, что мы слегка изменили Пример 12. Вместо строки</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>мы ввели строку</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Обратите внимание, что мы изменили алгоритм кодирования на text/plain , то есть фактически выключили кодирование вообще.</p> <p>Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик?</p> <p>Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:</p><p>Fn=Иван ln=Петров gender=male age=22 </p><p>К сожалению, не все пользователи смогут воспользоваться такой формой HTML. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – <a href="/windows-10/perevod-mts-na-bilain-bez-komissii-kak-perevodit-dengi-s-mts-na/">удобный способ</a> получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает <a href="/different/popup-forma-obratnoi-svyazi-wordpress-kak-sozdat-vsplyvayushchuyu-formu-obratnoi/">обратную связь</a> с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.</p> <h2>1) Создание простой формы</h2> <p>Теги <i><form> </i> и <i></form> </i> задают начало и конец формы. Начинающий форму тег <i><form> </i> содержит два атрибута: <i>action </i> и <i>method </i>. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут <i>method </i> указывает браузеру, какой вид <a href="/tips/generaciya-http-zaprosov-metody-i-struktura-protokola-http/">HTTP запроса</a> необходимо использовать для отправки формы; возможны значения <i>POST </i> и <i>GET </i>.</p> <h2>Замечание</h2> <p>Главное отличие методов POST и GET заключается в способе передачи информации. В методе <a href="/windows-7-xp/parametry-get-zaprosa-ispolzovanie-fread-dlya-vypolneniya-post-zaprosov-chto-takoe/">GET параметры</a> передаются через <a href="/windows-8/chrome-plugins-v-adresnoi-stroke-nekotorye-voprosy-vklyucheniya-storonnih/">адресную строку</a>, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.</p> <p> <form method="post" action="../admin/add_story.php"> </p> <p><?php <br> $text = nl2br ($_POST [ "mytext" ]); <br>?> </p> <p><b>Задача: </b> Пусть необходимо создать выпадающий список с годами с 2000 по 2050.<br><b>Решение: </b> Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.</p><p><b>Обсуждение: </b></p> <p>Для начала создадим два файла: <b>form.html </b> и <b>action.php </b>. В файле <b>form.html </b> будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:</p> <h2>I. Ввод данных вручную:</h2> <p> <select class="input" type=text name=years> <br><option value="2000">2000</option> <br><option value="2001">2001</option> <br><option value="2002">2002</option> <br>…………………………………………… <br><option value="2050">2050</option> <br></select> </p> <h2>II. Ввод данных через цикл:</h2> <p> <select class="input" type=text name=years> <br><?php <br>$year = 2000 ; <br>for ($i = 0 ; $i <= 50 ; $i ++) <span>// Цикл от 0 до 50 <br></span>{ <br>$new_years = $year + $i ; <span>// Формируем новое значение <br></span>echo "<option value=" . $new_years . ">" . $new_years . "</option>" ; <span>//Формируем новую строчку <br></span>} <br>?> <br></select> </p> <p>Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива <i>$_POST </i>.</p> <p><b>Описание: </b></p> <p>Создадим HTML-форму для отправки файла на сервер.</p> <p> <FORM ENCTYPE="multipart/form-data" ACTION="action.php" METHOD=POST> <br><INPUT NAME="myfile" TYPE="file"> <br><INPUT TYPE="submit" value="Передать файл"> <br></FORM> </p> <p>В данной html-форме присутствует элемент <i>browse </i>, который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку <i>"Передать файл" </i>, файл передается сценарию-обработчику.</p> <p>Затем необходимо написать сценарий обработчик <b>action.php </b>. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:</p> <p><?php <br>if(isset($_FILES [ "myfile" ])) <span>// Если файл существует <br></span>{ <br>$catalog = "../image/" ; // Наш каталог <br>if (is_dir ($catalog )) <span>// Если такой каталог есть <br></span>{ <br>$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; <span>// Времменый файл <br></span>$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Имя файла <br>if(! copy ($myfile , $catalog )) echo <span>"Ошибка при копировании файла " </span>. $myfile_name <span>// Если неудалось скопировать файл <br></span>} <br> else mkdir ("../image/" ); <span>// Если такого каталога нет, то мы его создадим <br></span>} <br>?> </p> <h2>Замечание</h2> <p>Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.</p> <p><a href="/configuring-wi-fi/formula-hartli-primery-informaciya-dannye-signaly/">Данный пример</a> демонстрирует создание каталога и копирование файла в этот каталог на сервер.</p> <p>Также хотел бы продемонстрировать пример с элементом <i>checkbox </i>. Этот элемент немного отличается от других элементов тем, что если не один из элементов <i>checkbox </i>’a не выбран, то суперглобальная переменная <i>$_POST </i> вернет пустое значение:</p> <p> <FORM ACTION="file.php" METHOD=POST> <br><input name="mycolor" type="checkbox" value="blue">Синий <br><input name="mycolor" type="checkbox" value="black">Черный <br><input name="mycolor" type="checkbox" value="white">Белый <br><input name="Submit" type=submit value="Выбрать"> <br></FORM> </p> <p><?php <br>if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; <span>// Если выбран хоть 1 элемент <br></span>else echo <span>"Выберите значение" </span>; <br>?> </p> <p>Формы</p><p>HTML-формы - это простые элементы управления HTML, которые применяются для сбора информации от посетителей веб-сайта. К ним относятся текстовые поля для ввода данных с клавиатуры, списки для выбора предопределенных данных, флажки для установки параметров и т. п. Существует бесчисленное количество способов использования HTML-форм, и если вы побродили по просторам Интернета всего лишь несколько дней, то, несомненно, использовали их для разных целей - от регистрации на каком-либо форуме или получения <a href="/different/kak-zavesti-pochtovyi-yashchik-na-gmail-zavesti-pochtovyi-yashchik-na-gmail-com/">почтового ящика</a> до просмотра биржевого курса или покупки товара в интернет-магазине.</p> <p>HTML-формы существовали с самых ранних времен <a href="/windows-7-xp/pochemu-vazhno-znat-yazyk-razmetki-giperteksta-html-yazyk/">языка HTML</a>, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом <i>XForms </i>, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.</p> <p>Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.</p> <p>Но так как разработчики основных браузеров никогда не заморачивались с реализацией XForms в своих продуктах по причине его слишком большой сложности и небольшого использования, сообщество веб-разработчиков так никогда и не сделало этот прыжок.</p> <p>Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов. HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков.</p> <h2>Что такое форма?</h2> <p>Скорее всего, вам приходилось работать с формами раньше. Но если нет или вы порядочно подзабыли эту тему, следующий материал позволит вам получить необходимые сведения для более углубленного изучения этой области веб-дизайна.</p> <p><b>Веб-форма </b> - это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду - благодаря формам мы можем создавать <a href="/windows-8/the-shared-microsoft-account-how-to-create-a-microsoft-account-what-is-an-account-log-in-and-password-recovery/">учетные записи</a> <a href="/tips/besplatnaya-pochta-dlya-vashego-domena-pochta-gmail-upravlenie-elektronnoi/">электронной почты</a>, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая <a href="/windows-7-xp/kak-otredaktirovat-schet-1s-8-3-publikacii-sozdanie-prostoi/">простая форма</a> - это одинокое текстовое поле <a href="/windows-10/google-ukraine-search-engine-google-search-engine-history-figures-facts/">поисковых систем</a>, таких как Google:</p> <p>Все основные веб-формы работают одинаково. Пользователь вводит определенную информацию, а потом нажимает кнопку, чтобы отправить введенную информацию на веб-сервер. По прибытию на веб-сервер эта информация обрабатывается каким-либо приложением, которое потом предпринимает соответствующий очередной шаг. Перед тем как отослать <a href="/program/odnoklassniki-novaya-registraciya-vhod-kak-sozdat-stranicu-v-odnoklassnikah-registraciya-novoi-str/">новую страницу</a> назад браузеру, серверная программа может обратиться к базе данных, чтобы извлечь или сохранить информацию.</p> <p>Сложность этого процесса состоит в том, что существуют сотни <a href="/tv/gde-v-vindovs-10-vai-fai-vklyuchenie-wifi-na-noutbukah-raznyh-modelei-sposob/">разных способов</a> реализации серверного приложения, которое обрабатывает поступившие из формы данные. Некоторым разработчикам может быть достаточно элементарных сценариев для манипулирования полученными данными, в то время как другие могут использовать средства <a href="/windows-10/kakie-ispolzuyut-na-monitore-matricu-ekrany-s-pls-matricei-vysokii-uroven/">высшего уровня</a>, которые упаковывают данные из формы в аккуратные <a href="/windows-10/obektno-orientirovannye-tehnologii-proektirovaniya-prikladnyh-programmnyh/">программные объекты</a>. Но в любом случае, задача перед этими приложениями стоит, по большому счету, одинаковая - исследовать данные из формы, выполнить какие-либо действия с ними, а потом на основе полученных результатов отправить браузеру новую страницу.</p> <h2>Модернизация традиционной HTML-формы</h2> <p>Лучший способ обучения работе с формами HTML5 - это взять типичную <a href="/tv/prostoi-3d-redaktor-dlya-konstruirovaniya-mgnovennoe-sozdanie/">современную форму</a> и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент <form>.</p> <p>Элемент <b><form> </b> удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте <i>action </i>. Но если вся работа будет выполняться на стороне клиента сценариям JavaScript, то для атрибута action можно просто указать значение #.</p> <p>Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента <b><fieldset> </b>. Каждому разделу можно присвоить название, для чего используется элемент <b><legend> </b>. В следующем листинге приводится разметка формы:</p> <p> <form action="#"> <p><i>Пожалуйста, заполните форму. Обязательные поля помечены </i><i>*</i></p> <fieldset> <legend><a href="/gadgets/mailchimp-sozdanie-kompanii-kak-nastroit-akkaunt-i-sozdat-pochtovuyu-rassylku-v/">Контактная информация</a></legend> <label for="name">Имя <i>*</i></label> <input id="name"><br> <label for="telephone">Телефон</label> <input id="telephone"><br> <label for="email">Email <i>*</i></label> <input id="email"><br> </fieldset> <fieldset> <legend><a href="/windows-7-xp/kak-nastroit-tochnyi-poisk-v-yandekse-mehanizmy-zashchity-ot-nezhelatelnoi-i/">Персональная информация</a></legend> <label for="age">Возраст<i>*</i></label> <input id="age"><br> <label for="gender">Пол</label> <select id="gender"> <option value="female">Женщина</option> <option value="male">Мужчина</option> </select><br> <label for="comments">Перечислите личные качества</label> <textarea id="comments">

Выберите ваших любимых животных

Зебра Кошак Анаконда Человек Слон Антилопа Голубь Краб

Добавьте немного стилей CSS:

Body { font-family: "Palatino Linotype", serif; max-width: 600px; padding: 0px 30px; } h1 { margin-bottom: 0px; } p { margin-top: 0px; } fieldset { margin-bottom: 15px; padding: 10px; } legend { padding: 0px 3px; font-weight: bold; font-variant: small-caps; } label { width: 110px; display: inline-block; vertical-align: top; margin: 6px; } em { font-weight: bold; font-style: normal; color: #f00; } input:focus { background: #eaeaea; } input, textarea { width: 249px; } textarea { height: 100px; } select { width: 254px; } input { width: 10px; } input { width: 170px; padding: 10px; }

И вот результат:

Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом , который собирает данные и создает флажки, переключатели и списки. Для ввода одной строки текста применяется элемент , а для нескольких - элемент </b>; элемент <select> создает выпадающий список. Краткое обозрение этих и других элементов управления форм приведено в таблице:</p> <table class="new_table" border="2" cellpadding="15"> Элементы управления формы <tr><th>Элемент управления </th> <th width="200">HTML-элемент </th> <th>Описание </th> </tr><tr><td><i>Однострочное текстовое поле </i> </td> <td><input type="text"><br><input type="password"> </td> <td>Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек ( ) </td> </tr><tr><td><i>Многострочное текстовое поле </i> </td> <td><textarea>... Текстовое поле, в которое можно ввести несколько строчек текста Флажок Выводит поле флажка, который можно установить или очистить Переключатель Выводит переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них Кнопка


Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript Список ... Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент

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

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

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

Добавление подсказок

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

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

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

...

Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.к. подстановочный текст - всего лишь приятная примочка, не обязательная для функционирования формы.

В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder ), либо смириться с таким порядком вещей.

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

Input:focus { background: #eaeaea; }

Фокус

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

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

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

На этой идее основан новый HTML5-атрибут autofocus , который можно вставить в элемент или (но только в один элемент формы), как показано в следующем примере:</p> <p> <input id="name" placeholder="Иван Иванов" autofocus></p> <p>Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за <a href="/tv/kak-dobavit-fail-v-isklyucheniya-norton-isklyucheniya-v-norton-internet-security-kak-dobavit/">исключением Internet</a> Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье <a href="../level1/1_5.php" target="_blank">"Поддержка браузерами HTML5"</a>) и, если необходимо, запускать собственный код для автоматического фокуса.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="clear"></div> </div> </article> <div class="clear"></div> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> <div class="widget-top"> <h4></h4> <div class="stripe-line"></div> </div> <div class="search-block-large widget"> <form method="get" action="/"> <button class="search-button" type="submit" value="Поиск"><i class="fa fa-search"></i></button> <input type="text" id="s" name="s" value="Поиск" onfocus="if (this.value == 'Поиск') { this.value = '';} " onblur="if (this.value == '') { this.value = 'Поиск';} " /> </form> </div> <div id="text-html-widget-22" class="text-html-box" style="text-align:center;"> </div> <div id="text-html-widget-21" class="text-html-box" style="text-align:center;"> <div id="rotaban_252588" class="rbrocks rotaban_9d0893f37def4380b5f6cdcfa4127be7"></div> </div> <div class="widget" id="tabbed-widget"> <div class="widget-container"> <div class="widget-top"> <ul class="tabs posts-taps"> <li class="tabs"><a href="#tab2">Новые</a></li> <li class="tabs"><a href="#tab1">Популярные</a></li> <li class="tabs"><a href="#tab3">Обсуждаемые</a></li> </ul> </div> <div id="tab2" class="tabs-wrap"> <ul> <li> <div class="post-thumbnail"> <a href="/dll-files/planshety-samsung-samsung-galaxy-tab-otzyvy-o-planshete-instrukcii-obzor-samsung-galaxy/" rel="bookmark"><img width="110" height="75" src="/uploads/f29af3e328c0da364af82d035a63a386.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Samsung Galaxy Tab: отзывы о планшете, инструкции" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/dll-files/planshety-samsung-samsung-galaxy-tab-otzyvy-o-planshete-instrukcii-obzor-samsung-galaxy/">Samsung Galaxy Tab: отзывы о планшете, инструкции</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-05-24 15:44:08</span> </li> <li> <div class="post-thumbnail"> <a href="/dll-files/lg-q6-obzor-nedorogoi-kopii-flagmana-sravnenie-s-g6-stoit-li-pokupat-pochemu/" rel="bookmark"><img width="110" height="75" src="/uploads/0dda273240dc28ab18f4289a646a5e06.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="LG Q6 — обзор недорогой копии флагмана, сравнение с G6" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/dll-files/lg-q6-obzor-nedorogoi-kopii-flagmana-sravnenie-s-g6-stoit-li-pokupat-pochemu/">LG Q6 — обзор недорогой копии флагмана, сравнение с G6</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-05-11 21:19:58</span> </li> <li> <div class="post-thumbnail"> <a href="/configuring-wi-fi/kak-sdelat-filtr-v-excel-po-stolbcam-rasshirennyi-filtr-v-ms/" rel="bookmark"><img width="110" height="75" src="/uploads/d7d16366242c88e175e23e590b7a5fff.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Расширенный фильтр в MS EXCEL" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/configuring-wi-fi/kak-sdelat-filtr-v-excel-po-stolbcam-rasshirennyi-filtr-v-ms/">Расширенный фильтр в MS EXCEL</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> </li> <li> <div class="post-thumbnail"> <a href="/different/kak-sdelat-filtr-v-excel-po-stolbcam-kak-v-excel-sdelat-filtr-na-kazhdyi/" rel="bookmark"><img width="110" height="75" src="/uploads/e8e86c7d58ebdcb8eab5f12dc011c88d.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Как в excel сделать фильтр на каждый столбец?" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/different/kak-sdelat-filtr-v-excel-po-stolbcam-kak-v-excel-sdelat-filtr-na-kazhdyi/">Как в excel сделать фильтр на каждый столбец?</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> </li> <li> <div class="post-thumbnail"> <a href="/windows-7-xp/kak-sdelat-normalnuyu-tablicu-v-vorde-izmenenie-vneshnego-vida/" rel="bookmark"><img width="110" height="75" src="/uploads/4375c46e8ba611fceefcad512e7f0c05.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Как сделать нормальную таблицу в ворде" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-7-xp/kak-sdelat-normalnuyu-tablicu-v-vorde-izmenenie-vneshnego-vida/">Как сделать нормальную таблицу в ворде</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> </li> </ul> </div> <div id="tab1" class="tabs-wrap"> <ul> <li> <div class="post-thumbnail"> <a href="/tv/sozdat-glavnuyu-knopochnuyu-formu-pozvolyayushchuyu-otkryt-iz-nee-po-nazhatiyu-na/" title="Изменение элементов в кнопочной форме" rel="bookmark"><img width="110" height="75" src="/uploads/908da9dbda5f53d757768cd4a1733d07.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Изменение элементов в кнопочной форме" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/tv/sozdat-glavnuyu-knopochnuyu-formu-pozvolyayushchuyu-otkryt-iz-nee-po-nazhatiyu-na/">Изменение элементов в кнопочной форме</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-04-03 03:04:02</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/windows-10/ispolnenie-ciklicheskih-algoritmov-na-baze-sistemy-kumir/" title="Исполнение циклических алгоритмов на базе системы "кумир"" rel="bookmark"><img width="110" height="75" src="/uploads/c35d8e0e24b932fcdc704e03a059b2ab.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Исполнение циклических алгоритмов на базе системы "кумир"" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-10/ispolnenie-ciklicheskih-algoritmov-na-baze-sistemy-kumir/">Исполнение циклических алгоритмов на базе системы "кумир"</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/program/ispolnitel-robot-prostye-komandy-cikly-i-usloviya-v-yazyke/" title="Исполнитель Робот. Простые команды. Циклы и условия в языке кумир Решение кумира в циклах" rel="bookmark"><img width="110" height="75" src="/uploads/a2076f48121ce4c15cf18f1bdb75dd7a.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Исполнитель Робот. Простые команды. Циклы и условия в языке кумир Решение кумира в циклах" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/program/ispolnitel-robot-prostye-komandy-cikly-i-usloviya-v-yazyke/">Исполнитель Робот. Простые команды. Циклы и условия в языке кумир Решение кумира в циклах</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/windows-7-xp/cikly-s-usloviem-v-kumire-vetvlenie-v-yazyke-kumir-kumir-prostye-i/" title="Ветвление в языке кумир Кумир простые и составные условия" rel="bookmark"><img width="110" height="75" src="/uploads/483767e216279de0c95a497a1853e9f9.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Ветвление в языке кумир Кумир простые и составные условия" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-7-xp/cikly-s-usloviem-v-kumire-vetvlenie-v-yazyke-kumir-kumir-prostye-i/">Ветвление в языке кумир Кумир простые и составные условия</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> <li> <div class="post-thumbnail"> <a href="/windows-10/raspechatat-deleniya-ot-1-do-10-delenie-video-zolotaya-arifmetika/" title="Распечатать деления от 1 до 10" rel="bookmark"><img width="110" height="75" src="/uploads/8b3da587c8054658296956355bea3a52.jpg" class="attachment-tie-small size-tie-small wp-post-image" alt="Распечатать деления от 1 до 10" / loading=lazy><span class="fa overlay-icon"></span></a> </div> <h3><a href="/windows-10/raspechatat-deleniya-ot-1-do-10-delenie-video-zolotaya-arifmetika/">Распечатать деления от 1 до 10</a></h3> <span class="tie-date"><i class="fa fa-clock-o"></i>2023-03-18 19:34:43</span> <span class="post-views-widget"> </span> </li> </ul> </div> <div id="tab3" class="tabs-wrap"> <ul> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Что лучше продавать через Инстаграм?' src='/uploads/a5e3f9793d62cd83899c30c290371103.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/program/kakie-tovary-otlichno-prodayutsya-cherez-instagram-prinosya/"> Что лучше продавать через Инстаграм? </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Маркетинг на страже экологии: примеры удачного партнерства брендов ради спасения окружающего мира' src='/uploads/5da7b5416b0c04007713b53197c9236c.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/tips/marketing-na-strazhe-ekologii-primery-udachnogo-partnerstva-brendov-radi/"> Маркетинг на страже экологии: примеры удачного партнерства брендов ради спасения окружающего мира </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Высококонтрастные темы оформления Windows' src='/uploads/c382b30421c5cf16bbad9d5312e961db.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/different/kak-otklyuchit-kontrastnyi-rezhim-v-windows-7-vysokokontrastnye-temy-oformleniya/"> Высококонтрастные темы оформления Windows </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Узнать какой порт usb 3.0. Как узнать, какой USB? USB и его версии' src='/uploads/9fdd1103e4a7335197228b8e2c527542.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/different/uznat-kakoi-port-usb-3-0-kak-uznat-kakoi-usb-usb-i-ego-versii/"> Узнать какой порт usb 3.0. Как узнать, какой USB? USB и его версии </a> </li> <li> <div class="post-thumbnail" style="width:55px"> <img alt='Несколько вариантов выключения компьютера под управлением Windows8 Как полностью выключить windows 8' src='/uploads/604da02db788c6365d223426da4224a8.jpg' class='avatar avatar-55 photo' height='55' width='55' / loading=lazy> </div> <a href="/dll-files/kak-nastroit-vyklyuchenie-kompyutera-neskolko-variantov-vyklyucheniya/"> Несколько вариантов выключения компьютера под управлением Windows8 Как полностью выключить windows 8 </a> </li> </ul> </div> </div> </div> <div id="ai_widget-5" class="widget ai_widget"> <div class='code-block code-block-14' style='margin: 8px auto; text-align: center; clear: both;'> <div style="text-align:center;"> <div id="quvosa1" style="height:500px;width:300px;" align="center"></div> </div> </div> </div> </div> </div> </aside> <div class="clear"></div> </div> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignleft"> © Copyright 2024, pcwe.ru - Портал о персональных компьютерах. </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Пролистать наверх"></div> <div id="fb-root"></div> <div class="essb_links essb_counters essb_counter_modern_bottom essb_displayed_sidebar essb_share essb_template_default-retina essb_112975927 essb_button_animation13 print-no" id="essb_displayed_sidebar_112975927" data-essb-postid="2015" data-essb-position="sidebar" data-essb-button-style="button" data-essb-template="default-retina" data-essb-counter-pos="bottom" data-essb-url="/" data-essb-twitter-url="/" data-essb-instance="112975927"> </div> <div align="center"> </div> <link rel='stylesheet' id='wp-subscribe-css' href='/wp-content/plugins/wp-subscribe-pro/assets/css/wp-subscribe-form.css' type='text/css' media='all' /> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/rating-form/assets/js/front.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "0", "visibility_show": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0421\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/wp-polls/polls-js.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "true", "lightbox_all": "", "lightbox_gallery": "", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "true", "sticky_sidebar": "1", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "true", "lang_no_results": "\u041d\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432", "lang_results_found": "\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430" }; /* ]]> */ </script> <script type='text/javascript' src='https://pcwe.ru/wp-content/themes/sahifa/js/tie-scripts.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/themes/sahifa/js/ilightbox.packed.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/themes/sahifa/js/search.js'></script> <script type='text/javascript' src='https://pcwe.ru/wp-content/plugins/wp-subscribe-pro/assets/js/wp-subscribe-form.js'></script> <div class="dgd_overlay"></div> <link rel="stylesheet" id="essb-cct-style" href="/assets/styles1.css" type="text/css" media="all" /> </body> </html>