Как изменить фон формы, чтобы она выглядела как две формы?

Question

Ниже то, что я пытаюсь достичь:

Это то, что я до сих пор: Я использую Drupal 7. Это ссылка на полигоне: http://test-caal.gotpantheon.com/

Это одна форма, которую я хочу сделать, выглядит как две. Есть ли способ добавить фоновое изображение, которое сделает его похожим на то, что я пытаюсь достичь?

Благодарим за помощь!

Izumi.

Answer 1

jsBin demo

форма позволяет использовать <fieldset></fieldset> теги.

так что-то вроде

<form id="" action="" method="">  
    <fieldset> 
     <!-- inputs here --> 
    </fieldset> 
    <fieldset> 
     <!-- inputs here --> 
    </fieldset>  
</form> 

и субэлемент соответственно, может быть то, что вы ищете. Посмотрите на вышеупомянутую демонстрационную ссылку.

<form id="" action="" method=""> 

    <fieldset> 
     <h3>Member Login</h3> 
     <input type="text" placeholder="Username"> 
     <input type="text" placeholder="Password"> 
    </fieldset> 
    <fieldset> 
     <h3>Partner Login</h3> 
     <input type="text" placeholder="Username"> 
     <input type="text" placeholder="Password"> 
    </fieldset> 

</form> 

Basic CSS:

form h3{ 
    color:#fff; 
    font-family:Helvetica, Arial, sans-serif; 
    font-size:1.4em; 
    padding:10px 0; 
    border-top:2px solid #fff; 
    border-bottom:1px solid #fff; 
} 
fieldset{ 
    background:#589FCF; 
    border: 5px solid #2E2E2E; 
    width:180px; 
    display:block; 
    float:left; 
    margin:0; 
} 
form input[type=text]{ 
    border:0; 
    padding:10px; 
    margin-bottom:2px; 
} 

Answer 2

За то, что вы пытаетесь достичь, две отдельные формы будет путь, так как у вас есть два различных sign in кнопки. Сделайте что-то вроде этого:

<div id="forms"> 
    <form id="form1"> 
    /*Form stuff goes here*/ 
    </form> 
    <form id="form2"> 
    /*Other form goes here*/ 
    </form> 
</div> 

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

#forms{ 
    background-color:black; 
} 
#form1 #form2{ 
    background-color:rgb(69,136,203); 
}