Формы: подробное руководство

Дата публикации: 2014-05-23

От автора: Формы составляют наиболее важные части любого сайта или приложения; использование форм – самый распространённый способ для наших пользователей предоставить нам информацию, которая нам нужна, чтобы помочь им сделать то, что они хотят.

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

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

Это руководство не стремится к тому, чтобы объяснить, что должно быть в вашей форме, как поля должны быть сгруппированы и расположены, где расположить перво- и второстепенные кнопки, и так далее. Уже есть множество замечательных ресурсов, раскрывающих эти темы. (Таких как книги Люка Вроблевски, Каролины Джаретт и Джерри Гафни. Или статья Джастина Мисфуда).

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

В первом посте этого руководства я показал, как расположить элементы формы и выровнять метки так, как вы хотите, используя HTML и фреймворк Foundation.

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

Типы полей ввода

В формах используются несколько различных HTML элементов. У кнопок есть собственный элемент (button), выпадающие списки – (select и option), а многострочные поля ввода – (textarea).

Но большинство элементов формы составляют элементы input, а атрибут обозначает тип поля ввода. Давайте рассмотрим их поочередно.

Если вы следуете совету и действительно набираете примеры, то вам нужно создать новый проект Foundation, открыть файл index.html и удалить содержимое образца (посмотрите этот пост по работе с Foundation). Затем добавьте пустой элемент form и необходимые элементы разметки Foundation.

<form>
    <div class="row">
        <div class="large-8 small-centered columns">
            <fieldset>
                <legend>Input types</legend>
             </fieldset>
            <input type="submit" value="Submit" class="button">
        </div>
    </div>
</form>

<form>

<legend>Input types</legend>

</fieldset>

</div>

</form>

Когда вы добавите все необходимые элементы и классы, вы просто можете добавлять каждый пример внутри тэгов fieldset, после элемента legend.

Заметка: в примерах кода ниже, вы заметите, что все элементы input имеют атрибуты name и id. Почему? Потому что вам нужен id для идентификации отдельных HTML элементов (чтобы применить стили CSS, и т.д.) Но для настоящей формы необходимо наличие name, чтобы данные отправленные на сервер имели соответствующие метки. Это не настоящие формы, это всего лишь прототипы. Но, это хорошая практика – делать правильно с самого начала. Золотое правило: для элементов input, используйте и id и name, и задавайте им одинаковое значение. (Исключение составляют переключатели – я объясню, чем они отличаются ниже.)

Текст и его варианты

Текст

<div class="row">
    <div class="small-12 columns">
        <label for="text_input">Type some text</label>
        <input type="text" id="text_input" name="text_input"></input>
    </div>
</div>

</div>

Элемент input типа text – это простое текстовое поле ввода. Нет никаких ограничений касательно того, что пользователь может в нем напечатать (хотя есть атрибуты, которые позволяют вам вводить ограничения, например, ограничить длину содержимого поля – смотрите ниже).

Пароль

<div class="row">
    <div class="small-12 columns">
        <label for="password_input">Password</label>
        <input type="password" id="password_input" name="password_input"></input>
    </div>
</div>

<label for="password_input">Password</label>

</div>

Элемент input типа password ведет себя точно также как текстовое поле ввода, за исключением того, что все напечатанное будет скрываться.

Email

<div class="row">
    <div class="small-12 columns">
        <label for="email_input">Email address</label>
        <input type="email" id="email_input" name="email_input"></input>
    </div>
</div>

<label for="email_input">Email address</label>

</div>

Элемент input типа email не отличается от текстового, за исключением того, что на телефонах и планшетах на клавиатуре появляются кнопки @ и точки сразу после того, как курсор поставлен в это поле, и вам не придется искать эти символы:

Клавиатура показана в соответствии с атрибутом

Он также предоставляет бесплатную валидацию, если вы введете что-то другое, а не валидный email-адрес и отправите форму, браузер покажет что-то подобное этому:

(В любом случае, это относится только к настольным браузерам. Мобильные браузеры пока такого не делают.)

Ссылка

<div class="row">
    <div class="small-12 columns">
        <label for="url_input">URL</label>
        <input type="url" id="url_input" name="url_input"></input>
    </div>
</div>

</div>

Поле ввода типа url отличается от email набором клавиатуры, здесь присутствуют клавиши / и точки (и возможно другие вроде .com).

Снова настольные браузеры автоматически валидируют:

Номер телефона

<div class="row">
    <div class="small-12 columns">
        <label for="tel_input">Phone number</label>
        <input type="tel" id="tel_input" name="tel_input"></input>
    </div>
</div>

<label for="tel_input">Phone number</label>

</div>

Тип поля ввода tel, показывает телефонную клавиатуру на смартфонах:

Клавиатура показана в соответствии с атрибутом

Номер

<div class="row">
    <div class="small-12 columns">
        <label for="number_input">A number</label>
        <input type="number" id="number_input" name="number_input"></input>
    </div>
</div>

<label for="number_input">A number</label>

</div>

Тип поля ввода number не вводит ограничений на содержимое, но на смартфонах (по крайней мере на iPhone), у вас появится обычная клавиатура, переведенная в режим ввода цифр и символов:

Клавиатура показана в соответствии с атрибутом

Различные настольные браузеры показывают это поле ввода по-разному. В IE и Firefox, оно выглядит так же как и текстовое, но в Chrome и Safari, появляются кнопки для увеличения и уменьшения значения:

Вы можете задать минимальные и максимальные значения, а также размер шага, что повлияет на поведение кнопок.

Автозаполнение

<div class="row">
    <div class="small-12 columns">
        <label for="input_list">Input + datalist</label>
        <input id="input_list" name="input_list" list="countries"></input>
        <datalist id="countries">
            <option value="Afghanistan">Afghanistan</option>
            <option value="Akrotiri">Akrotiri</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antarctica">Antarctica</option>
            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
            <option value="Argentina">Argentina</option>
            <option value="Armenia">Armenia</option>
            <option value="Aruba">Aruba</option>
            <option value="Ashmore and Cartier Islands">Ashmore and Cartier Islands</option>
            <option value="Australia">Australia</option>
            <option value="Austria">Austria</option>
            <option value="Azerbaijan">Azerbaijan</option>
        </datalist>
    </div>
</div>

<label for="input_list">Input + datalist</label>

<option value="Afghanistan">Afghanistan</option>

<option value="Akrotiri">Akrotiri</option>

<option value="Albania">Albania</option>

<option value="Algeria">Algeria</option>

<option value="American">American Samoa</option>

<option value="Andorra">Andorra</option>

<option value="Angola">Angola</option>

<option value="Anguilla">Anguilla</option>

<option value="Antarctica">Antarctica</option>

<option value="Antigua and Barbuda">Antigua and Barbuda</option>

<option value="Argentina">Argentina</option>

<option value="Armenia">Armenia</option>

<option value="Aruba">Aruba</option>

<option value="Ashmore and Cartier Islands">Ashmore and Cartier Islands</option>

<option value="Australia">Australia</option>

<option value="Austria">Austria</option>

<option value="Azerbaijan">Azerbaijan</option>

</datalist>

</div>

Пустое:

В процессе набора:

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

Другие типы

В HTML5 было введено множество типов элементов input, но большинство из них не поддерживаются широко. Они включают тип color и другие типы полей ввода связанных с датой и временем, таких как date, time, datetime, datetime-local, week, month.

Сейчас лучше использовать плагин jQuery Datepicker.

Остальные

Флажки

<div class="row">
    <div class="small-12 columns">
        <label>Input of type checkbox</label>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <input type="checkbox" id="cb_input_1" name="cb_input_1" value="cb1_true"></input>
        <label for="cb_input_1">Yes please!</label>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <input type="checkbox" id="cb_input_2" name="cb_input_2" value="cb2_true"></input>
        <label for="cb_input_2">This too!</label>
    </div>
</div>

<label>Input of type checkbox</label>

</div>

<label for="cb_input_1">Yes please!</label>

</div>

</div>

Если вы зададите элементу input тип checkbox, то вы получите флажок. Обычно их метки расположены справа. Для флажков атрибут for особенно важен – он делает метку кликабельный – нажатие на метку аналогично нажатию на сам флажок. Добавление атрибута checked (который не принимает аргументов) делает флажок активным при загрузке страницы. Для прототипа это не имеет значения, но в настоящей форме у флажка должен быть атрибут value.

Переключатели

<div class="row">
    <div class="small-12 columns">
        <label>Input of type radio</label>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <input type="radio" id="radio_1" name="rb" value="rb1_true"></input>
        <label for="radio_1">One</label>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <input type="radio" id="radio_2" name="rb" value="rb2_true"></input>
        <label for="radio_2">Two</label>
    </div>
</div>

<label>Input of type radio</label>

</div>

</div>

</div>

Как и с флажками, за элементом переключателем следует метка label. Атрибуты for и checked здесь работают аналогичным образом. Здесь, не забывайте задать всем переключателям в группе одно и то же значение атрибута name – это сообщит браузеру, что они вместе и только один из них может быть выбран одновременно. Снова, так же как и с флажками, каждый переключатель должен иметь атрибут value.

Слайдеры

<div class="row">
    <div class="small-12 columns">
        <label for="range_input">Input of type range (0&ndash;100)</label>
        <input type="range" id="range_input" name="range_input" value="50"></input>
    </div>
</div>

<label for="range_input">Input of type range (0–100)</label>

</div>

Тип range, заданный элементу input показывает слайдер. Также как и с числовым полем, вы можете задать значение минимума, максимума и размер шага. Но и эти ограничения не имеют особого значения сами по себе – если точность не важна, возможно, вам будет достаточно добавить текст перед и после элемента input, чтобы показать минимальное и максимальное значения. Но в большинстве случаев, вы скорее всего захотите предоставить пользователю некоторый отклик, чтобы пользователь знал, какое значение он выбрал.

Это не сложно и потребует совсем немного JavaScript кода, вы увидите его через минуту, ничего серьезного. Нам нужно взять уже существующий код HTML и добавить элемент output, чтобы показать значение. И мы добавляем атрибут oninput к полю input, чтобы сообщить ему, что делать при изменении значений.

В этой версии элементы input и output расположены в отдельных колонках, и я задал полю input ширину 100%, так что оно растянется, чтобы заполнить свою колонку:

<div class="row">
    <div class="small-12 columns">
        <label for="range_input">Input of type range (0&ndash;100)</label>
    </div>
</div>
<div class="row">
    <div class="small-4 columns">
        <input type="range" id="range_input" name="range_input" value="50" style="width: 100%;"
               oninput="range_output.value=range_input.value"></input>
    </div>
    <div class="small-8 columns">
        <output id="range_output" name="range_output" for="range_input">50</output>
    </div>
</div>

<label for="range_input">Input of type range (0–100)</label>

</div>

<input type="range" id="range_input" name="range_input" value="50" style="width: 100%;"

oninput="range_output.value=range_input.value"></input>

</div>

</div>

Маленький кусочек JavaScript кода, помещенный в значение атрибута oninput, устанавливает в значение поля output (range_value.value) значение поля input (range_input.value).(range_value это идентификатор поля output и range_input это идентификатор поля input. Добавление точки и value означает «значение атрибута value элемента с идентификатором».)

Выпадающие списки

<div class="row">
    <div class="small-12 columns">
        <label for="dropdown">Drop-down list</label>
        <select id="dropdown" name="dropdown">
            <option value="none" disabled selected>Select&hellip;</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
    </div>
</div>

<option value="none" disabled selected>Select…</option>

<option value="option1">Option 1</option>

<option value="option2">Option 2</option>

<option value="option3">Option 3</option>

</select>

</div>

Закрытый:

Открытый:

Выпадающие списки не являются элементами input — они создаются из элемента select, содержащего некоторое количество элементов option.

Это достаточно просто. То, что я добавил здесь – это первый элемент option — он подсказывает пользователю что делать, но не является вариантом, который можно выбрать. (Атрибут selected означает, что элемент будет показан при закрытом списке до того, как пользователь начнет взаимодействие.)

Без этой опции, «Option 1» будет выбран по умолчанию. Обычно мы не хотим, чтобы что-то было выбрано по умолчанию.

Текстовая область

<div class="row">
    <div class="small-12 columns">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" name="textarea" style="height: auto;" rows="6"></textarea>
    </div>
</div>

<label for="textarea">Textarea</label>

</div>

Поле textarea похоже на текстовое поле ввода, только оно позволяет вводить несколько строк текста. Также как и все другие поле ввода, похожие на текстовое, его ширина занимает 100% колонки, в которую оно помещено.

Что касается высоты, есть 2 способа задать ее. Первый способ – с помощью CSS (либо прямо к элементу добавить атрибут style). Второй – использовать атрибут rows, так как я это делаю здесь. Это делает textarea достаточно широкой, чтобы вместить 6 строк текста.

(Атрибут style=»height: auto;» нужен для того, чтобы обойти баг фреймворка Foundation. Если вы зададите определенную высоту вместо использования строк, то вам он не понадобится.)

Кнопки

<input type="submit" value="Submit" class="button">
<input type="button" value="Cancel" class="button secondary">

1 2	<input type="submit" value="Submit" class="button"> <input type="button" value="Cancel" class="button secondary">

Большинство форм содержит кнопки, на которые вам необходимо нажать, чтобы отправить информацию, которую вы ввели, на сервер. Некоторые формы имеют кнопки для каких-либо второстепенных действий, чтобы отменить ввод либо начать заполнение формы заново (хотя некоторые утверждают, что подобные второстепенные действия – плохая идея).

Кнопки в формах – это тэг input типа submit либо button. (submit – это специальный вид кнопки для отправки формы.) Правильное место для их расположения – после закрывающего тэга fieldset.

Для того, чтобы применить симпатичные стили Foundation для кнопок, назначаем кнопке «Отправить» класс .button, в то время как кнопка «Отменить» имеет класс .secondary, чтобы она меньше выделялась визуально.

Foundation также позволяет вам использовать элемент a для создания кнопок – просто задайте ему класс .button. Он также позволяет вам делать кнопки меньше, скруглять уголки, и так далее посредством добавления классов.

Другие полезные возможности Foundation

Foundation позволяет вам делать разные интересные вещи, которые не поддерживаются стандартными элементами HTML. Например, вы можете совместить поле ввода с меткой, чтобы получить что-то подобное:

Вы можете увидеть код здесь. Вы также можете совместить поле ввода с кнопкой, чтобы получить вот это:

Код для примера выше здесь.

Важные атрибуты

Я упоминал несколько атрибутов выше, таких как id и name, checked для флажков и переключателей, min, max и step для числовых и диапазонных полей, и так далее. Но есть несколько других, о которых вам необходимо знать.

autocomplete

Браузеры стараются по возможности помогать нам, автоматически заполняя поля форм. Но это не всегда уместно, например, для конфиденциальной информации такой как банковский счет или номер кредитной карты (и даже иногда пароли, хотя будьте готовы вызвать раздражение с этим). Задавая значение off атрибуту autocomplete, поле ввода говорит браузеру не заполнять его автоматически.

autofocus

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

disabled

Поле ввода, которому задан атрибут disabled затеняется серым, и вы не можете с ним взаимодействовать. Так может происходить потому, что оно нерелевантно, если другой элемент не имеет определенного значения. (Например, если в вашей форме есть секция «Как вы узнали о нас» с переключателями, последним может быть «Другой вариант» с текстовым полем, таким образом, пользователь может напечатать что-то чего нет в списке. Имеет смысл сделать это поле недоступным до тех пор, пока «Другой вариант» не выбран. Я раскрою эту тему полнее в следующем посту.)

maxlength

Текстовые поля ввода (text, email, url, tel, и т.д.) могут иметь атрибут maxlength. Это позволит вам задать максимальную длину в символах. Большинство браузеров не позволят вам больше указанного лимита. Это удобно для таких вещей как номер телефона, которые не могут быть длиннее, чем определенное количество символов.

multiple

Элемент select и input типа email (также типа file, для загрузки файлов, о которых я не рассказывал в этом посте) могут иметь атрибут multiple. Он позволяет выбирать несколько элементов из выпадающего списка либо вводить несколько email-адресов соответственно.

Обратите внимание на то, как по-иному отображается элемент select, когда разрешён выбор нескольких элементов.

pattern

pattern сообщает браузеру о том, как выглядит допустимое значение. Я раскрою эту тему в следующем посте, когда я буду говорить о валидации.

placeholder

Атрибут placeholder помещает текст подсказки внутрь тэга input (или textarea), чтобы дать пользователю представление о том, что ему нужно напечатать. Он исчезает когда вы кликаете по элементу input. Некоторые сайты используют его, чтобы обозначать какие поля являются обязательными для заполнения.

ВАЖНО: Не используйте этот атрибут вместо элемента label. Это очень плохо с точки зрения юзабилити и доступности.

required

Атрибут required означает, что это поле обязательное. Оно не изменяет свой внешний вид (звездочка не появляется магическим образом возле метки), но если вы отправите форму, не заполняя это поле, то вы получите полезное сообщение:

tabindex

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

Если вы делаете нечто странное с расположением вашей формы, например ваши поля ввода находятся на экране в порядке отличном от исходника страница, вам нужно использовать атрибут tabindex, чтобы убедиться, что фокус переходит в правильном порядке при табулировании.

Информация к размышлению

Мы сталкиваемся с дополнительными испытаниями на планшетах и телефонах. Как часто вам приходилось логиниться или регистрироваться на сайте с телефона и видеть что-то подобное?

На m.hpdirect.com пока я ввожу ID пользователя в форму логина, мой телефон автоматически делает первую букву заглавной и хочет исправить то, что я печатаю согласно своему словарю. Поэтому мне нужно нажать на маленький крестик, чтобы отказаться от авто исправления, и вернуться назад, чтобы изменить заглавную M на строчную.

Для полей как это, есть два атрибута, которые мы можем добавить, чтобы отключить это антисоциальное поведение: autocorrect и autocapitalize.

Они оба принимают значения: on или off. По умолчанию они имеют значение on.

Заключение

Надеюсь, теперь у вас есть хорошее представление о кирпичиках, которые вы можете использовать для построения прототипов форм. В следующем посте я покажу как группировать поля ввода в логические (и менее перегруженные) группы и как помогать пользователям при заполнении формы.

Автор: Martin Polley

Источник: //boxesandarrows.com/

Редакция: Команда webformyself.

Метки: атрибуты, формы