Формы

Обзор форм в HTML.

Большинство сайтов и приложений содержат веб-форму. Шуточные сайты, например DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com, могут не иметь формы, но даже MachineLearningWorkshop.com (MLW), возникший как шутка в День первоапрельского дурака, имеет форму, хотя и поддельную. Основным "призывом к действию" MLW является регистрационная форма для машин, позволяющая записаться на семинар. Эта форма содержится в элементе <form>.

Элемент HTML <form> идентифицирует документ landmark, содержащий интерактивные элементы управления для отправки информации. Во вложенном элементе <form> находятся все интерактивные (и неинтерактивные) элементы управления формой, составляющие эту форму.

Мощные возможности HTML. Этот раздел посвящен возможностям HTML и рассказывает о том, что HTML может делать без добавления JavaScript. Использование данных формы на стороне клиента для обновления пользовательского интерфейса, как правило, предполагает использование CSS или JavaScript, что здесь не рассматривается. Существует целый курс "Изучаем формы" Learn Forms. Мы не будем дублировать этот раздел, но познакомим вас с несколькими элементами управления формами и HTML-атрибутами, которые позволяют их использовать.

С помощью форм вы можете предоставить пользователям возможность взаимодействовать с вашим сайтом или приложением, проверять введенную информацию и отправлять данные на сервер. Атрибуты HTML позволяют требовать от пользователя выбора элементов управления формы или ввода значения. HTML-атрибуты могут определять конкретные критерии, которым должно соответствовать значение, чтобы быть действительным. Когда пользователь пытается отправить форму, все значения элементов управления формы проходят проверку на стороне клиента и могут предотвратить отправку, пока данные не будут соответствовать требуемым критериям; все это без использования JavaScript. Эту возможность можно также отключить: установка атрибута novalidate на <form> или, что чаще, formnovalidate на кнопке, сохраняющей данные формы для последующего заполнения, предотвращает валидацию.

Отправка форм

Отправка формы происходит при активации пользователем кнопки submit, вложенной в форму. При использовании <input> для кнопок "значение" является меткой кнопки и отображается в ней. При использовании <button> меткой является текст между открывающим и закрывающим тегами <button>. Кнопка отправки может быть написана одним из двух способов:

<input type="submit" value="Submit Form" />
<button type="submit">Submit Form</button>

Для простой формы достаточно элемента <form>, внутри которого находится несколько вводимых данных и кнопка отправки. Однако отправка формы — это еще не все.

Атрибуты элемента <form> задают HTTP-метод, с помощью которого отправляется форма, и URL, обрабатывающий отправку формы. Да, формы могут быть отправлены, обработаны и загружена новая страница без использования JavaScript. Элемент <form> обладает такими возможностями.

Значения атрибутов action и method элемента <form> определяют URL, который обрабатывает данные формы, и HTTP-метод, используемый для отправки данных, соответственно. По умолчанию данные формы отправляются на текущую страницу. В противном случае установите атрибут action в значение URL, куда должны быть отправлены данные.

Отправляемые данные состоят из пар имя/значение различных элементов управления формы. По умолчанию сюда входят все элементы управления формы, вложенные в форму и имеющие name. Однако с помощью атрибута form можно включить элементы управления формы за пределами <form> и опустить элементы управления формы, вложенные в <form>. Поддерживаемый для элементов управления формы и <fieldset>, атрибут form принимает в качестве своего значения id формы, с которой связан элемент управления, а не обязательно формы, в которую он вложен. Это означает, что элементы управления формы не обязательно должны быть физически вложены в <form>.

Внимание

Однако будьте осторожны: использование атрибута form позволяет отсоединить элемент управления формы от его формы, включив в него пустое или ошибочное значение.

Атрибут method определяет HTTP-протокол запроса: обычно GET или POST. При использовании GET данные формы передаются в виде строки параметров, состоящей из пар имя=значение и добавляемой к URL action.

При использовании POST данные добавляются в тело HTTP-запроса. При передаче защищенных данных, таких как пароли и информация о кредитных картах, всегда используйте POST.

Существует также метод DIALOG. Если <form method="dialog"> находится внутри <dialog>, то отправка формы приведет к закрытию диалога; при этом происходит событие submit, хотя данные не очищаются и не отправляются. Опять же, без использования JavaScript. Это рассматривается в разделе Диалог. Обратите внимание, что поскольку в этом случае форма не отправляется, вам, вероятно, следует включить в кнопку отправки и formmethod="dialog", и formnovalidate.

Кнопки формы могут иметь не только атрибуты, описанные в начале этого раздела. Если кнопка содержит атрибуты formaction, formenctype, formmethod, formnovalidate или formtarget, то значения, установленные на кнопке, активирующей отправку формы, имеют приоритет над значениями action, enctype, method и target, установленными на <form>. Проверка ограничений происходит до отправки формы, но только в том случае, если на активированной кнопке отправки нет ни formnovalidate, ни novalidate на <form>.

Чтобы определить, какая кнопка была использована для отправки формы, задайте кнопке имя. Кнопки, не имеющие ни имени, ни значения, не отправляются вместе с данными формы при ее отправке.

После отправки формы

Когда пользователь отправляет заполненную интерактивную форму, ему передаются имена и значения соответствующих элементов управления формы. Имя — это значение атрибута name. Значения формируются из содержимого атрибута value или из значения, введенного или выбранного пользователем. Значением <textarea> является его внутренний текст. Значение <select> — это value выбранного <option> или, если <option> не содержит атрибута value, значение — это внутренний текст выбранного варианта.

<form method="GET">
    <label for="student">Pick a student:</label>
    <select name="student" id="student">
        <option value="hoover">Hoover Sukhdeep</option>
        <option>Blendan Smooth</option>
        <option value="toasty">Toasty McToastface</option>
    </select>
    <input type="submit" value="Submit Form" />
</form>

Pick a student: Hoover Sukhdeep Blendan Smooth Toasty McToastface

Если выбрать "Hoover Sukhdeep" (или ничего не делать, так как браузер по умолчанию отображает и, следовательно, выбирает первое значение опции), а затем нажать кнопку отправки, то эта страница будет перезагружена, установив URL:

https://web.dev/learn/html/forms?student=hoover

Поскольку второй вариант не имеет атрибута value, в качестве значения передается внутренний текст. Если выбрать "Blendan Smooth" и нажать кнопку submit, то эта страница перезагрузится, установив URL-адрес:

https://web.dev/learn/html/forms?student=Blendan+Smooth

При отправке формы отправляется информация, включающая имена и значения всех именованных элементов управления формы, имеющих name, за исключением невыбранных флажков, невыбранных радиокнопок, а также имен и значений любых кнопок, кроме той, которая отправила форму. Для всех остальных элементов управления формы, если элемент управления формы имеет имя, но значение не было введено или задано по умолчанию, то name элемента управления формы передается с пустым значением.

Существует 22 типа ввода, поэтому мы не можем охватить их все. Отметим лишь, что включение значения необязательно и часто является плохой идеей, если вы хотите, чтобы пользователь ввел информацию. Для элементов <input>, где пользователь не может редактировать значение, необходимо всегда включать значение, в том числе для элементов ввода с типом hidden, radio, checkbox, submit, button и reset.

Использование уникальных name для элементов управления формы упрощает обработку данных на стороне сервера и является рекомендуемым, исключением из этого правила являются флажки и радиокнопки.

Радиокнопки

Если вы заметили, что при выборе радиокнопки в группе радиокнопок одновременно может быть выбрана только одна, то это связано с атрибутом name. Этот эффект "только одна кнопка может быть выбрана" создается путем присвоения каждой радиокнопке в группе одинакового name.

Имя name должно быть уникальным для группы: если вы случайно используете одно и то же name для двух разных групп, то выбор радиокнопки во второй группе отменит выбор, сделанный в первой группе с тем же name.

Вместе с формой передается name и value выбранной радиокнопки. Убедитесь, что каждая радиокнопка имеет соответствующее (и, как правило, уникальное) value. Значения невыбранных радиокнопок не передаются.

На странице может быть сколько угодно групп радиокнопок, каждая из которых работает независимо, при условии, что каждая из них имеет уникальное для всей группы name.

Если вы хотите загрузить страницу с выбранной одной из радиокнопок одноименной группы, включите атрибут checked. Эта радиокнопка будет соответствовать CSS-псевдоклассу :default, даже если пользователь выберет другую радиокнопку. Выбранная в данный момент радиокнопка соответствует псевдоклассу :checked.

Если от пользователя требуется выбрать элемент управления из группы радиокнопок, добавьте атрибут required хотя бы к одному из элементов управления. Включение атрибута required к радиокнопке в группе делает выбор обязательным для отправки формы, но не обязательно, чтобы выбор был сделан именно радиокнопкой с этим атрибутом. Кроме того, в <legend> следует четко указать, что элемент управления формы является обязательным. Маркировка групп радиокнопок, а также каждой отдельной кнопки описана далее.

Флажки

Допустимо, чтобы все флажки в группе имели одинаковое name. Только выбранные флажки имеют свои name и value, передаваемые вместе с формой. Если выбрано несколько флажков с одним и тем же именем, то в форму будет отправлено одно и то же имя с (надеюсь) разными значениями. Если у вас есть несколько элементов управления формы с одинаковым именем, даже если это не все флажки, все они будут отправлены, разделенные амперсандами.

Если не указать value в чекбоксе, то значение выбранного чекбокса по умолчанию будет равно on, что, вероятно, не очень полезно. Если у вас есть три флажка с именем chk и все они отмечены, то отправка формы не будет расшифрована:

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

Чтобы сделать флажок обязательным, добавьте атрибут required. Всегда сообщайте пользователю, когда необходимо установить флажок, или когда любой элемент управления формой является обязательным. Добавление атрибута required к флажку делает обязательным только этот флажок; это не влияет на другие флажки с тем же именем.

Метки и наборы полей

Для того чтобы пользователи знали, как заполнять форму, она должна быть доступной. Каждый элемент управления формы должен иметь метку. Кроме того, необходимо помечать группы элементов управления формы. В то время как отдельные области ввода, выбора и текста обозначаются с помощью <label>, группы элементов управления формы обозначаются содержимым <legend> группирующего их <fieldset>.

В предыдущих примерах вы могли заметить, что каждый элемент управления формы, кроме кнопки отправки, имеет метку <label>. Метки дают элементам управления формы доступные имена. Кнопки получают доступное имя из своего содержимого или значения. Все остальные элементы управления формы требуют наличия связанной с ними <label>. Если нет связанной метки, браузер все равно отобразит элементы управления формы, но пользователи не будут знать, какая информация ожидается.

Чтобы явно связать элемент управления формы с <label>, включите атрибут for на <label>: его значение — id элемента управления формы, с которым он связан.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name" />

Your name

Использование меток в элементах управления формы имеет ряд преимуществ. Метки делают элементы управления формами доступными для пользователей программ чтения с экрана, предоставляя элементу управления доступное имя. Ярлыки также являются "областями попадания"; они делают сайт более удобным для пользователей с проблемами ловкости рук за счет увеличения площади. Если вы пользуетесь мышью, попробуйте щелкнуть в любом месте метки "Ваше имя". В результате этого ввод становится фокусным.

Чтобы обеспечить неявные метки, включите элемент управления формой между открывающим и закрывающим тегами <label>. Такой элемент одинаково доступен как для устройства чтения с экрана, так и для указателя, однако он не позволяет использовать стилистику, как в случае с явными метками.

<label
    >Your name
    <input type="text" name="name" />
</label>

Your name

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

Обычно <label> располагается перед элементом управления формы, за исключением радиокнопок и чекбоксов. Это не является обязательным. Это просто общепринятый UX-шаблон. В серии Learn Forms есть информация о дизайне форм.

Для групп радиокнопок и флажков метка представляет собой доступное имя элемента управления формы, с которым она связана; но группа элементов управления и их метки также нуждаются в метке. Для обозначения группы сгруппируйте все элементы в <fieldset>, при этом <legend> будет обозначать группу.

<fieldset>
    <legend>Who is your favorite student?</legend>
    <ul>
        <li>
            <label>
                <input
                    type="radio"
                    value="blendan"
                    name="machine"
                />
                Blendan Smooth
            </label>
        </li>
        <li>
            <label>
                <input
                    type="radio"
                    value="hoover"
                    name="machine"
                />
                Hoover Sukhdeep
            </label>
        </li>
        <li>
            <label>
                <input
                    type="radio"
                    value="toasty"
                    name="machine"
                />
                Toasty McToastface
            </label>
        </li>
    </ul>
</fieldset>

В данном примере неявные <label> обозначают каждую радиокнопку, а <legend> предоставляет метку для группы радиокнопок. Вложение <fieldset> внутри другого <fieldset> является стандартной практикой. Например, если форма представляет собой опрос, состоящий из множества вопросов, разделенных на группы связанных между собой вопросов, то <fieldset> "Любимый студент" может быть вложен в другой <fieldset>, обозначенный как "Ваши любимые":

<fieldset>
    <legend>Your favorites:</legend>
    <ul start="6">
        <li>
            <fieldset>
                <legend>
                    Who is your favorite student?
                </legend>
                <ul>
                    <li>
                        <!-- the rest of the code here -->
                    </li>
                </ul>
            </fieldset>
        </li>
    </ul>
</fieldset>

Стандартный вид этих элементов привел к их недостаточному использованию, однако <legend> и <fieldset> могут быть стилизованы с помощью CSS. Помимо всех глобальных атрибутов, <fieldset> также поддерживает атрибуты name, disabled и form. При отключении набора полей отключаются все вложенные элементы управления формой. Ни атрибуты name, ни form не имеют особого смысла для <fieldset>. Атрибут name может быть использован для доступа к набору полей с помощью JavaScript, но сам набор полей не включается в отправляемые данные (включаются именованные элементы управления формы, вложенные в него).

Подробнее о формах и доступности можно узнать в модуле forms of Learn Accessibility.

Типы ввода и динамическая клавиатура

Как отмечалось ранее, существует 22 различных типа ввода. В некоторых случаях, когда пользователь находится на устройстве с динамической клавиатурой, которая отображается только по мере необходимости, например, на телефоне, используемый тип ввода определяет тип отображаемой клавиатуры. Отображаемая по умолчанию клавиатура может быть оптимизирована под требуемый тип ввода. Например, при наборе tel отображается клавиатура, оптимизированная для ввода телефонных номеров; email включает символы @ и .; а динамическая клавиатура для url включает двоеточие и символ косой черты. К сожалению, iPhone по-прежнему не включает : в динамическую клавиатуру по умолчанию для типов ввода url.

Клавиатуры для <input type="tel"> на iPhone и двух разных телефонах Android:

iPhoneAndroidAndroid

Клавиатура iPhone показывает тип ввода=tel.

Клавиатура Android показывает тип ввода=tel.

Клавиатура Android показывает тип ввода=tel.

Клавиатуры для <input type="email"> на iPhone и двух разных телефонах Android:

iPhoneAndroidAndroid

Клавиатура iPhone показывает тип ввода=email.

Клавиатура Android показывает тип ввода=email.

Клавиатура Android показывает тип ввода=email.

Доступ к микрофону и камере

Тип файлового ввода <input type="file"> позволяет загружать файлы через формы. Файлы могут быть любого типа, определяемого и ограничиваемого атрибутом accept. Список допустимых типов файлов может представлять собой список расширений файлов, разделенных запятыми, глобальный тип или комбинацию глобальных типов и расширений. Например, accept="video/*, .gif" принимает любые видеофайлы или анимированные gif-файлы. Для звуковых файлов используйте "audio/*", для видеофайлов — "video/*", для файлов изображений — "image/*".

Перечисляемый атрибут capture, определенный в спецификации media capture specification, может использоваться, если новый медиафайл должен быть создан с помощью камеры или микрофона пользователя. Вы можете установить значение user для устройств ввода, обращенных к пользователю, или environment для задней камеры или микрофона телефона. Как правило, использование capture без значения работает, поскольку пользователь сам выбирает, какое устройство ввода ему использовать.

<label for="avatar">A recent photo of yourself:</label>
<input
    type="file"
    capture="user"
    accept="image/*"
    name="avatar"
    id="avatar"
/>

Встроенная валидация

Опять же, не используя JavaScript, HTML может предотвратить отправку форм с недопустимыми значениями.

Существует несколько CSS-селекторов, которые подбирают элементы управления формами по наличию HTML-атрибутов, включая :required и :optional, если установлен или нет логический ключ required; :default, если checked жестко закодирован; и :enabled или :disabled, в зависимости от того, является ли элемент интерактивным и присутствует ли атрибут disabled. Псевдокласс :read-write соответствует элементам с набором contenteditable и элементам управления формы, которые по умолчанию являются редактируемыми, например, типам ввода number, password, text (но не checkbox, radio buttons, тип hidden и др.). Если у элемента, обычно доступного для записи, установлен атрибут readonly, то вместо него будет использоваться :read-only.

При вводе пользователем информации в элементы управления формы селекторы CSS UI, включая :valid, :invalid, :in-range и :out-of-range, будут включаться и выключаться в зависимости от состояния. При выходе пользователя из элемента управления формой будет использоваться псевдокласс :user-invalid или :user-valid, который пока еще не полностью поддерживается.

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

form:invalid [type='submit'] {
    opacity: 50%;
    pointer-events: none;
}

Этот фрагмент CSS является антипаттерном. Хотя ваш пользовательский интерфейс может казаться интуитивно понятным и ясным, многие пользователи пытаются отправить форму, чтобы получить сообщение об ошибке. Если таким образом сделать кнопку отправки неактивной, то это не позволит выполнить проверку ограничений, на которую многие пользователи полагаются.

Прикладной CSS постоянно обновляется в зависимости от текущего состояния пользовательского интерфейса. Например, при включении типов ввода с ограничениями, таких как email, number, url и date, если значение не является null (не пустое) и текущее значение не является допустимым email, number, url, date или time, то :invalid CSS pseudo-class будет соответствовать. Это постоянное обновление отличается от встроенной проверки HTML-ограничений, которая происходит только при попытке пользователя отправить форму.

Встроенная проверка ограничений относится только к ограничениям, заданным с помощью HTML-атрибутов. Хотя вы можете стилизовать элемент на основе псевдоклассов :required и :valid/:invalid, сообщения об ошибках, возникающих из-за ошибок на основе атрибутов required, pattern, min, max и даже type, выдаются браузером при отправке формы.

Когда мы пытаемся отправить форму, не выбрав требуемого студента-фаворита, валидация ограничений не позволяет отправить форму из-за ошибки validityState.valueMissing.

Если любое из свойств validityState возвращает значение true, отправка формы блокируется, и браузер выводит сообщение об ошибке в первом неправильном элементе управления формы, передавая ему фокус. Если пользователь активизирует отправку формы и в ней присутствуют недопустимые значения, то первый недопустимый элемент управления формы отобразит сообщение об ошибке и получит фокус. Если для элемента управления required не задано значение, если числовое значение выходит за пределы диапазона или если значение не соответствует типу, требуемому атрибутом type, форма не пройдет проверку, не будет отправлена, и появится сообщение об ошибке.

Если значение number, даты или времени меньше минимального значения min или больше максимального значения max, то элемент управления будет :out-of-range (и :invalid), а пользователю при попытке отправить форму будет сообщено об ошибке valididityState.rangeUnderflow, validityState.rangeOverflow. Если значение не соответствует значению step, заданному явно или по умолчанию равному 1, то элемент управления будет иметь значение :out-of-range (и :invalid) и будет выдана ошибка validityState.stepMismatch. Ошибка отображается в виде пузырька и по умолчанию содержит полезную информацию о том, как исправить ошибку.

Аналогичные атрибуты существуют и для длины значений: атрибуты minlength и maxlength при отправке предупредят пользователя об ошибке с помощью атрибутов validityState.tooLong или validityState.tooShort. Параметр maxlength также предотвращает ввод пользователем слишком большого количества символов.

Использование атрибута maxlength может привести к ухудшению качества работы пользователя. Как правило, лучше позволить пользователю ввести больше символов, чем разрешено, предоставив ему счетчик, опционально в виде элемента <вывод>, который не передается вместе с формой, что позволит ему редактировать текст до тех пор, пока вывод не покажет, что максимально допустимая длина не превышена. Элемент maxlength может быть включен в ваш HTML; как и все, что мы обсуждали, он работает без JavaScript. Затем, при загрузке, значение атрибута maxlength может быть использовано для создания этого счетчика символов в JavaScript.

Некоторые типы ввода, как кажется, имеют ограничения по умолчанию, но это не так. Например, тип ввода tel обеспечивает цифровую телефонную клавиатуру на устройствах с динамическими клавиатурами, но не ограничивает допустимые значения. Для этого и других типов ввода существует атрибут pattern. Вы можете указать регулярное выражение, которому должно соответствовать значение, чтобы считаться допустимым. Если значение представляет собой пустую строку и не является обязательным, то оно не вызовет ошибки validityState.patternMismatch. Если значение required и пустое, то пользователю будет показано стандартное сообщение об ошибке validityState.valueMissing, а не patternMismatch.

Для электронной почты атрибут validityState.typeMismatch, вероятно, является слишком щадящим для ваших нужд. Скорее всего, необходимо включить атрибут pattern, чтобы адреса электронной почты интрасети без TLD не принимались за действительные. Атрибут pattern позволяет указать регулярное выражение, которому должно соответствовать значение. При требовании соответствия шаблону необходимо четко указать пользователю, что от него требуется.

Все это можно сделать без единой строчки JavaScript, но, будучи HTML API, можно использовать JavaScript для включения пользовательских сообщений при проверке ограничений. Можно также использовать JavaScript для обновления количества оставшихся символов, отображения прогрессивной шкалы надежности пароля и других способов динамического улучшения завершения.

Пример

В данном примере форма находится внутри <dialog> с вложенной <form> с тремя элементами управления формы и двумя кнопками отправки, с четкими надписями и инструкциями.

Первая кнопка отправки закрывает диалог. Используйте formmethod="dialog", чтобы переопределить метод формы по умолчанию и закрыть <dialog> без отправки данных или их стирания. Вы также должны включить formnovalidate, иначе браузер попытается выполнить валидацию, проверяя, что все обязательные поля имеют значение. Пользователь может захотеть закрыть диалог и форму, не вводя никаких данных; валидация не позволит этого сделать. Включите aria-label="close", поскольку "X" является известной визуальной подсказкой, но не является описательной меткой.

Все элементы управления формы имеют неявные метки, поэтому включать атрибуты id или for не нужно. Оба элемента ввода имеют атрибут required, что делает их обязательными. У элемента ввода числа явно задан step, чтобы продемонстрировать, как включается step. Поскольку step по умолчанию равен 1, этот атрибут можно не указывать.

Атрибут <select> имеет значение по умолчанию, что делает атрибут required ненужным. Вместо того чтобы включать атрибут value для каждой опции, значение по умолчанию соответствует внутреннему тексту.

Кнопка submit в конце устанавливает метод формы на POST. При нажатии на кнопку происходит проверка валидности каждого значения. Если все значения действительны, то данные формы будут отправлены, диалог закроется, а страница может быть перенаправлена на thankyou.php, который является URL действия. Если какие-либо значения отсутствуют, или числовое значение имеет несоответствие шагу, или выходит за пределы диапазона, то появится соответствующее сообщение об ошибке, определяемое браузером, форма не будет отправлена, а диалог не закроется. Сообщения об ошибках по умолчанию можно настроить с помощью метода validityState.setCustomValidity('message here'). Обратите внимание, что если вы задаете пользовательское сообщение, то оно должно быть явно установлено в пустую строку, когда все валидно, иначе форма не будет отправлена.

Эти элементы <input> включают в себя косую черту в конце, которую также называют "самозакрывающимся тегом", что является ошибочным термином. Косая черта на элементах void является особенностью XML, включая SVG и XHTML, но не HTML. Браузеры игнорируют ее, Prettier требует ее, а HTML Validator выдает предупреждение при ее наличии.

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

При изучении HTML полезно писать код как можно более разборчиво, что включает в себя "закрытие" всех тегов и цитирование всех атрибутов. По мере освоения всех тонкостей HTML и повышения уровня комфорта вы можете изменить свои привычки и больше не добавлять косую черту к элементам void, опускать необязательные закрывающие теги, а то и вовсе отказаться от неявных тегов и не заключать в кавычки атрибуты, которые это позволяют. Главное, независимо от того, на каком языке вы кодируете — CSS, HTML, JavaScript или другом, — быть последовательным в своем стиле кодирования.

Другие соображения

Существует целый раздел, посвященный помощи пользователям при вводе правильных данных в формы. Для удобства пользователей важно предотвращать ошибки, включая инструкции и предоставляя подсказки по мере необходимости. Хотя в этом разделе рассматривается, как HTML сам по себе может обеспечить проверку на стороне клиента, проверка должна быть как на стороне клиента, так и на стороне сервера. Валидация может осуществляться ненавязчивыми способами во время заполнения формы, например, добавлением флажка при правильном значении. Однако не следует выдавать сообщения об ошибках до завершения работы с формой. Если пользователь все же допустил ошибку, сообщите ему, в чем она заключается и что он сделал неправильно.

При проектировании форм важно учитывать, что не все люди похожи на вас. У кого-то может быть одна буква в качестве фамилии (или вообще нет фамилии), у кого-то может не быть почтового индекса, у кого-то может быть трехстрочный адрес улицы, у кого-то может не быть адреса улицы. Возможно, они просматривают переведенную версию вашей формы.

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

HTML предоставляет все средства для обеспечения доступности основных элементов управления формой. Чем более интерактивным является элемент формы или процесс, тем больше внимания необходимо уделять доступности в отношении управления фокусом, установки и обновления имен, ролей и значений ARIA, где это необходимо, и объявления ARIA в реальном времени, если это требуется. Но, как мы уже выяснили, с помощью одного только HTML можно проделать большой путь к достижению цели обеспечения доступности и достоверности, не прибегая к ARIA или JavaScript.

Источник

• Forms

Комментарии