Мультиязычные формы
Какой наилучший способ работы с формами, включающими в себя несколько языков?
Ответ
Наилучшим способом работы с особенностями кодировок в (X)HTML является хранение ваших страниц в UTF-8. Кодировка UTF-8 содержит большой набор символов из различных языков. Браузеры посылают данные из заполненных форм обратно на сервер в той-же кодировке, что и оригинальная страница. Поэтому пользователь может заполнить информацию на любом языке, который ему необходим.
Есть несколько пунктов которые надо проверить для того, чтобы убедиться в работоспособности данного метода у вас. Первым делом, надо указать браузеру что страница написана в UTF-8. Существует ряд способов указания кодировки страницы. Указание кодировки становится особенно важным, когда форма на странице не содержит национальных символов кроме стандартных латинских US-ASCII, но пользователи могут вводить таковые в форму.
Далее, скрипт принимающий данные пользователя должен убедиться что введенные данные действительно в UTF-8 кодировке (на случай если произошла какая либо непредвиденная ситуация, например смена кодировки пользователем). Проверка возможна благодаря тому, что UTF-8 имеет особенную последовательность байт, не встречающуюся в других кодировках. Если от пользователя поступили данные в кодировке отличной от UTF-8, мы должны выдать ему сообщение об ошибке.
Например, в Perl регулярное выражение, проверяющее кодировку пользователя, может выглядеть следующим образом:
$field =~ /\A( [\x00-\x7F] # ASCII | [\xC2-\xDF][\x80-\xBF] # non-overlong 2-byte | \xE0[\xA0-\xBF][\x80-\xBF] # excluding overlongs | [\xE1-\xEC\xEE\xEF][\x80-\xBF] # straight 3-byte | \xED[\x80-\x9F][\x80-\xBF] # excluding surrogates | \xF0[\x90-\xBF][\x80-\xBF] # planes 1-3 | [\xF1-\xF3][\x80-\xBF] # planes 4-15 | \xF4[\x80-\x8F][\x80-\xBF] # plane 16 )*\z/x;
Эта конструкция может быть портирована под другие языки программирования. Она предусматривает обработку различных ошибок связанных с неверным формированием UTF-8. Функция вернет true если переменная $field в UTF-8, и false в противоположном случае.
The above regular expression can be tailored by adding application-related restrictions. As an example, many control characters can be excluded by replacing [\x00-\x7F] with [\x09\x0A\x0D\x20-\x7E] .
Дополнительные материалы
- Authoring HTML & CSS
- Characters
- Choosing and applying a character encoding
- Declaring the character encoding for HTML
Кодировка HTML-страницы
Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.
Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно угадает кодировку, то вместо текста будут отображаться иероглифы.
Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега использовать тег:
Самая распространённая современная кодировка — utf-8 . Используйте её во всех своих проектах.
Для кириллицы в Windows charset часто задавали как windows-1251 . Но сейчас это считается плохой практикой.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 29 января по 1 апреля 2024. До 9 ноября цена 18 900 ₽ 22 900 ₽
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Кодировка HTML-страницы Кодировка
Когда кодировка документа задана неверно, некоторые символы отображаются как «иероглифы», а некоторые нет.
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответСпасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить
Задачи ВыполненоСейчас кодировка задана неверно, поэтому текст в мини-браузере отображается неправильно.
- Установите правильную кодировку: utf-8 .
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
- Наша группа в ВК
- Наша страница в Twitter
- Наш канал в Telegram
Практикум
- Курсы для новичков
- Подписка
- Для команд и компаний
- Учебник по PHP
Профессии
- Фронтенд-разработчик
- JavaScript-разработчик
- Фулстек-разработчик
- HTML и CSS.
Профессиональная вёрстка сайтов - HTML и CSS.
Адаптивная вёрстка и автоматизация - JavaScript.
Профессиональная разработка веб-интерфейсов - JavaScript.
Архитектура клиентских приложений - React.
Разработка сложных клиентских приложений - Node.js.
Профессиональная разработка REST API - Node.js и Nest.js.
Микросервисная архитектура - TypeScript. Теория типов
- Алгоритмы и структуры данных
- Паттерны проектирования
- Webpack
- Vue.js 3. Разработка клиентских приложений
- Git и GitHub
- Анимация для фронтендеров
- Учебник по Git
- Справочник по HTML
- Истории успеха
Информация
- Об Академии
- О центре карьеры