CSS | Формы для укладки
CSS-форма используется для создания интерактивной формы для пользователя. Он предоставляет множество способов задать стиль.
Доступно множество свойств CSS, которые можно использовать для создания и стилизации HTML-форм, чтобы сделать их более интерактивными, некоторые из которых перечислены ниже:
- Селектор атрибутов: Тип атрибута формы ввода может принимать различные формы в зависимости от выбора пользователя. Это может быть что угодно из возможных типов, таких как текст, поиск, URL-адрес, тел., Электронная почта, пароль, выбор даты, номер, флажок, радио, файл и т. Д. Пользователь должен указать тип при создании формы.
Пример:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
b
>Is Geeksforgeeks useful ?</
b
>
<
form
>
<
input
type
=
"radio"
name
=
"useful"
value
=
"yes"
checked>
Yes <
br
>
<
input
type
=
"radio"
name
=
"useful"
value
=
"def_yes"
>
Definitely Yes
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
Рассмотрим другой пример, где тип ввода - просто текст:<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>Do you find Geeksforgeeks helpful?</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Стилизация ширины ввода : свойство width используется для установки ширины поля ввода. Рассмотрим пример ниже, где ширина установлена равной 10% от всего экрана.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
}
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>Do you find Geeksforgeeks helpful?</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Добавить отступы во входные данные : свойство padding используется для добавления пробелов внутри текстового поля. Рассмотрим пример ниже:
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
padding: 12px;
}
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>Do you find Geeksforgeeks helpful?</
Считаете><
br
>
>Do you find Geeksforgeeks helpful?</
b
><
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Set Margin for Inputs : Свойство margin используется для добавления места за пределами поля ввода. Это полезно, когда есть много входов. Рассмотрим приведенный ниже пример с двумя входами и обратите внимание на расстояние (отступ) между ними.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
margin: 8px;
}
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>Mention two topics that you liked on Geeksforgeeks</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Добавление границы и радиуса границы: свойство границы используется для изменения размера и цвета границы, тогда как свойство границы-радиуса используется для добавления закругленных углов.
Рассмотрим ниже примере , в котором твердое вещество 2рх красная граница создается с радиусом приграничном 4px.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
margin: 8px;
border: 2px solid red;
border-radius: 4px;
}
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>
Mention two topics that you liked on
Geeksforgeeks
</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
Примечание. Пользователь также может иметь границу с любой стороны и удалять другие или иметь все границы разного цвета. Рассмотрим приведенный ниже пример, где пользователю нужна граница только сверху (синий цвет) и снизу (красный цвет).
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
margin: 8px;
border: none;
border-top: 3px solid blue;
border-bottom: 3px solid red;
}
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>
Mention two topics that you liked on
Geeksforgeeks
</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Добавление цвета к тексту и фону : свойство color используется для изменения цвета текста во вводе, а свойство background-color используется для изменения цвета фона поля ввода.
Рассмотрим приведенный ниже пример, где цвет текста черный, а цвет фона установлен на зеленый.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
margin: 8px;
border: none;
background-color: green;
color: black;
}
body{
background-color:white;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>
Mention two topics that you liked
on Geeksforgeeks
</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Селектор фокуса : когда мы нажимаем на поле ввода, он получает контур синего цвета. Вы можете изменить это поведение, используя селектор: focus.
Рассмотрим приведенный ниже пример, где пользователю нужен сплошной красный контур 3 пикселя и зеленый фон, когда он сфокусирован.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width:10%;
margin: 8px;
color: black;
}
input[type=text]:focus {
border: 3px solid red;
background-color: green;
}
body{
background-color:white;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>
Mention two topics that you liked
on Geeksforgeeks
</
b
>
<
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
<
input
type
=
"text"
name
=
"info"
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Добавление изображений в форму ввода : свойство background-image может использоваться для помещения изображения внутри формы ввода, и его можно позиционировать с помощью свойства background-position, и пользователь также может решить, повторять или нет.
Рассмотрим приведенный ниже пример с изображением в фоновом режиме в режиме без повтора.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width: 20%;
background-image: url('search.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
body{
background-color:white;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>Search on Geeksforgeeks</
b
><
br
>
<
input
type
=
"text"
name
=
"info"
placeholder
=
"Search.."
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
- Свойство перехода: свойство перехода можно использовать над полем ввода, чтобы изменить размер поля, указав ослабленную ширину и ширину в фокусе, а также период времени, в течение которого будет выполняться операция.
Рассмотрим пример ниже, где ширина поля ввода в расслабленном режиме составляет 15%, которая при фокусировке изменяется до 30% за 1 секунду.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
input{
width: 15%;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
input[type=text]:focus {
width: 30%;
border:4px solid blue;
}
body{
background-color:green;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
form
>
<
b
>Search on Geeksforgeeks</
b
><
br
>
<
input
type
=
"text"
name
=
"info"
placeholder
=
"Search.."
><
br
>
</
form
>
</
center
>
</
body
>
</
html
>
Выход :
Когда расслаблен-
Когда сфокусирован-