Как создать: адаптивные формы
- Предыдущая страница Складная форма
- Следующая страница Всплывающая форма
Узнайте, как использовать CSS для создания адаптивных форм.
Адаптивные формы
Измените размер окна браузера, чтобы увидеть эффект (на较小的 экранах, этикетки и поля ввода будут堆积ированы, а не расположены lado a lado):
Как создать адаптивную форму
Шаг 1 - Добавьте HTML:
Используйте элемент <form> для обработки ввода. Вы можете узнать больше о PHP в наших учебных курсах.
Добавьте ввод для каждого поля (с соответствующими этикетками) и используйте элементы <div> для обертывания каждой этикетки и ввода, чтобы можно было задать ширину с помощью CSS:
<div class="container"> <form action="action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">Имя</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Ваше имя.."> </div> </div> <div class="row"> <div class="col-25"> <label for="lname">Фамилия</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Ваше фамилия.."> </div> </div> <div class="row"> <div class="col-25"> <label for="country">Страна</label> </div> <div class="col-75"> <select id="country" name="country"> <option value="australia">Австралия</option> <option value="canada">Канада</option> <option value="usa">США</option> </select> </div> </div> <div class="row"> <div class="col-25"> <label for="subject">Тема</label> </div> <div class="col-75"> <textarea id="subject" name="subject" placeholder="Напишите что-то.." style="height:200px"></textarea> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div>
第二步 - Добавление CSS:
/* Установка стиля для полей ввода, элементов выбора и текстовых областей */ input[type=text], select, textarea{ width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; } /* Установка стиля метки, чтобы она отображалась рядом с полем ввода */ label { padding: 12px 12px 12px 0; display: inline-block; } /* Установка стиля кнопки отправки */ input[type=submit] { background-color: #04AA6D; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } /* Установка стиля контейнера */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } /* Флоатингый столбец метки: ширина 25% */ .col-25 { float: left; width: 25%; margin-top: 6px; } /* Флоатингый столбец ввода: ширина 75% */ .col-75 { float: left; width: 75%; margin-top: 6px; } /* Удаление плавающих после столбцов */ .row:after { content: ""; display: table; clear: both; } /* Респонсивная вёрстка - когда ширина экрана меньше 600px, два столбца должны быть расположены друг над другом, а не lado в lado */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }
Связанные страницы
Урок:HTML форма
Урок:CSS форма
- Предыдущая страница Складная форма
- Следующая страница Всплывающая форма