CSS - Формы: Полное руководство для начинающих
Здравствуйте, будущие веб-дизайнеры! Сегодня мы окунемся в奇妙ный мир CSS форм. Как ваш добрый сосед по компьютеру, я с радостью провожу вас через это путешествие. Поверьте мне, к концу этого руководства вы будете стилизовать формы как профи!
CSS Форма - Стилизация шрифта и текста
Давайте начнем с основ. Точно так же, как мы одеваемся по разному для разных случаев, мы можем одеть наши элементы формы в разные шрифты и стили текста. Вот как:
input[type="text"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}Этот код instructs the browser to use the Arial font for text inputs, set the font size to 16 pixels, and make the text color dark gray (#333). Это как одеть вашу форму в удобный и читаемый костюм!
CSS Форма - Стилизация границ и фонов
Давайте добавим немного стиля нашим элементам формы с помощью границ и фонов:
input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}Этот код gives our text inputs a green border, slightly rounded corners, and a light gray background. Это как putting a pretty frame around your form elements!
CSS Форма - Использование отступов и полей
Теперь давайте дадим нашим элементам формы немного места для дыхания:
input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}Этот код добавляет немного пространства внутри input (padding) и_below it (margin). Это как дать вашим элементам формы их личное пространство!
CSS Форма - Стили фокуса
Когда пользователь щелкает по input, мы хотим выделить его. Вот как:
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}Этот код удаляет стандартную рамку и добавляет мягкое голубое свечение, когда input находится в фокусе. Это как сказать пользователю "Смотри на меня!"
CSS Форма - Стилизация кнопок
Кнопки - это супергерои вашей формы. Давайте сделаем их соответствующими:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}Этот код создает зеленую кнопку, которая затемняется при наведении. Это как дать вашей кнопке классный супергеройский костюм!
CSS Форма - Стилизация флажков и радиокнопок
Стилизация флажков и радиокнопок может быть сложной. Вот простой способ начать:
input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
}Этот код делает ваши флажки и радиокнопки немного больше и удобнее для щелчка. Это как дать им рост!
CSS Форма - Разметка формы
Теперь давайте организуем наши элементы формы:
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}Этот код центрирует нашу форму и ставит каждый label на свою строку. Это как наводить порядок в вашей комнате - у всего есть свое место!
Пример
Давайте соберем все вместе:
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email">
<button type="submit">Отправить</button>
</form>form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}Это создает простую, стилизованную форму. Это как складывать пазл - все детали идеально подходят!
CSS Форма - Box-sizing
Вот профессиональный совет: используйте box-sizing: border-box, чтобы сделать вашу жизнь проще:
* {
box-sizing: border-box;
}Этот код ensures that padding and border are included in the element's total width and height. Это как магия - больше никаких неожиданных переливов!
CSS Форма - Fieldset и Legend
Fieldsets и legends могут помочь организовать вашу форму:
fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}Этот код создает漂亮的 рамку вокруг связанных элементов формы с заголовком. Это как создавать главы в истории вашей формы!
CSS Форма - Полноширотный input
Иногда вы хотите, чтобы ваши input занимали все доступное пространство:
input[type="text"] {
width: 100%;
}Этот код делает ваш input растягивающимся, чтобы заполнить его контейнер. Это как дать вашему input большую растяжку!
CSS Форма - Окрашенный input
Давайте добавим немного цвета нашим input:
input[type="text"] {
background-color: #e6f3ff;
color: #00366d;
}Этот код gives our input a light blue background with dark blue text. Это как покрасить вашу форму в cool color scheme!
CSS Форма - Изображения в input
Вы можете даже добавлять изображения в ваши input:
input[type="text"] {
background-image: url('search-icon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}Этот код добавляет��索 иконку слева от input. Это как дать вашему input little avatar!
CSS Форма - Input с анимацией
Давайте добавим немного движения нашим input:
input[type="text"] {
transition: all 0.3s ease-in-out;
}
input[type="text"]:focus {
transform: scale(1.05);
}Этот код makes the input slightly larger when focused. Это как дать вашему input little dance move!
CSS Форма - Стилизация текстовых полей
Не забудьте о текстовых полях:
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
}Этот код стилизует ваше текстовое поле и позволяет изменять его размер вертикально. Это как дать вашим пользователям stretchy notepad!
CSS Форма - Стилизация выпадающих списков
Выпадающие списки также требуют любви:
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}Этот код creates a nice, clean dropdown menu. Это как дать вашим пользователям sleek vending machine для опций!
Адаптивная разметка формы
Наконец, давайте сделаем нашу форму адаптивной:
@media screen and (max-width: 600px) {
form {
width: 100%;
}
}Этот код делает форму полноширотной на smaller screens. Это как дать вашей форме shape-shifting superpower!
И вот и все! Вы только что научились стилизовать формы с помощью CSS. Помните, практика делает мастера, так что не бойтесь экспериментировать с этими стилями. Счастливого кодирования!
Credits: Image by storyset