CSS | Формы для укладки

Опубликовано: 5 Января, 2022

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 > 

Выход :
Когда расслаблен-

Когда сфокусирован-

Technical Scripter Picked CSS

CSS | Формы для укладки

РЕКОМЕНДУЕМЫЕ СТАТЬИ