Подробное описание и демонстрация работы блока «Формы» для сайта под номером №5 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
<div class="form-bg"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-3 col-sm-2 control-label" for="exampleInputFirstName2">First Name</label> <div class="col-md-9 col-sm-10"> <input type="text" class="form-control" id="exampleInputFirstName2" placeholder="Eg.Steve"> </div> </div> <div class="form-group"> <label class="col-md-3 col-sm-2 control-label" for="exampleInputLastName2">Last Name</label> <div class="col-md-9 col-sm-10"> <input type="text" class="form-control" id="exampleInputLastName2" placeholder="Eg.Thomas"> </div> </div> <div class="form-group"> <label class="col-md-3 col-sm-2 control-label">Gender</label> <div class="col-md-9 col-sm-10"> <input class="check" type="radio" id="check1" name="radio"> <label for="check1">Male</label> <input class="check" type="radio" id="check2" name="radio"> <label for="check2">Female</label> </div> </div> <div class="form-group"> <label class="col-md-3 col-sm-2 control-label" for="exampleInputName2">Date of Birth</label> <div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="exampleInputName2" placeholder="DD"> </div> <div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="exampleInputName2" placeholder="MM"> </div> <div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="exampleInputName2" placeholder="YYYY"> </div> </div> <div class="form-group"> <label class="col-md-3 col-sm-2 control-label">Languages</label> <div class="col-md-9 col-sm-10"> <select class="form-control"> <option>English(US)</option> <option>English(Uk)</option> </select> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-sm-offset-2 col-sm-3"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </div> </div> </div>
.form-bg{ background: linear-gradient(to right,#014d6f 10%,#2b8e8b); font-family: 'Roboto', sans-serif; color: #fff; } .form-horizontal .form-group{ margin-bottom: 30px; } .form-horizontal .form-control{ background: transparent; border: 1px solid rgba(255,255,255,0.5); height: 44px; line-height: 2; color: #fff; padding: 10px 15px; } .form-horizontal .form-control:focus{ border-color: #fff; box-shadow:0 1px 3px rgba(255,255,255,0.5); outline: 0 none; } .form-horizontal .form-control::-moz-placeholder{ color: #fff; opacity: 0.5; } .form-horizontal .check{ display: none; } .form-horizontal .check + label{ display: inline-block; background-color: rgba(255,255,255,0.4); border-radius: 5px; padding: 10px 0; color: #fff; width: 48.4%; text-align: center; font-size: 15px; margin-right: 10px; } .form-horizontal #check2 + label{ margin-right: 0; } .form-horizontal .check:checked + label{ background: #fff; color: #0062bd; } .form-horizontal select.form-control option{ color: #000; background: #fff; } .form-horizontal .btn{ color: #fff; background-color: rgba(255,255,255,0.4); border: none; padding: 10px 30px; font-weight: 600; transition: all 0.2s ease 0s; } .form-horizontal .btn:hover{ color: #0062bd; background: #fff; } @media only screen and (max-width: 479px){ .check + label{ width: 48%; } }