Safari

Проектирование форм

Есть множество настроек, которые вы можете сделать для вашей формы так, чтобы она лучше работала на iOS. Формы должны вписываться в экран iOS, особенно если вы разрабатываете веб-приложения специально для iOS. Веб-приложения могут иметь богатый пользовательский интерфейс и даже выглядеть для пользователей как нативные приложения. Следовательно, пользователь может ожидать, что они будут вести себя как нативные приложения.

Здесь описывается, что вы можете сделать, чтобы ваши формы хорошо работали на iOS:

  • Примите во внимание экранное пространство, когда клавиатура отображается и не отображается.
  • Используйте CSS расширения для создания пользовательских элементов управления.
  • Контролируйте автоматическую коррекцию и использование преобразования регистра.
 

Оформление внешнего вида формы

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

Следующий рисунок показывает расположение элементов управления Safari, при отображении клавиатуры на iPhone 4.Строка состояния, которая появляется в верхней части экрана содержит информацию о времени и Wi-Fi индикатор. Поле с URL отображается под строкой состояния. Клавиатура используется для ввода текста в формах и отображается в нижней части экрана. Ассистент по созданию форм появляется над клавиатурой при редактировании форм. Он содержит кнопки "Назад", "Вперед", и "Готово". Пользователь нажимает кнопки Вперед и Назад для перемещения между элементами формы. Пользователь нажимает Готово, чтобы закрыть клавиатуру. Панель инструментов содержит кнопки назад, вперед, закладки и страницы и появляется в нижней части экрана. Панель инструментов не видна, когда клавиатура видима. Ваша веб-страница отображается в области ниже текстового поля URL и выше панели инструментов или клавиатуры.

 

Настройка элементов управления формы

Элементы управления в Safari на iOS не зависят от разрешения и могут быть оформлены в CSS специально для iOS. Можно создавать пользовательские флажки, текстовые поля и элементы выбора.

Например, вы можете создать собственный флажок предназначенный для iOS, как показано на рисунке. В этом примере используется свойство -webkit-border-radius расширение Apple для WebKit.

-webkit-border-radius example checkbox
{
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50px;
   background-color: purple;
}
 

Настройка автоматической коррекции и преобразования регистра

Вы также можете контролировать или нет автоматическое исправление или преобразования регистра используемые в форме на iOS. Установите атрибут autocorrect в on, если вы хотите включить автоматическую коррекцию и атрибут autocapitalize в соответствующее значение, если требуется автоматическое преобразование регистра. Если вы не установите эти атрибуты, то браузер выбирает, следует ли использовать автоматическую коррекцию или преобразование регистра. Например, на iOS Safari переключает autocorrect и autocapitalize атрибуты в off в полях Login, а в нормальных текстовых полях в on.

Примеры:

<input type="text" name="field1" autocorrect="on" />
<input type="text" name="field2" autocorrect="off" />

В iOS 5.0, autocapitalize атрибут позволяет более точно управлять тем, как ведет себя автоматическое преобразование регистра, чем простое указание on и off значений. Например, если autocapitalize имеет значение words, каждое слово преобразуется, как в "Иванов Иван", и подходит для поля ввода имени. Если autocapitalize принимает characters, каждая буква будет заглавной, как в "NY" и "CA", и подходят для поля ввода штата.

Пример:

<form autocapitalize="words">
    First Name: <input name="first-name">
    Last Name: <input name="last-name">
    State: <input name="state" autocapitalize="characters">
    Username: <input name="username" autocapitalize="none">
    Comment: <textarea name="comment" autocapitalize="sentences"></textarea>
</form>
 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac