Jeśli czytasz ten tekst, korzystasz z sieci WWW. Twoje formularze mogą być używane przez osoby mówiące w różnych językach, Osoby z różnych krajów i mieszkające w różnych kulturach. Dowiedz się, jak przygotować formularz pod kątem internacjonalizacji i lokalizacji.
Sprawdzanie, czy formularz działa w różnych językach
Zobaczmy, jak sprawdzić, czy formularz będzie działał w różnych językach.
Pierwszym krokiem do dostosowania witryny do lokalizacji jest zdefiniowanie atrybutu języka lang
w elemencie <html>
.
Ten atrybut umożliwia czytnikom ekranu wywoływanie prawidłowej wymowy.
i ułatwia przeglądarkom tłumaczenie strony, jeśli zdefiniowany język nie jest domyślnym językiem przeglądarki.
<html lang="en-us">
Więcej informacji o atrybucie lang
.
Załóżmy, że przetłumaczyłeś formularz na niemiecki.
Jak możesz się upewnić, że wyszukiwarki i przeglądarki wiedzą o przetłumaczonej wersji?
W elemencie <head>
Twojej witryny możesz dodać elementy <link>
opisujące alternatywne wersje.
<link rel="alternate" title="The form element"
href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
href="https://example.com/de/form" hreflang="de">
Pomóż użytkownikom, którzy mówią w innym języku, korzystać z formularza
Nie możesz przetłumaczyć formularza na każdy język, ale możesz mieć pewność, że narzędzia do tłumaczenia przetłumaczą je za Ciebie.
Aby narzędzia do tłumaczenia przetłumaczyły cały tekst w formularzu, sprawdź, czy cały tekst jest zdefiniowany w kodzie HTML i jest widoczny. Niektóre narzędzia obsługują również treść określoną w języku JavaScript, ale aby poprawić zgodność, postaraj się umieścić w kodzie HTML jak najwięcej tekstu.
Zadbaj o to, aby Twój formularz działał w różnych systemach pisania
W różnych językach używane są różne systemy pisania i zestawy znaków. Niektóre skrypty są pisane od lewej do prawej, a inne od prawej do lewej.
Stosuj odstępy niezależnie od systemów pisania
Aby mieć pewność, że formularz będzie działał w różnych systemach pisania, możesz użyć właściwości logicznych CSS.
Grubość obramowania wynosi 1px
po każdej stronie,
z wyjątkiem lewej strony, której grubość ma 4px
grubości.
Edytuj CodePen i zmień system pisma na od prawej do lewej
dodając dir="rtl"
do elementu <main>
Grube obramowanie jest teraz po prawej stronie. Wynika to z tego, że zdefiniowaliśmy granicę za pomocą właściwości logicznej.
input {
border-inline-start-width: 4px;
}
Dowiedz się więcej o właściwościach logicznych.
Upewnij się, że formularz obsługuje różne formaty imion i nazwisk
Załóżmy, że masz formularz, w którym użytkownik powinien wpisać swoje imię i nazwisko. Jak dodać to pole do formularza?
Możesz dodać jedno pole na imię i jedno na nazwisko. Nazwy są jednak inne na całym świecie, np. niektórzy nie noszą nazwiska. Jak więc mogą wypełnić pola nazwiska?
Aby przyspieszyć i ułatwić wpisywanie nazw – oraz aby każdy mógł podać swoje imię, niezależnie od – tam, gdzie to możliwe, używaj jednego pola formularza.
Dowiedz się więcej o osobistych imionach i nazwiskach.
Jeśli masz imię, które zawiera znaki inne niż łacińskie,
mógł wystąpić problem z podaniem w niektórych formularzach Twojego imienia i nazwiska jako invalid
. Gdy
formularze tworzenia, upewnij się, że są dozwolone wszystkie możliwe znaki – i nie zakładaj, że nazwa składa się tylko z
znaków łacińskich.
Zezwalaj na różne formaty adresów
Siedziba główna Google znajduje się pod adresem 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.
Adres obejmuje ulicę, ulicę, miasto, stan, kod pocztowy i kraj. W Twoim kraju format adresu może być zupełnie inny. Co możesz zrobić, aby każdy mógł podać swój adres w formularzu?
Jednym ze sposobów jest użycie ogólnych danych wejściowych.
Dowiedz się więcej o innych sposobach współpracy pola adresów międzynarodowych.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat internacjonalizacji i lokalizacji
Jak włączyć prawidłową wymowę w przypadku czytników ekranu?
lang
.language
.hreflang
.Jak możesz zmienić system pisania w swojej witrynie?
<link>
.direction
.dir
.Zasoby
- Artykuły i samouczki poświęcone internacjonalizacji W3C
- Kompulsywny przewodnik po adresach pocztowych Franka zawiera przydatne linki i obszerne wskazówki dotyczące formatów adresów w ponad 200 krajach.
- DataHub.io to narzędzie do pobierania kodów i nazw krajów.