Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств. Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Card
Card
Card
Card
Card
Card
Card
Card
Card
Существует два способа сделать эти div горизонтально прокручиваемыми.
Метод пустого пространства
Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.
Для контейнера нужно отключить вертикальную прокрутку ( overflow-y ) и включить горизонтальную ( overflow-x ). Затем для каждой карточки установим display : inline-block , чтобы они отображались в строке. Свойство CSS, с которым вы, вероятно, не встречались — это white-space : nowrap . Оно используется для управления тем, как текст переносится в контейнере. В данном случае мы хотим отключить перенос с помощью значения nowrap . Четыре строки свойств CSS, и у нас есть горизонтально прокручиваемый контейнер. Как насчет поддержки браузерами? Идеально. Если вы не заботитесь об Internet Explorer или Edge. В Microsoft говорят, что они включат поддержку этого свойства в будущую версию браузера Edge.
Метод Flexbox
Flexbox также может выполнить эту работу.
Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере. Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.
Overflow прокрутка
В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место. К счастью, эту проблему легко решить:
Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:
Полосы прокрутки
По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.
Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!
Большинство элементов добавляется в форму с помощью элемента . Назначение и внешний вид элемента меняются в зависимости от значения атрибута type.
Элемент (текстовая область)
Для создания больших текстовых полей применяется элемент , который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows. cols — число столбцов видимого текста:
rows — число строк видимого текста:
При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка. При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области . Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows. При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly. В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:
Пример: Текстовая область (textarea)
Раскрывающийся список (select)
Элемент создает на веб-странице раскрывающийся список (также называемый раскрывающимся или выпадающим меню), позволяющий выбрать одно значение из множества возможных. Как и в рассмотренных других элементах формы, элементу назначается уникальное имя, с помощью атрибута name. Элемент работает в паре с элементом , создающим меню. Элемент задается для каждого пункта меню. Текст, расположенный между тегами и , будет выведен в окне браузера как пункт раскрывающегося списка. Атрибут value используется в каждом элементе для установки значения, которое будет отправлено на сервер вместе с именем выбранного элемента. Указав для элемента атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка. Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:
По умолчанию с помощью тега создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт. Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши Shift или Ctrl), нужно использовать атрибут multiple. Как и в случае с раскрывающимся списком, указав в элементе атрибут selected, вы сделаете его значением по умолчанию. Если для тега или для установить уже известный вам атрибут disabled, то в первом случае становится отключенным весь список, а во втором — только отдельный пункт списка. Пример прокручиваемого списка, в котором выбраны сразу несколько элементов:
Пример: Прокручиваемый список
Выберите вариант
Группировка пунктов списка (optgroup)
Если в списке находится большое количество пунктов, то посетителю довольно сложно найти нужный пункт. В этом случае можно воспользоваться элементом , предназначенным для создания смысловых групп пунктов списка. Элементы помещаются внутрь контейнера , а заголовок группы указывается в атрибуте label. Пример группировки пунктов списка с заголовками:
Пример: Создание списка с заголовками
Желаемая работа (можно выбрать несколько):
Элемент
В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу можно сочетать на кнопке текст и изображение, располагая их внутри контейнера . В следующем примере на кнопке отображается содержимое элемента — текст и изображение:
Пример: Использование кнопки
Добавить email в список:
HTML5 Элемент
Элемент позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору id элемента . Это позволяет ассоциировать с соответствующим полем ввода:
Пример: Использование элемента
Метки элементов формы (label)
У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента и повышающая доступность, создавая четкие семантические связи между компонентами формы. Использование элемента при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус. Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента значение такое же, как значение атрибута id у элемента, с которым связан . Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на и передать фокус нужному полю формы:
Использование элемента для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента установить/снять флажок можно не только щелчком на поле флажка, но и на его метке — пояснительном тексте:
Пример: Использование элемента
Элементы формы
Элемент
Описание
Устанавливает форму на веб-странице
Создает различные элементы формы (текстовые поля, кнопки, переключатели и т.д.) в зависимости от значения атрибута type
Создает многострочное текстовое поле
Группирует элементы формы. Может также содержать внутри себя элемент legend с условными обозначениями элементов формы, составляющих логическую группу
Многофункциональная кнопка
Устанавливает связь между определенной меткой и элементом формы (input, select, textarea)
Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега fieldset
Представляет собой контейнер, внутри которо-го располагаются теги option, объединенные в одну группу
Определяет отдельные пункты списка, созда-ваемого с помощью контейнера select
Позволяет создать элемент интерфейса в виде раскрывающегося или прокручиваемого списка
Позволяет предоставить раскрывающийся список с предложенными значениями для любого типа поля ввода
Задачи
Многострочное текстовое поле
Создайте многострочное текстовое поле, присвойте ему имя name=»pole», а также установите запрет на ввод текста в данное поле пользователем.
Задача HTML:
Многострочное текстовое поле:
HTML-код:
Подсказка в поле ввода текста
Дополните HTML-код, чтобы в результате получилась форма, приведенная в задании. Когда пользователь начинает вводить значение в поле ввода, ему предоставляется несколько вариантов на выбор: «Среднее», «Среднее специальное» и «Высшее».
Задача HTML:
Ваше образование:
HTML-код:
Ниспадающее меню
В задании представлена форма имеющая вид ниспадающего меню с перечнем профессий: «Учитель», «Слecapь», «Дизайнер», «Водитель», «Aктep». Дополните HTML-код, чтобы в результате получилась такая же форма. Присвойте имя списку name=»profession», а значения пунктам списка: «Теасher», «Technic», «Designer», «Driver» и «Actor».
Задача HTML:
Ваша профессия?
HTML-код:
Многофункциональная кнопка
Доработайте HTML-код так, чтобы в результате получилась кнопка с изображением: «Star.png» и надписью — «Звезда».
