Как добавить форму входа в изображение с помощью HTML и CSS?

Опубликовано: 17 Декабря, 2021

Форма входа на Изображение используется на многих веб-сайтах. Как веб-сайт отелей, который содержит фотографии отелей или некоторых организаций, которые организуют какие-то специальные мероприятия, с изображением этого мероприятия и формой входа в систему. В этом случае вы можете создать на этой картинке форму входа или регистрации. Такой дизайн сделает сайт более привлекательным, чем обычная форма входа или регистрации. Чтобы создать форму входа в систему на изображении, вам просто понадобятся HTML и CSS. Приведенный ниже пример иллюстрирует подход к этой концепции.
Создание структуры: в этом разделе мы создадим базовую структуру веб-сайта для создания формы входа в систему на изображении.

HTML-код: HTML-код используется для разработки структуры формы входа.

html

 <!DOCTYPE html>
 < html >
 < head >
    < meta name = "viewport"
          content = "width=device-width, initial-scale=1" >
 </ head >
 < body >
    < div class = "bg-img" >
        < h1 >GeeksforGeeks</ h1 >
        
        < form class = "container" >
            < b >Username</ b >
            < input type = "text" placeholder = "Username Please"
                    name = "username" required> 
            < b >Password</ b >
            < input type = "password" placeholder = "Enter Password"
                    name = "password" required> 
            < button type = "submit" class = "button" >Login</ button >
        </ form >
    </ div >
 </ body >
 </ html > 

Проектирование структуры. В предыдущем разделе мы создали структуру базового веб-сайта. В этом разделе мы разработаем структуру формы входа.

CSS-код структуры:

CSS

    <style>
        body {
            height : 100% ;
            font-family : Arial , sans-serif ;
        }
        
        * {
            box-sizing: border-box;
        }
        
        h 1 {
            text-align : center ;
            color : green ;
            -webkit-text-stroke: 1px black ;
        }
        
        /* styling background image */
        .bg-img {
            background-image : url (
 " https://media.geeksforgeeks.org/wp-content/uploads/20191212174641/bg1.png " );
            min-height : 380px ;
            background- size : cover;
        }
    
        /* Styling the form container */
        .container {
            position : absolute ;
            left : 28px ;
            top : 50px ;
            margin : 20px ;
            max-width : 300px ;
            padding : 16px ;
        }
        b {
            color : green ;
            font-size : 26px ;
            -webkit-text-stroke: 1px black ;
        }
    
        /* Full-width input */
        input[type=text],
        input[type=password] {
            width : 100% ;
            padding : 15px ;
            margin : 15px 0px ;
            border : 2px solid green ;
        }
        
    
        /* Styling the submit button */
        .button {
            background-color : green ;
            color : white ;
            padding : 16px 16px ;
            border : none ;
            cursor : pointer ;
            width : 100% ;
        }
        
        .button:hover {
            transform: scale( 1.1 );
            transition: transform 0.3 s;
        }
    </style>

Объединение кода HTML и CSS: это последний код после объединения двух вышеупомянутых разделов. Вы можете видеть, что форма входа с выравниванием по левому краю на изображении более привлекательна по сравнению с обычной формой входа.

html

 <!DOCTYPE html>
 < html >
 < head >
    < meta name = "viewport"
        content = "width=device-width, initial-scale=1" >
    < style >
        body {
            height: 100%;
            font-family: Arial, sans-serif;
        }
        
        * {
            box-sizing: border-box;
        }
        
        h1 {
            text-align:center;
            color:green;
            -webkit-text-stroke: 1px black;
        }
        
        /* styling background image */
        .bg-img {
            background-image: url(
 " https://media.geeksforgeeks.org/wp-content/uploads/20191212174641/bg1.png ");
            min-height: 380px;
            background-size: cover;
        }
    
        /* Styling the form container */
        .container {
            position: absolute;
            left: 28px;
            top: 50px;
            margin: 20px;
            max-width: 300px;
            padding: 16px;
        }
        b {
            color: green;
            font-size:26px;
            -webkit-text-stroke: 1px black;
        }
    
        /* Full-width input */
        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 15px;
            margin: 15px 0px;
            border: 2px solid green;
        }
        
    
        /* Styling the submit button */
        .button {
            background-color: green;
            color: white;
            padding: 16px 16px;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        
        .button:hover {
            transform: scale(1.1);
            transition: transform 0.3s;
        }
    </ style >
 </ head >
 < body >
    < div class = "bg-img" >
        < h1 >GeeksforGeeks</ h1 >
        
        < form class = "container" >
            < b >Username</ b >
            < input type = "text" placeholder = "Username Please"
                    name = "username" required> 
            < b >Password</ b >
            < input type = "password" placeholder = "Enter Password"
                    name = "password" required> 
            < button type = "submit" class = "button" >Login</ button >
        </ form >
    </ div >
 </ body >
 </ html > 

Выход:

Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

Как добавить форму входа в изображение с помощью HTML и CSS?

html

CSS

html

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