Списки в любом тексте позволят сделать ваш документ более четким, организованным и структурированным. Всего вы можете создать три типа списков: маркированные, нумерованные и многоуровневые. В этой статье мы расскажем о том, как создать многоуровневые списки в Ворде.
Многоуровневые списки являются иерархическими, то есть имеют несколько степеней вложения. Вдобавок к нескольким встроенным в текстовый редактор шаблонам, вы можете создать свой собственный список на основе персональных кастомизированных настроек.
Как создать многоуровневый список в Word 2016, 2013, 2010, 2007?
Итак, открываем Word и нажимаем соответствующую кнопку на ленте, позволяющую создать многоуровневый список.
Теперь выбираем один из шаблонов, который мы желаем применить для списка. Как вы сами увидите, тут будут представлены списки как с цифровой, так и с буквенной нумерацией в строго заданной иерархии, так что выбор здесь довольно широк.
Если вы желаете создать свой собственный список на основе заданных вручную параметров, выберите элемент меню «Определить новый многоуровневый список». Откроется форма для задания параметров списка.
На этой форме вы можете изменить любой иерархический уровень и его представление в документе, указать для него нумерацию и формат номера, а также задать такие параметры, как выравнивание и отступ. Чтобы получить доступ к дополнительным параметрам, нажмите кнопку «Больше» в нижнем левом углу.
В частности, среди таких вспомогательных настроек есть связка уровня списка со стилем заголовка. Воспользоваться ей будет особенно актуально, если вы находитесь в процессе создания структуры разделов документа и после этого планируете в автоматическом порядке создать оглавление.
Теперь несколько слов о том, как работать с многоуровневым списком. Чтобы перейти на новый вложенный уровень, установите курсор в соответствующую строку списка и нажмите кнопку «Увеличить отступ». В результате в списке будет сгенерирован новый подуровень, то есть элемент списка будет смещен на один уровень вниз. Чтобы вернуться на один уровень назад в иерархии, нажмите кнопку «Уменьшить отступ».
Как создать многоуровневый список в Word 2003?
В старых версиях Ворда кнопка для создания многоуровневого списка на панели инструментов по умолчанию отсутствует. Чтобы создать там список, придется обратиться к верхнему меню. Выберем категорию «Формат» и отметим элемент «Список» в верхней части меню.
Откроется форма с выбором списков, доступных для создания. Остановимся на варианте «Многоуровневый».
В последующем процедура создания списка полностью аналогична описанной ранее. В дополнение к этому, точно таким же образом вы можете пользоваться кнопками «Увеличить отступ» и «Уменьшить отступ» для навигации по вложенной структуре списка.
Многоуровневые списки – важная составляющая любого цельного и сложного документа. Без них создание оглавления, к примеру, превратилось бы и вовсе в непосильную задачу.
Показать видеоинструкциюПри написании текстов иногда приходится использовать такой способ оформления как списки. Чаще всего это могут быть какие-то перечисления однородных элементов или перечни не связанных между собой элементов. Вначале разберем создание простых списков, а затем узнаем как в word сделать многоуровневый список на основе простого.
Список – это фрагмент текста, оформленного особым способом. Каждый элемент списка пишется с новой строки и содержит либо графический маркер, либо символьный или цифровой маркер.
Списки позволяют удобно структурировать материал. Маркированные списки визуально выделяют часть текста, а нумерованные - позволяют объединить даже слабо связанные между собой пункты. Все эти списки могут быть еще и многоуровневыми.
Создание простого списка
В ленте инструментов на вкладке Главная есть раздел Абзац . Он содержит необходимые кнопки работы со списками. Смотрите рисунок.
- Создание маркированного списка. При нажатии на треугольник справа доступен выбор вида графических маркеров списка.
- Создание нумерованного списка. При нажатии на треугольник справа доступен выбор вида нумерации списка.
- Создание многоуровнего списка. Можно выбрать разные варианты оформления.
- Уменьшение отступа списка от границы поля документа до начала абзаца.
- Увеличение отступа списка от границы поля документа до начала абзаца.
- Изменение междустрочного расстояния между элементами списка.
Существует несколько вариантов включения оформления списков, но я рекомендую воспользоваться следующим:
- Наберите текст будущего списка целиком, отбивая каждый новый элемент списка абзацем (нажимаем клавишу Enter).
- После ввода последнего элемента списка сделайте пустой абзац, нажатием клавиши Enter. Это необходимо, чтобы предотвратить применения списка к последующему тексту.
- Выделите все строки с элементами списка и нажмите кнопку для применения соответствующего вида списка.
Если вы выбрали не тот вид списка, то выделите его элементы заново и нажмите кнопку с требуемым видом списка.
Обратите внимание! Выделение нужно начинать с первого символа текста элементов списка, а не с маркера.
Изменение расстояния от маркера до текста
При создании списков может возникнуть ситуация, когда маркеры слишком сильно приближены к тексту или стоят далеко от них. Для исправления положения маркера можно воспользоваться инструментами горизонтальной линейки.
Отступ первой строки (7)
– перемещает маркер влево или вправо относительно элемента списка.
Выступ (8)
– перемещает элемент списка влево или вправо относительно маркера.
Отступ слева (9)
– перемещает маркер и элемент списка влево или вправо.
Внимание! Для изменения положения всех маркеров списка, необходимо выделить список. Для изменения положения только в одном элементе списка, достаточно установить текстовый курсор в строку элемента списка.
Создание многоуровнего списка
Многоуровневый список создается также как и простой, только в панели инструментов необходимо нажать кнопку 3
В открывшейся библиотеке выбираете нужный вариант многоуровневого списка. После применения этой операции вы увидите список (маркированный или нумерованный) с виду похожий на простой. Но это только потому, что в данном списке все элементы пока находятся на одном уровне.
И теперь для каждого элемента списка необходимо настроить свой уровень. Для этого поступаем так:
- Кликаем в строку с элементом списка для которого необходимо изменить уровень отступа и нажимаем кнопку 5 (см. рисунок "Инструменты для работы со списками").
- Кликаем в следующую строку и снова нажимаем кнопку 5 (можно нажать несколько раз, чтобы увеличить уровень отступа).
Практическая часть
Для закрепления навыков по форматированию текста выполните следующее задание.
Наберите или в свой текстовый редактор. Создайте из данного текста многоуровневые списки.
Компьютеры и периферия Компьютеры Системные блоки Моноблоки Неттопы и компьютеры-флешки Мониторы и аксессуары Мониторы 4K мониторы Игровые мониторы Видеокабели и переходники
Используя теоретические сведения данной статьи измените текст следующим образом:
- разбейте текст на элементы списка, начиная каждый с нового абзаца,
- сделайте копию полученного текста,
- примените к первому тексту маркированный список, а ко второму - нумерованный,
- настройте уровни элементов списка.
Дорогой читатель! Вы посмотрели статью до конца.
Получили вы ответ на свой вопрос? Напишите в комментариях пару слов.
Если ответа не нашли, укажите что искали .
Чтобы создать в Word форму, которую смогут заполнять другие люди, начните с шаблона и добавьте к нему элементы управления содержимым. К таким элементам относятся, например, флажки, текстовые поля, элементы выбора даты и раскрывающиеся списки. Если вы знакомы с базами данных, вы можете даже связывать элементы управления содержимым с данными.
Создание заполняемых форм начинается с шести основных шагов. Рассмотрим эти шаги по порядку.
Шаг 1. Отображение вкладки "Разработчик".
Шаг 2. Открытие шаблона или документа, на основе которого будет создана форма
Чтобы сэкономить время, за основу для формы можно взять шаблон. Если хотите начать с нуля, возьмите пустой шаблон.
Создание формы на основе шаблона
Щелкните вкладку Файл .
Щелкните Создать .
В поле Поиск шаблонов в сети введите тип формы, которую вы хотите создать, и нажмите клавишу ВВОД.
Щелкните шаблон формы, который вы хотите использовать, а затем нажмите кнопку Создать .
Использование пустого шаблона
Щелкните вкладку Файл .
Нажмите кнопку Создать .
Выберите Новый документ .
Шаг 3. Добавление содержимого в форму
На вкладке Разработчик нажмите кнопку Режим конструктора и вставьте нужные вам элементы управления.
Примечание: Форму с элементами управления содержимым можно распечатать, однако поля вокруг них напечатаны не будут.
Вставка элемента управления текстом, куда пользователи могут вводить текст
В элементе управления содержимым "форматированный текст" пользователи могут выделять текст полужирным шрифтом или курсивом, а также вводить несколько абзацев текста. Чтобы ограничить возможности пользователей, вставьте элемент управления содержимым "обычный текст".
Вставка элемента управления "рисунок".
Элемент управления "рисунок" часто используется в шаблонах, однако его можно добавить и в форму.
Щелкните в том месте, где вы хотите вставить элемент управления.
На вкладке Разработчик щелкните Элемент управления содержимым "рисунок" .
Чтобы задать свойства элемента управления, см. .
Вставка элемента управления "стандартный блок"
Используйте стандартные блоки, когда хотите предоставить пользователям возможность выбрать определенный блок текста. Например, эти элементы управления полезны, когда создается шаблон договора, в котором в зависимости от конкретных требований нужно добавить разные варианты стандартного текста. Вы можете создать для каждого варианта элемент управления содержимым "форматированный текст" и поместить их все в элемент управления "стандартный блок", который будет служить контейнером.
Элементы управления "стандартный блок" также можно использовать в формах.
Чтобы задать свойства элемента управления, см. .
Вставка поля со списком или раскрывающегося списка
В поле со списком пользователи могут выбрать один из предложенных вами пунктов или ввести собственный вариант. В раскрывающемся списке пользователи могут только выбрать один из имеющихся пунктов.
Вставка элемента управления "выбор даты"
Щелкните в том месте, где нужно вставить элемент управления "выбор даты".
На вкладке Разработчик щелкните Элемент управления содержимым "выбор даты" .
Чтобы задать свойства элемента управления, см. .
Вставка флажка
Щелкните в том месте, где нужно вставить элемент управления "флажок".
На вкладке Разработчик щелкните Элемент управления содержимым "флажок" .
Чтобы задать свойства элемента управления, см. .
Шаг 4. Установка или изменение параметров элементов управления содержимым
У каждого элемента управления содержимым есть параметры, которые можно установить или изменить. Например, для элемента управления "Выбор даты" вы можете выбрать различные форматы отображения даты.
Щелкните элемент управления содержимым, который вы хотите изменить.
На вкладке Разработчик щелкните Свойства и измените свойства нужным вам образом.
Шаг 5. Добавление в форму пояснительного текста
Пояснительный текст может сделать форму, которую вы создаете и распространяете, более удобной в использовании. Пояснительный текст, который показывается по умолчанию в элементе управления содержимым, можно изменить.
На вкладке Разработчик нажмите кнопку Режим конструктора .
Щелкните элемент управления содержимым, у которого вы хотите изменить замещающий пояснительный текст.
Отредактируйте и отформатируйте замещающий текст.
На вкладке Разработчик нажмите кнопку Режим конструктора , чтобы отключить возможность конструирования и сохранить пояснительный текст.
Примечание: Не устанавливайте флажок Содержимое нельзя редактировать , если хотите, чтобы пользователи формы заменяли пояснительный текст своим собственным.
Шаг 6. Защита формы
Если вы хотите ограничить возможности редактирования или форматирования формы пользователями, воспользуйтесь командой Ограничить редактирование .
Откройте форму, которую хотите заблокировать или защитить.
Щелкните Главная > Выделить > Выделить все или нажмите сочетание клавиш CTRL+A.
Щелкните Разработчик > Ограничить редактирование .
После выбора ограничений нажмите кнопку Да, включить защиту .
Совет: При желании вы можете проверить форму, перед тем как распространять ее. Откройте и заполните форму, а затем сохраните ее копию в нужном месте.
Договорные отношения давно и прочно закрепились в нашей жизни, договора встречаются везде и повсеместно, практически ничто уже не обходится без заключения какого-либо договора. Предоставление услуг, выполнение работ, поставка материальных ценностей, аренда имущества, купля-продажа и многое другое - все это договоры. Договоры, как правило, составляются юристами и учитывают все нюансы той или иной деятельности. Кураторы же имеют дело с типовыми формами договоров и производят с ними однотипные, повторяющиеся действия, которые можно и нужно автоматизировать.
Итак, менеджеры или кураторы договоров, используя текстовый редактор, (например Microsoft Word) вносят изменения в типовые формы, шаблоны, корректируя определенные поля, такие как номер и дата договора, наименование контрагента, стоимость договора, паспортные данные, банковские реквизиты. При этом пересчитываются различные суммы, такие например как НДС, кстати суммы в договорах зачастую дублируются прописью. Для составления преамбулы договора, такие параметры как имена, фамилии и должности склоняются в различные падежи. Все это требует повышенного внимания и приводит к зрительным нагрузкам. Чем объемнее договор, чем больше в нем различных форм и приложений, тем сильнее желание автоматизировать его заполнение.
Надстройка для автоматизированного заполнения договоров в Word
Автоматическое заполнение договоров можно реализовать различными способами, но подробнее остановиться хотелось бы на наиболее удобном и доступном. И как ни странно такой способ заложен в самом текстовом редакторе Microsoft Word. Встроенный в редактор язык программирования Visual Basic for Application позволяет успешно автоматизировать рутинные задачи, к которым несомненно можно отнести и заполнение договоров. Видов договоров множество: договор подряда, договор поставки, договор аренды, договор купли-продажи, договор комиссии, кредитный договор и многое другое, но все они имеют приблизительно одинаковые поля для заполнения. Если эти поля разметить специальным образом в шаблоне договора, а необходимую информацию запросить у пользователя через диалоговое окно, то впоследствии можно программно заменить эти поля на необходимую информацию.
При этом часть рутинной работы пользователю выполнять все-таки придется при внесении данных в специальную форму - диалоговое окно, но лишь часть, все остальное будет делать уже машина. Запуск надстройки, вызов диалогового окна осуществляется нажатием кнопки, выведенной в меню, либо на ленту, в зависимости от приложения.
Использовать систему для ускоренного заполнения полей договора проще, чем кажется на первый взгляд. Для начала нужно определиться с теми параметрами, которые будут запрашиваться у пользователя надстройки и выбрать наиболее подходящую конфигурацию надстройки. Далее необходимо скачать и установить надстройку для Word по заполнению договоров. Предварительно разметить свой шаблон договора метками, описанными в документации к надстройке. Открыть шаблон договора и вызвать диалоговое окно надстройки. Затем заполнить поля диалогового окна (вручную заполняется только часть полей, другая часть формируется автоматически, например суммы, написанные прописью и даты) и запустить программу нажатием кнопки "OK".
Автоматическое заполнение договора между двумя юридическими лицами
В случае заключения договора между юридическими лицами изменяемыми (запрашиваемыми у пользователя в диалоговом окне) являются: наименования организаций, фамилии их представителей, адреса и банковские реквизиты. Различаться также могут суммы, валюты и налоговые ставки. Все эти параметры договора вынесены для заполнения на специальную форму - диалоговое окно.
В надстройке реализован выбор валюты (по умолчанию установлены рубли), преобразование даты, автоматический подсчет НДС с округлением до двух знаков после запятой (при наличии этого налога), автоматическое написание суммы договора и налога прописью, автоматическое распознавание пола подписанта по имени и отчеству с последующим склонением в родительный падеж (для преамбулы) должности, фамилии, имени и отчества. Если в данных подписантов вместо полных имен используются инициалы, то программе будет необходима подсказка пола подписанта при помощи опции М/Ж. После автоматического заполнения полей сформированный договор сохраняется под уникальным именем в папку, в которой хранится шаблон.
На практике чаще используется упрощенная модель надстройки, когда "свои" реквизиты указываются в тексте договора и изменениям не подлежат, а в диалоговом окне запрашиваются только данные контрагента.
видео по работе с надстройкой
Автоматическое заполнение договора между юридическим и физическим лицом
Договоры между юридическими и физическими лицами отличаются наличием паспортных данных одной из сторон. Отсюда и несколько другой набор полей в диалоговом окне, где кроме паспортных данных присутствуют адреса и телефоны. В остальном все механизмы аналогичны описанным в предыдущем пункте.
Возможности надстроек для заполнения договоров
Надстройки позволяют осуществлять:
1) выбор валюты;
3) автоматический подсчет НДС с округлением до двух знаков после запятой (при наличии этого налога);
4) автоматическое написание суммы договора и налога прописью;
5) автоматическое распознавание пола подписанта по имени и отчеству с последующим склонением в родительный падеж должности, фамилии, имени и отчества (для преамбулы);
*Если в данных подписантов вместо полных имен используются инициалы, то программе будет необходима подсказка пола подписанта при помощи опции М/Ж.
6) автоматическое формирование инициалов подписантов;
7) автоматическое сохранение сформированного договора под уникальным именем в папку, в которой хранится шаблон;
8) импорт данных из диалогового окна в файл Excel;
9) экспорт данных из файла Excel в диалоговое окно.
Аналогичным образом можно настроить заполнение любых шаблонов документов для юристов, нотариусов, бухгалтеров, финансистов, сметчиков, риелторов и многих других.
Универсальная надстройка для Word по заполнению любых документов Word данными из Excel
Договоры, соглашения, доверенности, заказы, заявки, акты, квитанции и многое другое можно автоматически заполнять данными из Excel при помощи универсальной надстройки. Количество изменяемых полей в документе не привязано к полям диалогового окна поэтому пользователь сам определяет их количество и названия для кодов, используемых в шаблонах документов. Для заполнения активного документа Word достаточно указать файл Excel с исходными данными. Помимо этого предусмотрено массовое заполнение документов Word.
- Перевод
Многим известно, что в мобильной версии Safari можно отсканировать свою банковскую карту. Но многие ли разработчики умеют создавать формы, поддерживающие эту возможность?
Готов поспорить, что немногие.
Дело осложняет полное отсутствие документации от Apple по работе этой функции. Но тут есть один момент. Функция сканирования банковских карт является подмножеством автозаполнения - браузерного функционала, давно игнорируемого веб-разработчиками. Понятно, почему они не уделяли ему должного внимания: когда регулярно заполняешь форму тестовыми данными, автозаполнение обычно мешает. Но для наших пользователей это важная функция. В Google выяснили, что при использовании автозаполнения пользователи на 30% быстрее заполняют формы . Так что давайте изучим работу автозаполнения, разберёмся, как создавать формы, поддерживающие кросс-браузерное автозаполнение, и воспользуемся преимуществами новых возможностей наподобие сканирования банковских карт.
Как работает автозаполнение?
До недавнего времени не существовало стандартов, регламентирующих реализацию автозаполнения. В каждом браузере это делалось по-своему, и было доступно очень мало документации, описывающей браузерный механизм определения контента, который нужно внести в то или иное поле.Несмотря на такую анархию, можно выделить два основных подхода:
1. Поля с заранее заданным автозаполнением
Chrome, Opera и Safari обнаруживают наиболее важные поля в форме и позволяют выбирать, какими данными браузер должен автоматически их заполнить. К примеру, Opera умеет автоматически заполнять адреса и реквизиты банковских карт. Эта функциональность настраивается здесь:
Каждый из трёх браузеров имеет свой набор полей, к которым может применить автозаполнение, но поддержка основных полей платёжных форм реализована практически везде.
Для использования автозаполнения большинству пользователей не придётся обращаться к этим настройкам. Браузер отслеживает заполнение человеком форм и, когда распознаёт поля для адреса и реквизитов банковской карты, спрашивает, нужно ли сохранить введённые данные для последующего использования.
2. Автозаполнение любых полей
Если предыдущий подход можно сравнить со скальпелем, применяемым к заранее выбранным полям, то этот сродни бензопиле, режущей всё на своём пути.
Microsoft Edge и Firefox после отправки заполненной формы сохраняют все введённые данные вместе со значением атрибута name . Если в будущем браузер встретит поле с таким же атрибутом name , то к нему будет применено автозаполнение. В дополнение к name Firefox также обращает внимание на атрибут id .
У этого подхода есть проблемы с безопасностью и приватностью, поэтому давно поддерживается значение off , отключающее автозаполнение, чтобы браузер не хранил и автоматически не заполнял деликатную информацию.
Какой подход лучше?
Хотя второй подход позволяет работать с большим количеством полей, я как разработчик предпочитаю вариант с заранее заданными полями. Так гораздо проще определять, какую информацию должен заполнять браузер, да и легче настраивать тестовые профили.
Кроме того, при втором подходе вам нужно сначала отправить заполненную форму, чтобы браузер сохранил у себя данные для последующего автозаполнения. Без отправки он не запомнит введённую вами информацию. Также мне неприятно думать, что браузер может хранить реквизиты моей банковской карты в незашифрованном виде, если не определит тип поля.
Разумеется, Microsoft и Mozilla заинтересованы в обеспечении безопасности и приватности, и я уверен, что они предусмотрели какие-то защитные механизмы. Но лично мне гораздо спокойнее видеть в настройках браузера, что он распознаёт и чётко отделяет данные по банковской карте.
Учитывая всё сказанное, я не знаю предпочтений конечных пользователей. Вторая система может применяться шире, но я видел немало обращений в службу поддержки, когда люди пытались убрать данные автозаполнения из истории браузера.
Будет интересно посмотреть, как изменятся Edge и Firefox после того, как начнут поддерживать новый стандарт автозаполнения.
Поведение, которое нужно отслеживать
Иногда браузерам требуется более одного поля определённого типа, чтобы предложить вам варианты автозаполнения. Например, ниже показано, как Safari не станет автоматически заполнять одиночное поле имени владельца банковской карты, но если рядом есть поле для номера карты, то браузер предложит это сделать.
Тем не менее, если присутствует только поле номера карты, Safari предложит его заполнить. Согласно моему опыту, из-за этого поведения браузера бывает непросто тестировать отдельные ситуации с одиночными полями. Однажды во время тестирования я столкнулся с тем, что Opera потребовала наличия трёх полей для применения автозаполнения, но больше мне не удалось воспроизвести такое поведение.
Если ваша форма создана с поддержкой автозаполнения (об этом ниже), то пользователи не должны встречаться с такими ситуациями. Я просто упоминаю это на случай, если вы также встретите подобные странности в процессе отладки и тестирования автозаполнения.
Использование стандартов при реализации автозаполнения
К счастью, ситуация с автозаполнением улучшается. Недавно в HTML5 был расширен атрибут autocomplete , подсказывающий браузеру, какие данные нужно вводить в разные поля. Этот атрибут существует уже несколько лет и сначала мог принимать два значения: on и off . По умолчанию autocomplete имеет значение on , то есть браузер может сохранять отправленные данные и автоматически заполнять поля. Но для некоторых полей автозаполнение нежелательно. В этом случае атрибуту autocomplete можно присвоить значение off , говорящее браузеру, что это поле заполнять не надо.Недавно были добавлены новые значения атрибута - autofill detail tokens . Эти токены помогают браузеру понять, какая информация нужна для заполнения поля.
Один из типов токенов называется autofill field names (наименования полей автозаполнения) . Они говорят браузеру, какой тип информации вводится в поле. К примеру, один из токенов этого типа - organization . Вот что о нём сказано в спецификации HTML5:
Наименование компании, относящееся к человеку, адресу или контактной информации в других полях, связанных с этим полем.
Пример поля с автоматическим заполнением названия организации будет выглядеть так:
В спецификации HTML5 есть огромная таблица, где перечислены все 53 возможных наименования поля автозаполнения , указано их назначение и типы инпутов, с которыми их можно использовать.
Это простейший вид автозаполнения, но оно становится мощнее и сложнее.
Доставка и биллинг
Значением атрибута autocomplete является разделённый пробелами список токенов. К примеру, если вы хотите собрать данные для доставки товара, то перед значением атрибута нужно добавить токен shipping:
Токен billing работает точно так же, как shipping .
Телефоны, электронная почта и ники в мессенджерах
Для номеров телефонов, адресов электронных почт и ников в мессенджерах используется другой вариант токена. Для таких случаев предусмотрен опциональный токен, обозначающий, что в поле нужно ввести номер домашнего (home), рабочего (work), мобильного (mobile) телефона, факса (fax) или пейджера (pager).
Например:
Общие и уточняющие наименования полей автозаполнения
Для многих типов информации в спецификации определены общие (broad) и уточняющие (narrow) наименования полей автозаполнения. Скажем, в дополнение к единственному полю для ввода номера телефона tel можно использовать:
- tel-country-code
- tel-national
- tel-area-code
- tel-local
- tel-local-prefix
- tel-local-suffix
- tel-extension
В целом авторам рекомендуется использовать общие наименования, а не уточняющие, поскольку последние навязывают западные стандарты. Например, в ряде стран принято сначала писать имя, а потом фамилию, в то время как во многих других странах принято писать наоборот - сначала фамилию, потом имя. Также немало стран, где используется одно лишь имя (мононим). Поэтому использование одного поля ввода является более гибким подходом.
Я согласен с этой рекомендацией. С практической точки зрения это означает, что важно уделять внимание таблице значений и выбирать правильное наименование для каждого поля.
Разделы (Sections)
Последним свойством новых токенов атрибута autocomplete является возможность назначать групповым полям произвольные разделы. Он определяется с помощью токена, начинающегося с section- . После дефиса можете писать что угодно. В спецификации приведён такой пример разделов:
Все токены
Итак, теперь у нас есть гораздо более сложный набор токенов для атрибута autocomplete . И здесь важен порядок следования токенов.
Во-первых, вы используете либо значения on и off , либо наименования полей автозаполнения - одновременно и то и другое нельзя.
При использовании токенов автозаполнения они должны следовать в таком порядке:
(optional) (optional) (optional)
Помните, что токены применяются только для полей ввода номеров телефонов, адресов электронных почт и ников.
Самый длинный из возможных наборов токенов автозаполнения может выглядеть так:
Да здравствуют стандарты! На этом всё, правильно?
Боюсь, что нет. Я лелею надежду, что в конце концов все браузеры будут поддерживать расширенный стандарт автозаполнения, но пока это не так. Я протестировал мобильные и настольные версии браузеров, чтобы выяснить текущую ситуацию с поддержкой атрибутов. Вот результаты:| Браузер | Версия | ОС | ID | Name | Autocomplete |
|---|---|---|---|---|---|
| Chrome | 50 | OS X 10.11.4 | Нет | Да | Да |
| Opera | 35 | OS X 10.11.4 | Нет | Да | Да |
| Firefox | 46 | OS X 10.11.4 | Да | Да | Нет |
| Edge | 25 | Windows 10 | Нет | Да | Нет |
| Safari | 9.1 | OS X 10.11.4 | Частично | Частично | Частично |
| Safari | 9 | iOS 9.3.1 | Частично | Частично | Частично |
До сих пор только Chrome и Opera явным образом поддерживают новые возможности автозаполнения. В Safari, судя по всему, реализована частичная поддержка, но из-за отсутствия документации я не могу сказать, сделано ли это намеренно, или в случае с autocomplete , name и другими атрибутами просто осуществляется поиск с помощью регулярных выражений.
Странное поведение Safari
С момента появления в iOS 8 функции сканирования банковских карт веб-разработчики занимаются гаданием на кофейной гуще, стараясь определить, какую комбинацию признаков ищет Safari. Кто-то считает, что в атрибуте name нужно иметь определённые значения . Другие обнаружили, что используются значения в ID . Кажется, даже лейбл имеет значение :Поле для имени владельца карты особенно хитрое. Мы долго игрались с разными ID и почти сдались. Нам не удалось вычислить ID, который заставил бы Card Scan заполнить реквизиты. После многочисленных разочарований мы наконец-то обнаружили, что всё дело в содержании соответствующего элемента label. Как только мы установили лейбл «Name on card», всё волшебным образом заработало.
Я провёл немало тестов и до сих пор не могу с уверенностью утверждать, что полностью разобрался в работе Safari. Тем не менее я всё же пришёл к нескольким основным заключениям:
Autocomplete поддерживается в полях ввода контактов и адреса
Safari распознаёт созданную мной форму, содержащую только атрибуты autocomplete . Как только я начинаю писать в первом поле, браузер предлагает заполнить форму моими контактными данными.
Всё работает, как и должно, но нужно сделать пару пояснений.
Во-первых, неясно, какая информация используется Safari для принятия решения об автозаполнении моих контактов из адресной книги Mac’a. Здесь указана моя должность, а название компании - нет.
Во-вторых, браузер не предлагает на выбор варианты для заполнения. В моих контактах указаны домашний и рабочий адреса, и Safari заполняет только домашний. Так что мне не повезёт, если я захочу заказать доставку в офис.
Автозаполнение платёжных форм работает совершенно ненадёжно
Поведение Safari в корне меняется, когда дело доходит до полей платёжных реквизитов. Атрибут autocomplete игнорируется. Вместо него браузер использует какую-то волшебную эвристику. А поскольку я не маг из Apple, то мне было трудно распознать, что же на самом деле происходит:
Здесь показано, как я отредактировал названия двух полей. В обоих случаях были указаны autocomplete , name и id , чтобы Safari было легче идентифицировать поля. Тем не менее он их не распознавал до тех пор, пока я не использовал в качестве лейблов Name on Card и Credit Card Number . Как уже упоминалось, для активации автозаполнения Safari нужно больше одного поля. Затем я попробовал изменить лейбл на CCNumber, автозаполнение продолжало работать. А вот с подписью CC Number всё сломалось.
Список значений, по которым Safari выполняет поиск, нигде не опубликован. К счастью, Жак Карон смог извлечь этот список строковых значений из эмулятора iOS :
- card number
- cardnumber
- cardnum
- ccnum
- ccnumber
- cc num
- creditcardnumber
- credit card number
- newcreditcardnumber
- new credit card
- creditcardno
- credit card no
- card#
- card #
- security code
- card verification
- name on credit card
- name on card
- nameoncard
- cardholder
- card holder
- name des karteninhabers
- card type
- cardtype
- cc type
- cctype
- payment type
- expiration date
- expirationdate
- expdate
- month
- date m
- date mo
- date y
- date yr
и
срабатывает автозаполнение в Safari и функция сканирования банковской карты в iOS. Но если поместить те же значения в атрибут autocomplete , то работать не будет.
Создание кросс-браузерной автозаполняемой формы
Учитывая всё вышесказанное - действительно ли можно создать форму, поддерживающую автозаполнение в разных браузерах? Я думаю, да.По крайней мере, можно очень близко подойти к этой цели, выполнив четыре шага:
1. Добавьте атрибуты autocomplete
Это будущее автозаполнения. Если браузеры не распознают значения, то они их игнорируют. Это отличный пример прогрессивного улучшения.
2. Используйте для атрибутов name стандартные значения
При реализации автозаполнения в Firefox и Edge вам остаётся надеяться, что выбранные вами значения для атрибута name совпадают с теми, которые используют другие разработчики на своих сайтах. Для этого можно проанализировать популярные сайты и посмотреть, какие там значения. Или можно взять те же значения, что и в атрибуте autocomplete, в надежде, что чем больше веб-разработчиков познакомятся со стандартами, тем чаще будут использовать для своих полей те же наименования.
К сожалению, невозможно гарантировать, что пользователи Firefox и Edge ранее посещали форму, использующую те же самые значения name , что и в вашей форме.
3. Добавьте значения name и/или label в соответствии с используемым в Safari списком
С помощью извлечённого Жаком Кароном списка вы можете изменить значения атрибута name или элемента label , чтобы они соответствовали ожиданиям Safari.
4. Внесите автозаполнение в ваш план тестирования
Недавно я попросил у своих слушателей поднять руки, у кого в плане тестирования есть автозаполнение. Ни у кого не было. Я работаю в веб-разработке с 1996 года и до сих пор не встретил тех, у кого в плане тестирования было бы автозаполнение. Наверное, это какая-то слепая зона разработчиков и дизайнеров. Тем не менее крайне важно тестировать эту функциональность, чтобы удостовериться в её надёжной работе.
Финальная форма
Вот пример формы, поддерживающей автозаполнение в Chrome, Safari, Opera, Firefox и Edge:
Чтобы увидеть её работу, вам нужно , в противном случае браузер не заполнит реквизиты банковской карты. Я также сделал форму с 53 полями по спецификации autocomplete . Пока что ни один браузер не поддерживает все эти поля.
Будущее автозаполнения и форм
Разработчики браузеров активно работают над проблемой веб-платежей. Mozilla, Microsoft, Google и Facebook совместно создали Payment Request API . Apple участвует в Web Payments Working Group , где обсуждается и Payment Request API. Так что Apple номинально тоже примкнула к этому проекту.Ходят слухи, что сервис Apple Pay будет доступен в мобильном вебе к сезону праздничного шоппинга , так что веб-платежи в этот раз могут получить новый импульс.
Возобновление интереса к упрощению процесса оплаты внушает мне надежду, что в ближайшее время улучшится поддержка autofill detail tokens. Эти токены сильно облегчают создание форм, работающих с автозаполнением.
И самое важное - поддержка автозаполнения сделает заполнение форм менее утомительным для наших пользователей, что поспособствует росту продаж в сегменте e-commerce.
Теги:
- автозаполнение
- html5
- autofill
Загрузка...
