
- •34. Проектирование, компоновка и представление форм с помощью css
- •Концепции, представленные в этой статье
- •Переопределение правил и маркеров
- •Новые элементы полей формы
- •Изменения относительно предыдущей формы
- •Очевидные недостатки
- •Новые поля форм? Что это?
- •Когда слишком много вариантов выбора: select/option
- •Объединение последовательности элементов управления: fieldset
- •Начинаем с самого начала, заканчиваем готовой формой
- •Демонстрация 1
- •Демонстрация 1: сопутствующие рассмотрения
- •Демонстрация 2
- •Демонстрация 2: сопутствующие рассмотрения
- •Демонстрация 3
- •Демонстрация 3: сопутствующие рассмотрения
- •Создание сетки
- •Создание структуры сетки в композиции
- •Реализация сетки в таблице стилей
- •Демонстрация 4
- •Демонстрация 4: сопутствующие рассмотрения
- •Правило третей
- •Демонстрация 5
- •Демонстрация 5: сопутствующие рассмотрения
- •Демонстрация 6
- •Демонстрация 6: сопутствующие рассмотрения
- •Демонстрация 7
- •Демонстрация 8
- •Демонстрация 8: сопутствующие рассмотрения
- •Демонстрация 9
- •Демонстрация 9: сопутствующие рассмотрения
- •Демонстрация 10
- •Демонстрация 10: сопутствующие рассмотрения
- •Демонстрация 11
- •Демонстрация 11: сопутствующие рассмотрения
- •Демонстрация 12
- •Демонстрация 12: сопутствующие рассмотрения
- •Создание уровней поддержки платформы
- •Сложные компоновки форм на практике (… вместо теории)
- •Заключение
- •Контрольные вопросы
- •Библиография
- •Об авторе
Контрольные вопросы
Какой тип обтекания у элементов управления формы, которые принимают ввод пользователя, и какие две характеристики делают их выделяющимися в отношении компоновки?
Какие два атрибута отличные от value и disabled управляют настройками элементов управления формы до взаимодействия пользователя, и к каким элементам они применяются?
Документ демонстрации обеспечивает требуемые поля. Напишите, по крайней мере, одно правило таблицы стилей, которое будет разом изменять внешний вид поля, которое содержит образец ошибки или пропуск ввода пользователя.
Опишите по одному случаю использования для каждого из элементов управления select, checkbox, и radio. Обоснуйте каждое описание объяснением преимуществ, которое предоставляет сделанный выбор, при сравнении с другими возможными вариантами выбора.
Используя сетевую ссылку, выбранную инструктором, найдите и кратко опишите альтернативы для input type="submit".
Создайте элемент select, который позволяет выбрать несколько options, добавляя пару атрибут/значение multiple="multiple". После анализа поведения этого элемента, объясните, почему он редко встречается на производственных сайтах.
Таблица: преобразование простых дробей в десятичные
В следующей таблице цифры, находящиеся в скобках со звездочкой после них, бесконечно повторяются; например, 0.2(6*) эквивалентно 0.266666666666666… (6 повторяется бесконечно).
Ближайшие к нулю значения находятся в таблице слева, и приближаются к единице в таблице при движении слева направо.
x |
1/x |
2/x |
3/x |
4/x |
5/x |
6/x |
7/x |
8/x |
9/x |
10/x |
11/x |
12/x |
13/x |
14/x |
15/x |
2 |
.5 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
3 |
.(3*) |
.(6*) |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
4 |
.25 |
.5 |
.75 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
5 |
|
.4 |
.6 |
.8 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
6 |
.1.(6*) |
..3*) |
.5 |
.(6*) |
.8(3*) |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
7 |
.(142857*) |
.(285714*) |
.(428571*) |
.(571428*) |
.(714285*) |
.(857142*) |
- |
- |
- |
- |
- |
- |
- |
- |
- |
8 |
.125 |
.25 |
.375 |
.5 |
.625 |
.75 |
.875 |
- |
- |
- |
- |
- |
- |
- |
- |
9 |
.(1*) |
.(2*) |
.(3*) |
.(4*) |
.(5*) |
.(6*) |
.(7*) |
.(8*) |
- |
- |
- |
- |
- |
- |
- |
10 |
.1 |
.2 |
.3 |
.4 |
.5 |
.6 |
.7 |
.8 |
.9 |
- |
- |
- |
- |
- |
- |
11 |
.(09*) |
.(18*) |
.(27*) |
.(36*) |
.(45*) |
.(54*) |
.(63*) |
.(72*) |
.(81*) |
.(90*) |
- |
- |
- |
- |
- |
12 |
.08(3*) |
.1(6*) |
.25 |
.(3*) |
.41(6*) |
.5 |
.58(3*) |
.(6*) |
.75 |
.8(3*) |
.91(6*) |
- |
- |
- |
- |
13 |
.(076923*) |
.(153846*) |
.(230769*) |
.(307692*) |
.(384615*) |
.(461538*) |
.(538461*) |
.(615383*) |
.(692307*) |
.(769230*) |
.(846153*) |
.(923076*) |
- |
- |
- |
14 |
.0(714285*) |
.(142857*) |
.2(142857*) |
.(285714*) |
.3(571428*) |
.(428571*) |
.5 |
.5(714285*) |
.6(428571*) |
.(714285*) |
.7(857142*) |
.(857142*) |
.9(285714*) |
- |
- |
15 |
.0(6*) |
.1(3*) |
.2 |
.2(6*) |
.(3*) |
.4 |
.4(6*) |
.5(3*) |
.6 |
.(6*) |
.7(3*) |
.8 |
.8(6*) |
.9(3*) |
- |
16 |
.0625 |
.125 |
.1875 |
.25 |
.3125 |
.375 |
.4375 |
.5 |
.625 |
.625 |
.6875 |
.75 |
.8125 |
.857 |
.9375 |