Как сделать лейбл в css
Всегда используйте label
Это перевод статьи Адама Сильвера — «Always use a label».
Иногда дизайнеры слишком сильно упрощают форму, убирая подпись к полю (примечание переводчика: здесь и далее имеется в виду тег label). Проблема в том, что минимализм не всегда означает простоту в использовании, а это, безусловно, и происходит с подписями.
На самом деле, подпись к полю является важной частью для создания лёгких в использовании форм. Вот почему:
1) Зрячие пользователи смогут видеть инструкции и будут знать, что делать. Без подписей к полям в лучшем случае это будет сложно.
Подпись к полю помогает зрячим пользователям понять, что нужно вводить
2) Незрячие пользователи смогут услышать инструкции благодаря использованию скринридеров. Без подписей к полям это будет невозможно.
Поле «Username» доступно для чтения скринридерами
3) Пользователи с моторными нарушениями смогут легче найти и активировать элементы с помощью мышки или пальца благодаря увеличению размеров активной области. Это происходит потому, что клик и нажатие пальцем по подписи работает так, будто пользователь кликнул по самому элементу управления.
Большая площадь поля помогает пользователям с моторными нарушениями активировать элемент
Но для меню выбора вида/размера/цвета/количества не нужны подписи, не так ли?
Нужны, и, к сожалению, довольно часто подписей нет в формах выбора товаров. ASOS страдает этой проблемой, как вы видите.
Форма выбора товаров на ASOS пренебрегает подписями у раскрывающихся списков
Вместо подписей здесь используется первое значение из раскрывающегося списка. Пока значение не выбрано это допустимо для хорошо видящих пользователей, но создаёт трудности для пользователей с нарушением зрения или моторных функций. Если значение выбрано, как в примере выше с выбором цвета, сложности возникают уже у всех типов пользователей.
House of Fraser показывает подпись к раскрывающемуся списку выбора количества вещей, улучшая удобство использования всем пользователям.
House of Fraser имеет подпись у поля с выбором количества вещей
Простая форма поиска не нуждается в подписях, не так ли?
Нуждается, но, к сожалению, формы поиска часто разрабатываются без подписей. В качестве примера можно посмотреть на Selfridges.
Форма поиска Selfridges пренебрегает подписью к полю
Чтобы объяснить назначение формы, вместо подписи здесь используется подсказка для поля и кнопка отправки (иконка лупы). Но это чересчур сложно для использования людьми с ограниченными возможностями — и, конечно — подсказки полей не должны использоваться как замена подписям.
Smashing Magazine показывает, как использование подписей может быть красивым и функциональным одновременно.
Форма поиска Smashing Magazine использует подпись у поля
Использование подписей к полям может нести дополнительные сложности в дизайне, но уход от этих проблем — это не решение. Принимайте этот вызов, и не стоит чересчур упрощать. И конечно, всегда используйте тег label.
Стилизация флажков и переключателей с использованием CSS3
При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.
Итак, для начала добавим несколько обычных флажков и переключателей на форму:
Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:
Перед метками добавим стилизованные контейнеры для наших пользовательских элементов. Для флажков это будут квадраты с немного закругленными для красоты краями, а для переключателей — просто небольшие круги:
Теперь добавим индикаторы выбора. Для флажков это будут галки, для переключателей — заполненные цветом круги меньшего размера, чем сам контейнер. Для большего эффекта зададим также небольшую анимацию:
Чтобы изобразить знак галки, мы поворачиваем небольшой прямоугольник, две стороны которого окрашены в цвет, на 45 градусов против часовой стрелки.
Обратите внимание, что селекторы :before и :after позволяют добавлять содержание непосредственно до и после содержимого самой метки. Так как для меток мы задали относительное позиционирование (position: relative), то можем задавать контекстное абсолютное позиционирование для их содержимого.
Осталось скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в выбранном состоянии:
Добавим, что описанное здесь решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также, начиная с версии 9, и в Internet Explorer.
Полностью CSS определения можно загрузить здесь.
Построение форм
Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.
Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.
Инициализация формы
Чтобы добавить форму на страницу мы будем использовать элемент
Демонстрация формы для входа
На практике
С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.
Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент
Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:
Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.
В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:
В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.
Чтобы сделать это, добавим класс why-attend к маркированному списку.
Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:
Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу
Далее, внутри элемента
Для поля комментариев используется элемент
В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:
Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.
Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.
Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:
Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.
Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.
Рис. 10.07. Наша страница регистрации с формой
Демонстрация и исходный код
Ниже вы можете скачать исходный код сайта на данный момент.
Резюме
Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.
Напомним быстро, что мы обсудили в этом уроке:
Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.
Шаг 1. Создание проекта и добавление в форму элементов управления Label Step 1: Create a project and add labels to your form
Первые шаги разработки этой головоломки предполагают создание проекта, добавление меток, кнопки и других элементов управления в форму. As the first steps in developing this quiz, you create the project, and you add labels, a button, and other controls to a form. Также вам предстоит задать свойства для каждого добавляемого элемента управления. You also set properties for each control that you add. Проект будет содержать форму, элементы управления и добавленный в следующих уроках учебника код. The project will contain the form, the controls, and (later in the tutorial) code. Кнопка запускает головоломку, метки служат для отображения задач, входящих в головоломку, а остальные элементы управления служат для отображения ответов и времени, оставшегося на решение головоломки. The button starts the quiz, the labels show the quiz problems, and the other controls show the quiz answers and the time that remains to finish the quiz.
Этот раздел входит в серию учебников, посвященных основам написания кода. This topic is part of a tutorial series about basic coding concepts. Общие сведения об учебнике см. в разделе Руководство 2. Создание ограниченной по времени математической головоломки. For an overview of the tutorial, see Tutorial 2: Create a timed math quiz.
Создание проекта для формы To create a project for a form
В строке меню щелкните Файл > Создать > Проект. On the menu bar, choose File > New > Project.
Выберите Visual C# или Visual Basic в левой области диалогового окна Новый проект, а затем — Классическое приложение Windows. Choose either Visual C# or Visual Basic on the left side of the New Project dialog box, and then choose Windows Desktop.
В списке шаблонов выберите шаблон Приложение Windows Forms (.NET Framework), назовите его MathQuiz, а затем нажмите кнопку ОК. In the list of templates, choose the Windows Forms App (.NET Framework) template, name it MathQuiz, and then choose the OK button.
Появится форма с именем Form1.cs или Form1.vb, в зависимости от выбранного языка программирования. A form that’s named Form1.cs or Form1.vb appears, depending on the programming language that you chose.
Дополнительные сведения см. в разделе Установка Visual Studio. For more information, see the Install Visual Studio page.
На начальном экране выберите Создать проект. On the start window, choose Create a new project.
В поле поиска окна Создание проекта введите Windows Forms. On the Create a new project window, enter or type Windows Forms in the search box. Затем в списке Тип проекта выберите Рабочий стол. Next, choose Desktop from the Project type list.
Применив фильтр Тип проекта, выберите шаблон Приложение Windows Forms (.NET Framework) для C# или Visual Basic и нажмите кнопку Далее. After you apply the Project type filter, choose the Windows Forms App (.NET Framework) template for either C# or Visual Basic, and then choose Next.
Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. If you do not see the Windows Forms App (.NET Framework) template, you can install it from the Create a new project window. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов. In the Not finding what you’re looking for? message, choose the Install more tools and features link.
Затем нажмите кнопку Изменить в Visual Studio Installer. After that, choose the Modify button in the Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. You might be prompted to save your work; if so, do so. Выберите Продолжить, чтобы установить рабочую нагрузку. Next, choose Continue to install the workload.
В поле Имя проекта окна Настроить новый проект введите MathQuiz. In the Configure your new project window, type or enter MathQuiz in the Project name box. Затем нажмите Создать. Then, choose Create.
Задание свойств формы To set properties for a form
В Visual Studio выберите форму (Form1.cs или Form1.vb, в зависимости от используемого языка программирования), а затем измените ее свойство Text на Математическая головоломка. In Visual Studio, choose the form (either Form1.cs or Form1.vb, depending on the programming language), and then change its Text property to Math Quiz.
Окно Свойства содержит свойства формы. The Properties window contains properties for the form.
Измените размер формы на 500 пикселей в ширину и 400 пикселей в высоту. Change the size of the form to 500 pixels wide by 400 pixels tall.
Изменить размер формы можно, перетаскивая ее границы до тех пор, пока в левом нижнем углу интегрированной среды разработки не появится нужный размер. You can resize the form by dragging its edges until the correct size appears in the lower-left corner of the integrated development environment (IDE). Другой вариант — изменить значения свойства Size. As an alternative, you can change the values of the Size property.
Измените значение свойства FormBorderStyle на Fixed3D, а свойству MaximizeBox установите значение False. Change the value of the FormBorderStyle property to Fixed3D, and set the MaximizeBox property to False.
Эти значения не позволят игрокам изменять размеры формы. These values prevent quiz takers from resizing the form.
Создание поля «Оставшееся время» To create the time remaining box
Добавьте элемент управления Label из панели элементов, затем установите для его свойства (Name) значение timeLabel. Add a Label control from the Toolbox, and then set the value of its (Name) property to timeLabel.
Эта метка станет полем в правом верхнем углу формы, в котором будет отображаться количество секунд, оставшихся на решение головоломки. This label will become a box in the upper-right corner that shows the number of seconds that remain in the quiz.
Измените значение свойства AutoSize на False, чтобы можно было изменить размер поля. Change the AutoSize property to False so that you can resize the box.
Измените значение свойства BorderStyle на FixedSingle для отрисовки линии вокруг поля. Change the BorderStyle property to FixedSingle to draw a line around the box.
Установите значение свойства Size равным 200, 30. Set the Size property to 200, 30.
Переместите метку в правый верхний угол формы, где при этом появятся синие линии-разделители. Move the label to the upper-right corner of the form, where blue spacer lines will appear.
Эти линии помогают выравнивать элементы управления в форме. These lines help you align controls on the form.
В окне Свойства выберите свойство Text и нажмите клавишу BACKSPACE, чтобы удалить его значение. In the Properties window, choose the Text property, and then choose the Backspace key to clear its value.
Нажмите знак плюса ( + ) рядом со свойством Font и измените значение свойства Size на 15,75. Choose the plus sign (+) next to the Font property, and then change the value of the Size property to 15.75.
Можно изменить несколько свойств шрифта, как показано на снимке экрана ниже. You can change several font properties, as the following screenshot shows.
Добавьте еще один элемент управления Label из панели элементов и установите для его размера шрифта значение 15,75. Add another Label control from the Toolbox, and then set its font size to 15.75.
Задайте свойству Text значение Оставшееся время. Set the Text property to Time Left.
Переместите метку так, чтобы она находилась чуть левее метки timeLabel. Move the label so that it lines up just to the left of the timeLabel label.
Добавление элементов управления для задачи на сложение To add controls for the addition problems
Добавьте элемент управления Label из панели элементов и установите для его свойства Text значение ? Add a Label control from the Toolbox, and then set its Text property to ? (вопросительный знак). (question mark).
Задайте свойству AutoSize значение False. Set the AutoSize property to False.
Установите значение свойства Size равным 60, 50. Set the Size property to 60, 50.
Установите размер шрифта равным 18. Set the font size to 18.
Установите для свойства TextAlign значение MiddleCenter. Set the TextAlign property to MiddleCenter.
Установите для свойства Location значение 50, 75, чтобы поместить элемент управления в нужное место в форме. Set the Location property to 50, 75 to position the control on the form.
Установите для свойства (Name) значение plusLeftLabel. Set the (Name) property to plusLeftLabel.
Выберите метку plusLeftLabel, а затем либо нажмите клавиши CTRL+C, либо выберите пункт Копировать в меню Правка. Choose the plusLeftLabel label, and then choose either the Ctrl+C keys or Copy on the Edit menu.
Вставьте метку три раза, нажимая клавиши CTRL+V или выбирая Вставить в меню Правка. Paste the label three times by choosing either the Ctrl+V keys or Paste on the Edit menu.
Разместите три новые метки так, чтобы они располагались в ряд справа от метки plusLeftLabel. Arrange the three new labels so that they are in a row to the right of the plusLeftLabel label.
Для выравнивания меток и регулировки промежутков между ними можно пользоваться линиями-разделителями. You can use the spacer lines to space them out and line them up.
Установите для свойства Text второй метки значение + (знак плюса). Set the value of the second label’s Text property to + (plus sign).
Установите для свойства (Name) третьей метки значение plusRightLabel. Set the value of the third label’s (Name) property to plusRightLabel.
Установите для свойства Text четвертой метки значение = (знак равенства). Set the value of the fourth label’s Text property to = (equal sign).
Добавьте элемент управления NumericUpDown из панели элементов, установите его размер шрифта равным 18, а его ширину — равной 100. Add a NumericUpDown control from the Toolbox, set its font size to 18, and set its width to 100.
Подробнее этот вид элементов управления мы рассмотрим позже. You’ll learn more about this kind of control later.
Выровняйте элемент управления NumericUpDown по элементам управления Label для задачи на сложение. Line up the NumericUpDown control with the Label controls for the addition problem.
Измените значение свойства (Name) элемента управления NumericUpDown на sum. Change the value of the (Name) property for the NumericUpDown control to sum.
Первая строка создана, как показано на иллюстрации ниже. You’ve created the first row, as shown in the following illustration.
Добавление элементов управления для задач на вычитание, умножение и деление To add controls for the subtraction, multiplication, and division problems
Скопируйте все пять элементов управления для задачи на сложение (четыре элемента управления Label и элемент управления NumericUpDown) и вставьте их. Copy all five controls for the addition problem (the four Label controls and the NumericUpDown control), and then paste them.
Теперь форма содержит пять новых элементов управления, которые все еще выбраны. The form contains five new controls, which are still selected.
Переместите все элементы управления так, чтобы выровнять их под элементами управления для сложения. Move all of the controls into place so that they line up below the addition controls.
Для обеспечения достаточного расстояния между строками можно пользоваться линиями-разделителями. You can use the spacer lines to give enough distance between the two rows.
Измените значение свойства Text второй метки на — (знак «минус»). Change the value of the Text property for the second label to — (minus sign).
Назовите первую метку с вопросительным знаком minusLeftLabel. Name the first question-mark label minusLeftLabel.
Назовите вторую метку с вопросительным знаком minusRightLabel. Name the second question-mark label minusRightLabel.
Присвойте элементу управления NumericUpDown имя difference. Name the NumericUpDown control difference.
Вставьте эти пять элементов управления еще два раза. Paste the five controls two more times.
В третьей строке назовите первую метку timesLeftLabel, у второй метки измените значение свойства Text на × (знак умножения), третью метку назовите timesRightLabel, а элемент управления NumericUpDown назовите product. For the third row, name the first label timesLeftLabel, change the second label’s Text property to × (multiplication sign), name the third label timesRightLabel, and name the NumericUpDown control product.
В четвертой строке назовите первую метку dividedLeftLabel, у второй метки измените значение свойства Text на ÷ (знак деления), третью метку назовите dividedRightLabel, а элемент управления NumericUpDown назовите quotient. For the fourth row, name the first label dividedLeftLabel, change the second label’s Text property to ÷ (division sign), name the third label dividedRightLabel, and name the NumericUpDown control quotient.
Знак умножения × и знак деления ÷ можно скопировать из этого руководства и вставить их в форму. You can copy the multiplication sign × and the division sign ÷ from this tutorial and paste them onto the form.
Добавление кнопки запуска и задание порядка перехода по клавише TAB To add a start button and set the tab-index order
Добавьте элемент управления Button из панели элементов и установите для его свойства (Name) значение startButton. Add a Button control from the Toolbox, and then set its (Name) property to startButton.
Задайте свойству Text значение Запуск головоломки. Set the Text property to Start the quiz.
Установите размер шрифта равным 14. Set the font size to 14.
Установите для свойства AutoSize значение True, которое вызывает автоматическое изменение размера кнопки в зависимости от размера текста. Set the AutoSize property to True, which causes the button to automatically resize to fit the text.
Разместите кнопку по центру в нижней части формы. Center the button near the bottom of the form.
Установите значение свойства TabIndex элемента управления startButton равным 1. Set the value of the TabIndex property for the startButton control to 1.
Свойство TabIndex задает порядок перехода по элементам управления при нажатии клавиши TAB. The TabIndex property sets the order of the controls when the quiz taker chooses the Tab key. Чтобы увидеть, как это работает, откройте любое диалоговое окно (например, в строке меню выберите Файл > Открыть), а затем несколько раз нажмите клавишу TAB. To see how it works, open any dialog box (for example, on the menu bar, choose File > Open), and then choose the Tab key a few times. Вы увидите, что при каждом нажатии клавиши TAB курсор перемещается от одного элемента управления к другому. Watch how your cursor moves from control to control each time that you choose the Tab key. Порядок этих переходов был задан программистом при создании формы. A programmer decided the order when creating that form.
Установите значение свойства TabIndex для элемента управления NumericUpDown с именем sum равным 2, для элемента управления difference равным 3, для элемента управления product равным 4, а для элемента управления quotient равным 5. Set the value of the TabIndex property for the NumericUpDown sum control to 2, for the difference control to 3, for the product control to 4, and for the quotient control to 5.
Теперь форма должна выглядеть как на снимке экрана ниже. The form should look similar to the following screenshot.
Чтобы проверить, работает ли свойство TabIndex ожидаемым образом, сохраните программу и запустите ее, нажав клавишу F5 или выбрав пункты Отладка > Начать отладку в строке меню, а затем несколько раз нажмите клавишу TAB. To verify whether the TabIndex property works as you expect, save and run your program by choosing the F5 key, or by choosing Debug > Start Debugging on the menu bar, and then choose the Tab key a few times.