Адаптивная многоколоночная форма
Приветствую всех на своем блоге!
Опять давненько не писал сюда, хотя очень и обещал. Думаю что надо исправляться.
Сегодня рассмотрим многоколоночную форму, а самое главное она будет адаптивной.
Эта форма и в самом деле будет адаптивной, так как мы в стилях добавим медиа-запросы. Наша форма будет состоять из трех колонок, и в зависимости от размера экранов, они будут располагаться в определенном порядке. Элементы формы будут шириной в 100% и таким образом они будут приспосабливаются к размеру колонок.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
Пример многостолбцовой формы с применением медиа-запросов для гибкой планировки.
Код HTML
<form class=»vikz-form»> <div class=»vikz-column»> <label for=»first_name»>Имя</label> <input type=»text» id=»first_name» name=»first_name» placeholder=»Василий»> <label for=»last_name»>Фамилия</label> <input type=»text» id=»last_name» name=»last_name» placeholder=»Пупкин»> <label for=»email»>Email Address</label> <input type=»text» id=»email» name=»email» placeholder=»vasya@pupkin.ru»> <label for=»country»>Страна</label> <select id=»country» name=»country»> <option>Выберите страну</option> <option>Россия</option> <option>Франция</option> <option>Италия</option> </select> <label for=»bio»>Биография</label> <textarea id=»bio» name=»bio»></textarea> </div> <div class=»vikz-column»> <label for=»phone»>Телефон</label> <input type=»text» id=»phone» name=»phone» placeholder=»+7 123 456 7890″> <label for=»affiliations»>Принадлежность</label> <textarea id=»affiliations» name=»affiliations»></textarea> <label>Профессия</label> <select id=»occupation» name=»occupation»> <option>Выберите профессию</option> <option>Вкб-дизйнер</option> <option>Веб-разработчик</option> <option>Программист</option> </select> <label for=»cat_name»>Имя кошки</label> <input type=»text» id=»cat_name» name=»cat_name» placeholder=»Пушистик»> <label for=»gagdet»>Любимый гаджет</label> <input type=»text» id=»gagdet» name=»gagdet» placeholder=»Планшет»> </div> <div class=»vikz-column»> <label>Талант</label> <select id=»talent» name=»talent»> <option>Выберите дар</option> <option>Ниндзя</option> <option>Сумоист</option> <option>Самурай</option> </select> <label for=»drink»>Любимый напиток</label> <input type=»text» id=»drink» name=»drink» placeholder=»Зеленый чай»> <label for=»power»>Особая энергия</label> <input type=»text» id=»power» name=»power» placeholder=»Антигравитация»> <label for=»weapon»>Лучшее оружие</label> <input type=»weapon» id=»weapon» name=»weapon» placeholder=»Световой меч»> <label for=»comments»>Комментарий</label> <textarea id=»comments» name=»comments»></textarea> </div> <div class=»vikz-submit-wrap»><input class=»vikz-submit» type=»submit» value=»Отправить» /></div> </form>
Код CSS
.vikz-form { position: relative; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .vikz-form:before, .vikz-form:after { content: » «; display: table; } .vikz-form:after { clear: both; } .vikz-column { width: 33%; padding: 10px 30px; float: left; } .vikz-form label { display: block; padding: 40px 5px 5px 2px; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; } .vikz-form input, .vikz-form textarea, .vikz-form select { font-family: ‘Lato’, Calibri, Arial, sans-serif; line-height: 1.5; font-size: 1.4em; padding: 5px 10px; color: #fff; display: block; width: 100%; background: transparent; } .vikz-form input, .vikz-form textarea { border: 3px solid #fff; } .vikz-form textarea { min-height: 200px; } .vikz-form input:focus, .vikz-form textarea:focus, .vikz-form label:active + input, .vikz-form label:active + textarea { outline: none; border: 3px solid #10689a; } .vikz-form select:focus { outline: none; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #10689a; font-style: italic; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #10689a; font-style: italic; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #10689a; font-style: italic; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #10689a; font-style: italic; } .vikz-submit-wrap { text-align: center; padding-top: 40px; clear: both; } .vikz-form input.vikz-submit { background: #10689a; border: none; color: #fff; width: auto; cursor: pointer; text-transform: uppercase; display: inline-block; padding: 15px 30px; font-size: 1.1em; border-radius: 2px; letter-spacing: 1px; } .vikz-form input.vikz-submit:hover { background: #1478b1; } @media screen and (max-width: 70em) { .vikz-column { width: 50%; } .vikz-column:nth-child(3) { width: 100%; } } @media screen and (max-width: 48em) { .vikz-column { width: 100%; padding: 10px; } }
Вот такая вот у нас получилась форма. На мой взгляд очень даже ничего! Но только если вам такая понадобиться — файл обработчика надо будет писать самому или найти примеры в интернете.
На этом буду заканчивать — до скорых встреч!
Демонстрация Исходники