so-you-need-an-input

KO | EN

gitlite — search

#java #nodejs #python #vue #visualization #kubernetes #linux #robotics #android #csharp #cli #unity3d

so-you-need-an-input

★ 31 Open GitHub ↗

Незаменимый помощник в проектировании веб-форм

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Итак, вам нужен инпут
Данное руководство содержит исчерпывающие инструкции по выбору элементов веб-форм.

![so-you-need-an-input](https://raw.githubusercontent.com/pfrankov/so-you-need-an-input/master/so-you-need-an-input.png)

#### Ситуация
Вы — дизайнер, который с уважением относится к своим коллегам по фронту и к пользователям вашего веб-приложения.  
Перед вами непростая задача: спроектировать форму. Если вы нормальный, адекватный человек — вы терпеть не можете проектировать формы. Фронтендер ненавидит эти формы верстать. Бекендер ненавидит их валидировать. А пользователь, в свою очередь, ненавидит их заполнять.

## Как спроектировать форму правильно?
### Начнём с аксиом
- Любое обучение интерфейсу имеет цену в реальных деньгах;
- Лучший интерфейс — это отсутствие интерфейса;
- Отличный интерфейс — это знакомый интерфейс;
- Компоненты интерфейса должны быть максимально знакомыми, а поведение — ожидаемым;
- Сложно придумать что-то лучше, чем использовать стандартные компоненты операционной системы;
- Меньше нестандартных компонентов → быстрее разработка, дешевле поддержка;
- Меньше форма → больше вероятность её заполнения;
- Сыр пахнет грязными носками.

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

### Имя пользователя
<img width="263" src="https://user-images.githubusercontent.com/584632/37239874-738c34a6-2453-11e8-98ce-865d450219c9.png"/>  
<img width="143" alt="login" src="https://user-images.githubusercontent.com/584632/37020922-acfbb112-212e-11e8-8358-897063c28916.png">

_Информация для программистов на HTML:_ Понятное дело, `type` инпутов нужно подбирать по смыслу: если нужен *email* — потрудитесь проставить именно этот тип.

### Пароль
<img width="263" src="https://user-images.githubusercontent.com/584632/37239874-738c34a6-2453-11e8-98ce-865d450219c9.png"/>  
<img width="138" alt="password" src="https://user-images.githubusercontent.com/584632/37020924-ad171f06-212e-11e8-998b-4f6eaed0029f.png">

### Пол
<img width="263" src="https://user-images.githubusercontent.com/584632/37239877-747961d6-2453-11e8-84c0-6a0b56998213.png"/>  
<img width="215" alt="sex" src="https://user-images.githubusercontent.com/584632/37020925-ad364fca-212e-11e8-80c5-180a46afca8e.png">

### Дата рождения
<img width="527" src="https://user-images.githubusercontent.com/584632/37239872-70eecdf8-2453-11e8-9f45-63ff074d791d.png"/>  
<img width="168" alt="birth" src="https://user-images.githubusercontent.com/584632/37021756-ba0c0d04-2131-11e8-9241-9d4974893c11.png">

## Правильные ответы на правильные вопросы
### А когда использовать слайдер?
Никогда не используйте слайдер.

### Но как же я буду ограничивать пользователя, чтобы он специально не ввёл некорректные данные?
Для этого вы будете использовать валидацию полей на клиенте и на сервере.

### Что ещё за «Комбобокс»?
Смесь селекта и инпута. Инпут используется для поиска.

### Чипсы?
Chips. Типа теги такие.  
<img width="330" alt="chips" src="https://user-images.githubusercontent.com/584632/37021181-b8c9b27c-212f-11e8-87ae-1a25e4203bce.png">

## Контрибуция
Фил фри ту фок!

Нашли ошибку, но лень сделать PR? Есть предложения по схеме, но нет [MindNode](https://itunes.apple.com/app/mindnode-5/id1289197285)? [Заведи ищю](https://github.com/pfrankov/so-you-need-an-input/issues/new) и иди пить кофе; специально обученный разработчик сделает всё за тебя.

so-you-need-an-input

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README