Адаптивная многоколоночная форма
Приветствую всех на своем блоге!
Опять давненько не писал сюда, хотя очень и обещал. Думаю что надо исправляться.
Сегодня рассмотрим многоколоночную форму, а самое главное она будет адаптивной.
Эта форма и в самом деле будет адаптивной, так как мы в стилях добавим медиа-запросы. Наша форма будет состоять из трех колонок, и в зависимости от размера экранов, они будут располагаться в определенном порядке. Элементы формы будут шириной в 100% и таким образом они будут приспосабливаются к размеру колонок.
Пример многостолбцовой формы с применением медиа-запросов для гибкой планировки.
Код 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; } }
Вот такая вот у нас получилась форма. На мой взгляд очень даже ничего! Но только если вам такая понадобиться — файл обработчика надо будет писать самому или найти примеры в интернете.
На этом буду заканчивать — до скорых встреч!
Dima, спасибо за комментарий.