├── README.md ├── so-you-need-an-input.md ├── so-you-need-an-input.mindnode.zip ├── so-you-need-an-input.mm └── so-you-need-an-input.png /README.md: -------------------------------------------------------------------------------- 1 | # Итак, вам нужен инпут 2 | Данное руководство содержит исчерпывающие инструкции по выбору элементов веб-форм. 3 | 4 | ![so-you-need-an-input](https://raw.githubusercontent.com/pfrankov/so-you-need-an-input/master/so-you-need-an-input.png) 5 | 6 | #### Ситуация 7 | Вы — дизайнер, который с уважением относится к своим коллегам по фронту и к пользователям вашего веб-приложения. 8 | Перед вами непростая задача: спроектировать форму. Если вы нормальный, адекватный человек — вы терпеть не можете проектировать формы. Фронтендер ненавидит эти формы верстать. Бекендер ненавидит их валидировать. А пользователь, в свою очередь, ненавидит их заполнять. 9 | 10 | ## Как спроектировать форму правильно? 11 | ### Начнём с аксиом 12 | - Любое обучение интерфейсу имеет цену в реальных деньгах; 13 | - Лучший интерфейс — это отсутствие интерфейса; 14 | - Отличный интерфейс — это знакомый интерфейс; 15 | - Компоненты интерфейса должны быть максимально знакомыми, а поведение — ожидаемым; 16 | - Сложно придумать что-то лучше, чем использовать стандартные компоненты операционной системы; 17 | - Меньше нестандартных компонентов → быстрее разработка, дешевле поддержка; 18 | - Меньше форма → больше вероятность её заполнения; 19 | - Сыр пахнет грязными носками. 20 | 21 | Теперь, когда вы потеряли бдительность, самое время разобрать несколько вариантов типичных полей: 22 | 23 | ### Имя пользователя 24 |

25 |

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

31 |

32 | 33 | ### Пол 34 |

35 |

36 | 37 | ### Дата рождения 38 |

39 |

54 | 55 | ## Контрибуция 56 | Фил фри ту фок! 57 | 58 | Нашли ошибку, но лень сделать PR? Есть предложения по схеме, но нет [MindNode](https://itunes.apple.com/app/mindnode-5/id1289197285)? [Заведи ищю](https://github.com/pfrankov/so-you-need-an-input/issues/new) и иди пить кофе; специально обученный разработчик сделает всё за тебя. 59 | -------------------------------------------------------------------------------- /so-you-need-an-input.md: -------------------------------------------------------------------------------- 1 | # Итак, вам нужен инпут 2 | 3 | 4 | ## Количество 5 | 6 | ### Текст 7 | 8 | ## Любой текст 9 | 10 | ### Текста может быть больше, 11 | чем 80 символов? 12 | 13 | - Да 14 | 15 | - Текстовый 16 | блок 17 | 18 | - Нет 19 | 20 | - Текст 21 | 22 | ## Выбор из фиксированных значений 23 | 24 | ### Множественный выбор 25 | или возможность 26 | отмены? 27 | 28 | - Да 29 | 30 | - < 5 31 | 32 | - Чекбокс 33 | 34 | - >= 5 35 | 36 | - Мультиселект 37 | 38 | - > 30 39 | 40 | - Чипсы 41 | 42 | - Нет 43 | 44 | - < 5 45 | 46 | - Радио-кнопка 47 | 48 | - >= 5 49 | 50 | - Селект 51 | 52 | - > 30 53 | 54 | - Комбобокс 55 | 56 | ## Время 57 | 58 | ### Диапазон? 59 | 60 | - Да 61 | 62 | - 2 поля подряд 63 | 64 | - Нет 65 | 66 | - Дата 67 | 68 | - Важен ли день недели? 69 | 70 | - Да 71 | 72 | - Текстовый инпут 73 | с календарём 74 | 75 | - Нет 76 | 77 | - День 78 | 79 | - Текст 80 | 81 | - Месяц 82 | 83 | - Как записан месяц 84 | в источнике? 85 | 86 | - Номер 87 | месяца 88 | 89 | - Текст 90 | 91 | - Название 92 | месяца 93 | 94 | - Селект 95 | 96 | - Год 97 | 98 | - Текст 99 | 100 | - Время 101 | 102 | - Часы 103 | 104 | - Текст 105 | 106 | - Минуты 107 | 108 | - Текст 109 | 110 | -------------------------------------------------------------------------------- /so-you-need-an-input.mindnode.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/so-you-need-an-input/77f0c1b85c6b08aa7026085c9e34e4b8564f3255/so-you-need-an-input.mindnode.zip -------------------------------------------------------------------------------- /so-you-need-an-input.mm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 39 | 40 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /so-you-need-an-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/so-you-need-an-input/77f0c1b85c6b08aa7026085c9e34e4b8564f3255/so-you-need-an-input.png --------------------------------------------------------------------------------