×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

    Наверное, многие задаются вопросом, как можно самому создать сайт для ведения бизнеса в интернете или просто для реализации своих интеллектуальных способностей.

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

    По существу, она представляет вводную часть сборника статей по столь интересной и полезной теме. И в общих чертах поясняет некоторые особенности создаваемого сайта.

    И надеюсь, что данный материал поможет многим желающим создать с нуля самописный сайт, который в дальнейшем можно будет самостоятельно поддерживать и развивать.

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Формы → Стилизуем элементы формы с помощью CSS


Автор: / Дата:

Стилизация элементов формы с помощью CSS

Стилизуем элементы формы с помощью CSS

Здравствуйте уважаемый посетитель!

В прошлой статье мы создали форму онлайн заказа. А сегодня с помощью CSS займемся стилизацией ее полей.

При этом, добавив в форму некоторые HTML-элементы, будем ее оформлять используя резиновую верстку. Таким образом, чтобы во всем, предусмотренном для нашего сайта диапазоне разрешения экрана, все ее поля отображались пропорционально ширине страницы.

Следует отметить, что такое подробное рассмотрение оформления элементов формы с помощью стилей CSS будет сделано только для ранее созданной формы онлайн заказа.

В дальнейшем, для других форм, основное внимание будет уделяться вопросам их создания и обеспечения функционала. Рассмотрение же аналогичных действий по стилизации форм, ввиду их однотипности, проводиться не будет.

Содержание


  • Добавляем в форму дополнительные HTML-элементы
  • Оформляем внешний вид полей формы
  • Формируем размер и отступы полей для минимального разрешения экрана 320px
  • Формируем по 2 элемента в ряду при увеличении разрешения
  • Увеличиваем количество элементов в ряду до 3-х при значительном увеличении ширины экрана
  • Исходные файлы сайта

Добавляем в форму дополнительные HTML-элементы


Как было отмечено, при оформлении формы мы будем использовать резиновую верстку. Но при этом только расширять и сужать ее элементы для разной ширины экрана, очевидно, будет недостаточно. Так как для нашего сайта диапазон возможного разрешения варьируется в довольно в широких пределах - от 320px до 1920px.

Поэтому, кроме изменения ширины полей, для некоторых полей мы также в зависимости от разрешения экрана будем по-разному их компоновать. А именно, по количеству элементов в ряду - 1, 2 или 3.

А для этого в ранее созданной форме онлайн заказа сгруппируем элементы с помощью дополнительных блоков <dιv>, обозначив их классами "input_1", "input_2" и т.д.

Кроме того, для возможности более гибкого оформления элементов формы, также выделим в отдельные блоки <dιv> ее разделы, обозначив их классами: "righting_1", "righting_2" и "righting-button".

В итоге измененный код формы онлайн заказа примет следующий вид (вновь добавленные элементы выделены светлым фоном).

  1. <div class="article">

  2. <h1>Оnline заявка на получение скидки при установке противоугонных систем автомобиля</h1>

  3. <div class="chapter">

  4. <form name="righting" action="#" method="post">

  5. <h2>Форма заказа</h2>

  6. <hr>

  7. <div class="righting_1">

  8. <h3>Данные об автомобиле</h3>

  9. <div class="input_1">

  10. <label for="marka">Марка автомобиля:</label>

  11. <select id="marka" name="marka" required>

  12. <option selected></option>

  13. <?php

  14. $table = "avto";

  15. $data_bd = getAll($table);

  16. for ($i = 0; $i < count($data_bd); $i++) {

  17. $marka = $data_bd[$i]["marka"];

  18. print "<option value=\"$marka\">$marka</option>";

  19. }

  20. ?>

  21. </select>

  22. </div>

  23. <div class="input_1">

  24. <label for="model">Модель:</label>

  25. <input type="text" id="model" name="model" required>

  26. </div>

  27. <div class="input_1">

  28. <label for="year">Год выпуска:</label>

  29. <select id="year" name="year" required>

  30. <option selected></option>

  31. </select>

  32. </div>

  33. <div class="input_1">

  34. <label for="vin">Последние 6 цифр VIN:</label>

  35. <input type="text" id="vin" name="vin" title="Должно быть только 6 последних цифр VIN-кода" required>

  36. </div>

  37. <div class="input_1">

  38. <label for="insurance">Страховая компания:</label>

  39. <select id="insurance" name="insurance" required>

  40. <option selected></option>

  41. <?php

  42. $table = "insurance";

  43. $data_bd = getAll($table);

  44. for ($i = 0; $i < count($data_bd); $i++) {

  45. $insurance = $data_bd[$i]["name"];

  46. print "<option value=\"$insurance\">$insurance</option>";

  47. }

  48. ?>

  49. </select>

  50. </div>

  51. </div>

  52. <div class="righting_2">

  53. <h3>Выбор способа маркировки и определение стоимости</h3>

  54. <div class="input_3">

  55. <label for="order">Вид заказа:</label>

  56. <div>

  57. <select id="order" name="order" required>

  58. <option value="0" selected></option>

  59. <option value="1">Набор для самостоятельной маркировки</option>

  60. <option value="2">Противоугонная маркировка специалистом в сервис-центре</option>

  61. <option value="3">Маркировка с индивидуальным дизайном</option>

  62. </select>

  63. </div>

  64. </div>

  65. <div class="input_4">

  66. <label for="center-price">Цена сервис-центра:</label>

  67. <div>

  68. <input type="text" id="center-price" name="center-price" value="0р.">

  69. </div>

  70. </div>

  71. <div class="input_5">

  72. <label for="discount-price">Цена со скидкой:</label>

  73. <div>

  74. <input type="text" id="discount-price" name="discount-price" value="0р.">

  75. </div>

  76. </div>

  77. </div>

  78. <div class="righting-button">

  79. <input type="submit" name="righting-button" value="Отправить">

  80. </div>

  81. </form>

  82. </div>

  83. </div>

Рис.1 Измененный HTML-код формы онлайн заказа

С HTML-кодом формы мы закончили и теперь можем перейти к назначению стилей CSS.

Оформляем внешний вид полей формы


В первую очередь оформим внешний вид полей и кнопки формы учитывая существующий дизайн сайта. И за основу возьмем элементы, которые мы ранее создавали при формировании сайдбара.

Вариант такого CSS-кода, предназначенного для полей онлайн заказа, представлен в следующей таблице.

  1. /*-----Форма онлайн заказа-----*/

  2. select[name="marka"], input[name="model"], select[name="year"], inputinput[name="vin"], select[name="insurance"], select[name="order"], input[name="center-price"], input[name="discount-price"] {

  3. height: 1.875em;

  4. width: 100%;

  5. box-sizing: border-box;

  6. background: #fdfadc;

  7. box-shadow: .1875em .1875em .3125em 0 #8b8e8d inset;

  8. border-radius: .3125em;

  9. border-bottom: .125em solid #eee;

  10. border-right: .125em solid #eee;

  11. color: #006;

  12. padding: .25em .5em 0 .5em;

  13. }

  14. select[name="marka"], input[name="model"], select[name="year"], input[name="vin"], select[name="insurance"] {

  15. margin-top: .25em;

  16. }

  17. input[name="center-price"], input[name="discount-price"] {

  18. text-align: right;

  19. }

  20. input[name="discount-price"] {

  21. color: #0d9203;

  22. }

  23. input[name="righting-button"] {

  24. height: 1.875em;

  25. margin-bottom: .625em;

  26. padding: 0 .375em 0 .375em;

  27. border-radius: 0.3125em;

  28. background: #a76d6d;

  29. text-align: center;

  30. font-weight: bold;

  31. color: #fff;

  32. background-image: linear-gradient(to top, #653939, #a76d6d 70%, #c39696);

  33. box-shadow: .125em .125em .25em 0 #422a2a;

  34. border-width: .125em;

  35. border-style: solid;

  36. border-color: #ddbebe #241616 #241616 #ddbebe;

  37. }

  38. input[name="righting-button"]:hover {

  39. box-shadow: none;

  40. border-color: #c39696 #a76d6d #653939 #a76d6d;

  41. }

  42. input[name="righting-button"]:active {

  43. box-shadow: 0 0 .4375em .125em #422a2a inset;

  44. border-color: #777 #fff #fff #777;

  45. }

Рис.2 CSS-код по оформлению внешнего вида полей

В данном фрагменте кода для полей <select> и <input> применены стили CSS, аналогично тому, как мы это выполняли для поля <input> при оформлении элементов сайдбара.

В основном это относится к типовым свойствам, указанным в позициях 3÷12. При этом ширина для всех элементов задана в 100% (поз.4), что позволяет в дальнейшем определять размеры полей соответствующими родительскими блоками.

Кроме того, для некоторых элементов применены дополнительные свойства. Так, в полях с именами "center-price" и "discount-price", которые предназначены для указания цены, содержащийся в них текст выровнен в правую сторону (поз.18). И к этому дополнительно изменен цвет цены со скидкой в поле с именем "discount-price" (поз.21). Сделано это для того, чтобы каким-то образом выделить значение в этом поле относительно полной цены.

Что же касается кнопки отправки формы, то она стилизована аналогичным образом, как ранее было показано при оформлении кнопок сайдбара. Где довольно подробно рассмотрено, как можно их сделать объемными и интерактивными.

В данном случае основные типовые свойства кнопки отправки формы в исходном состоянии указаны в позициях 24÷36.

Переход из исходного состояния в положение наведения курсором на кнопку имитируется отменой тени с помощью свойства box-shadow (поз.39) и изменением цвета бордюров (поз.40).

Активное же ее состояние (при щелчке на кнопку и ее удержании) отображается с помощью добавления внутренней тени (поз.43) и соответствующим изменением цвета бордюров (поз.44).

После добавления этого фрагмента кода в таблицу стилей CSS, находящуюся в файле "main.css" папки "styles" корневого каталога, можно проверить, как теперь будут отображаться элементы формы. Ниже для сравнения показы скриншоты до и после выполненных преобразований для варианта разрешения экрана в 320px (снимки сделаны в браузере Google Chrome в режиме мобильного устройства).

Вид формы до преобразований полей

Рис.3 Вид формы до преобразований полей

Вид формы после преобразований полей

Рис.4 Вид формы после преобразований полей

Как видно, после преобразований поля формы существенно изменились и стали похожими на аналогичные элементы сайта.

Формируем размер и отступы полей для минимального разрешения экрана 320px


Внешний вид элементов мы оформили. Однако, на данный момент напрашивается в их размер и расположение внести некоторые корректировки, например:

  • в разделе "Данные об автомобиле" уместно было бы уменьшить ширину полей, скажем до 70% от ширины страницы;
  • в разделе "Выбор способа маркировки и определение стоимости" неплохо было бы разместить в один ряд с полями <input> соответствующие элементы <label>;
  • для полей цены заказа, в которых предусматривается отображение небольшого количества символов, можно назначить достаточный по ширине фиксированный размер;
  • кнопку отправки формы, наверное, лучше разместить по центру страницы;
  • и конечно, следует оптимально отрегулировать все отступы между элементами.

Вариант CSS-кода, в котором предусмотрены перечисленные преобразования, приведен в следующей таблице.

  1. .righting_1, .righting_2 {

  2. margin: 1em 0 1em 0;

  3. overflow: hidden;

  4. }

  5. .input_1 {

  6. width: 70%;

  7. margin: 1em auto 0 auto;

  8. }

  9. .input_1 select, .input_1 input{

  10. margin-top: .25em;

  11. }

  12. .input_3 div, .input_4 div, .input_5 div, .input_3 label, .input_4 label, .input_5 label{

  13. display: table-cell;

  14. vertical-align: middle;

  15. }

  16. .input_3, .input_4, .input_5 {

  17. margin-top: 1.25em;

  18. }

  19. .input3 label{

  20. min-width: 6em;

  21. }

  22. .input_4 label, .input_5 label{

  23. width: 10.25em;

  24. }

  25. .input_4 div, .input_5 div{

  26. width: 4.5em;

  27. }

  28. .righting-button {

  29. width: 6.5em;

  30. margin: 1.25em auto 0 auto;

  31. }

Рис.5 CSS-код по формированию размера и отступов полей

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

  • позиция 2,3 - для группы элементов, заключенных в контейнеры с классами "righting_1" и "righting_2" определены внешние отступы и ограничение при переполнении их контентом;
  • поз.6,7 - элементы раздела "Данные об автомобиле" отцентрованы и для них определена ширина в 70% от ширины страницы ;
  • поз.10 - задано расстояние по вертикали между элементами <input> и <label> раздела "Данные об автомобиле";
  • поз.13,14 - для того, чтобы разместить в один ряд, тип элементов <div> и <label> раздела "Выбор способа маркировки и определение стоимости" определен, как ячейка таблицы, с вертикальным выравниванием их содержимого;
  • поз.17 - задано расстояние по вертикали между элементами раздела "Выбор способа маркировки и определение стоимости";
  • поз.20,21,26 - задана ширина полей раздела "Выбор способа маркировки и определение стоимости".
  • поз.29,30 - кнопка отправки формы перемещена в центр страницы.

Теперь добавим этот код в таблицу стилей CSS и посмотрим на полученный результат.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид формы после стилизации элементов

Рис.6 Вид формы после стилизации элементов

На скриншоте видно, что стилизованная форма приобрела вполне логичный и пропорциональный вид.

На этом преобразования полей формы при минимальной ширине в 320px закончим и перейдем к следующему этапу - адаптации для больших разрешений экрана.

Формируем по 2 элемента в ряду при увеличении разрешения


Если теперь увеличивать ширину экрана, то можно отметить, что при величине разрешения в районе 380px, поля раздела "Данные об автомобиле" будет становиться излишне широкими.

Поэтому, для такого режима целесообразно перегруппировать элементы, расположив их по два в ряду. Это несложно будет сделать применив следующий медиа-запрос.

  1. @media only screen and (min-width: 380px) {

  2. .input_1 {

  3. float: left;

  4. margin: 0.5em 0 0.5em 0;

  5. width: 48.5%;

  6. }

  7. .righting_1 div:nth-child(2), .righting_1 div:nth-child(4) {

  8. margin: 0.5em 3% 0.5em 0 0;

  9. }

  10. }

Рис.7 Медиа-запрос по размещению двух элементов в ряду при разрешении более 380px

Здесь для блоков <dιv> с классом "input_1" выполнены следующие преобразования:

  • с помощью свойства float блоки <dιv> сделаны плавающими (поз.3) для того, чтобы они могли располагаться в одном ряду друг за другом;
  • Отменена центровка элементов по центру исключив из наружных отступов margin ранее назначенное значение auto (поз.4);
  • ширина элементов определена в 48.5%, при которой в одном ряду могут разместиться два элемента (поз.5), где 3 оставшихся процента из возможных ста оставлено для отступа между полями.

А для задания отступа для нужных полей, свойством margin назначается отступ вправо на величину 3%. В данном случае таким элементами являются 2-ой и 4-ый блоки <dιv> контейнера класса "righting_1". Что и определено с помощью псевдо-классов nth-child.

После добавления медиа-запроса в таблицу стилей CSS и обновления страницы при разрешении экрана более 380px можно увидеть полученные изменения.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид формы при разрешении более 380px.

Рис.8 Вид формы при разрешении более 380px.

Как видно форма несколько преобразилась, и элементы раздела "Данные об автомобиле" стали располагаться по два в ряду.

Увеличиваем количество элементов в ряду до 3-х при значительном увеличении ширины экрана


Если и дальше увеличивать ширину экрана, то окажется, что при определенном значении разрешения неплохо будет еще раз перегруппировать поля, выстроив их по три в ряд.

Сделать это можно с помощью еще одного медиа-запроса, изменив некоторое параметры предыдущего. Ниже показан его CSS-код, в котором в качестве контрольной точки принято значение в 900px.

  1. @media only screen and (min-width: 900px) {

  2. .input_1 {

  3. width: 31.33%;

  4. }

  5. .righting_1 div:nth-child(4) {

  6. margin: 0.5em 0 0.5em 0 0;

  7. }

  8. .righting_1 div:nth-child(2), .righting_1 div:nth-child(3), .righting_1 div:nth-child(5) {

  9. margin: 0.5em 3% 0.5em 0 0;

  10. }

  11. }

Рис.7 Медиа-запрос по размещению трех элементов в ряду при разрешении более 900px

Как видно, в этом случае ширина элементов уменьшена до 31.33% (поз.3), что позволяет их разместить по три в ряду. При этом 6% оставлено для отступов между полями (два отступа по 3%)

Что касается назначения отступов, то здесь они предусмотрены для 2-ого, 4-ого и 5-ого блока <dιv>(поз.9). При этом отступ ранее назначенному 3-ему блоку - отменен (поз.6).

Ниже показан скриншот, как теперь будет выглядеть форма после внесенных изменений при разрешении экрана более 900px.

Для увеличения / уменьшения размера изображения кликните по картинке
Вид формы при разрешении более 900px.

Рис.10 Вид формы при разрешении более 900px.

Как видно, мы получили нужный для этого режима результат - расположение полей раздела "Данные об автомобиле" по три в ряду.


В итоге, после стилизации элементов с помощью стилей CSS, форма приобрела вполне подходящий для данного дизайна сайта вид, причем способная подстраиваться под разные режимы отображения страницы.

На этом вопрос по оформлению элементов формы мы закончим. В следующих статьях будем заниматься созданием новых форм и обеспечением их функционала.

Исходные файлы сайта


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

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учитывать в дальнейшем мнение посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments