my goal is to create something like this :enter image description here
So an area where I can put a form for authentification or create an account. I already created a form in php which is linked to my database like this
<form action="connection.php" method="post">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
function inscription($db,$nom,$prenom,$mail,$tel,$mdp){
try{
$request_client = "INSERT INTO client (nom, prenom, mail, tel, mdp) VALUES (:nom, :prename, :email, :phone,:pass);";
$statement_client = $db->prepare($request_client);
$statement_client->bindParam(':nom', $nom);
$statement_client->bindParam(':prename', $prenom);
$statement_client->bindParam(':email', $mail);
$statement_client->bindParam(':phone', $tel);
$statement_client->bindParam(':pass', $mdp);
$statement_client->execute();
}
catch (PDOException $exception)
{
error_log('Request error: '.$exception->getMessage());
return false;
}
}
Is there something in boostrap or css or even js which can make me creat this blue area ?
You can do this with CSS, something like:
.blue-box {
max-width: 450px;
margin: 1rem auto;
padding: 1rem;
background: #3b52a5;
border-radius: 8px;
color: #fff;
}
.blue-box .form-group {
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0.5rem 0;
}
.blue-box .form-group input {
padding: 0.75rem 1rem;
margin-top: 0.25rem;
border: 1px solid #060537;
border-radius: 8px;
background: none;
outline: none;
color: #fff;
}
.blue-box button {
padding: 0.75rem 1rem;
margin: 0.5rem auto;
background: #060537;
border-radius: 8px;
width: 100%;
outline: none;
border: none;
color: #fff;
}
body {
background: #7db9ff;
font-family: sans-serif;
}
<form action="connection.php" method="post" class="blue-box">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
</form>
Perhaps it might be enough to make the background color of <form> into the blue that you want and also add a little padding to it so that the form fields aren't right at the edge of the box.
HTML p-3 will be your padding but only on sites that use Bootstrap.
<form class="blueBox p-3" action="connection.php" method="post">
CSS
.blueBox{
background: blue;
}
Related
I have a request form in which I have a table with pre-typed text (which belongs to other field in form in HR) which is in hide/show select option. I need some help in which when the user selects the selected it shows a table with pre-typed text and when the user submits in PHP form, the recipient so gets the exact data in the email.
I have the hide/show part working but the I'm having problems sending the table with text.
i have $usersGMGroup = nl2br($_POST["acc_GMGroup"]); so i can have the text can go to next line.
Currently, I didn't have any way in which I could submit the table so I have the same table text written in textarea, which works but when I submit the form with data and the recipient gets textarea text with the other request. For example, if I sent a request for an IT service the form also sends the textarea pre type text.
Is there any way i can make the textarea with pre type text only submit when its select is selected
$(function() {
$("#groups").change(function() {
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
});
});
$('#groups').trigger('change');
//---------------------Hide Functions When Program Loads--------------------------------//
$(document).ready(function() {
$("#acc_GMGroup").hide();
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<h2>Requestor's Information Employee's Information</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>PUBLIC<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>DCManager<br>InboundManagers<br>SrManager</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup">
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
</div>
</div>
</div>
<!-- End of Right Side -->
</div>
</div>
</form>
you can have it disabled by default by adding disabled attribute to it which will prevent the field from being submitted with the rest of the form
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup" disabled>
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
and re-enable it when option selected
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
$("#acc_GMGroup").prop('disabled','');
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
$("#acc_GMGroup").prop('disabled','disabled');
}
Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.
I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.
I want to make a "NumPad" where I can type in a 4-digit-keycode in an input field. After I click the four buttons, the submit-button gets pressed. I found a few code-snippets and it worked if I use the keyboard. This is how far I come:
function addNum(num){
document.getElementById('login').value += num;
}
$('#login').keyup(function(){
if(this.value.length == 4){
$('#enter').click();
}
});
#numpad {
width: 200px;
}
.row {
width: 100%;
}
.number {
min-width: 26%;
height: 60px;
float: left;
border: 1px solid;
margin: 10px;
vertical-align: middle;
display: block;
font-size: 2em;
padding-top: 8px;
padding-left: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
a:hover .number {
background: black;
color: white;
}
<form action="action.php" method="post" name="loginform" id="loginform">
<input type="password" class="form-control" name="login" id="login">
<input type="submit" id="enter" value="Submit">
</form>
<div id="numpad">
<div class="row">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
</div>
<div class="row">
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
</div><div class="row">
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
Add your submit check to your addNum() function:
function addNum(num)
{
document.getElementById('login').value += num;
if((document.getElementById('login').value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/))
{
alert("Form Submitted");
document.forms["loginform"].submit();
}
}
$('#login').keyup(function() {
if((this.value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/))
{
alert("Form Submitted");
document.forms["loginform"].submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action.php" method="post" name="loginform" id="loginform">
<input type="password" class="form-control" name="login" id="login">
<input type="submit" id="enter" value="Submit">
</form>
<div id="numpad">
<div class="row">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
</div>
<div class="row">
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
</div><div class="row">
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
You may want to validate that it is actually a 4-digit number using regex:
document.getElementById('login').value.match(/^\d{4}$)
The form submission is blocked here that is why I put the alert in...
You can clean this up a fair bit by replacing your inline click events with a listener:
$(function(){
$('#numpad a').on("click",function(e){//listen for clicks on the numpad elements
e.preventDefault();//don't follow the link
$('#login').val($('#login').val()+$(this).text()).change();//append the value
});
$('#login').on("change keyup",function(){//on change or keyup
if($(this).val().length == 4){//if the val is 4 chars long
//$('#loginform').submit();//trigger submission
$('#enter').click();//or click the submit button if you dont want to bypass the browsers native validation
}
});
$('#loginform').on("submit",function(e){//on submit
if($(this)[0].checkValidity()){//if valid
e.preventDefault();//stop submission for this demo only (remove when live)
alert("submitted!");//do an alert (demo only, remove when live)
} else {
e.preventDefault();//prevent submission
alert("Invalid!");//do an alert
}
$('#login').val("");//reset the input
});
});
#numpad {
width: 250px;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
#numpad a {
width: 60px;
line-height: 60px;
display:inline-block;
border: 1px solid;
margin: 10px;
vertical-align: middle;
font-size: 2em;
text-align:center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#numpad a:hover {
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action.php" method="post" name="loginform" id="loginform">
<input type="password" class="form-control" name="login" id="login" required="required" pattern="[0-9]{4}" title="4 numbers only" maxlength="4" />
<input type="submit" id="enter" value="Submit" />
</form>
<div id="numpad"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a></div>
i have written a password form in HTML and it has some good functionality however, i have just made a change and the css is effecting the elements. basically when i click on the different input boxes it effects the labels of my form by shifting them slightly up to down.
here is a jsfiddle so people can see the change visibly.
https://jsfiddle.net/b6hv8wLh/
here is some code:
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>
</div>
i have tried wrapping my form in various divs and trying to hit indivdual elements but it is still making changes. just to make clear, i am trying to get it to a stage where the user clicks the input and the labels do not change at all.
many thanks
This is caused by you assigning the border:4px solid red; styling to your input on focus. This causes the input's overall size to become larger which moves down the elements below it.
One way to prevent this is to give the input 4px border the same colour as the background. The border will then change to red on focus and become visible but the size will not have actually changed:
input {
background-color: #fff;
margin-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-radius: 15px;
border:4px solid #D8D8D8;
}
It's the additional border:4px solid #D8D8D8; declaration which makes the difference.
It is because of border of input field when focus. Hence add border property for input field with same background color of the form.
input {
border:4px solid #D8D8D8;
}
Immediate solution
In your case, the fix is really simple. The border size of the input boxes should not change when they are in focus.
So, for example the inputs on focus have this style:
border: 4px solid red;
But when they are out of focus, they do not have a border. So you should set a 4px border with the same color as the background when it is not in focus.
Bootstrap-like solution
Alternatively, you should consider using a single pixel border, with a box shadow instead. Just like Bootstrap does it, which you use as I see. IMHO this does look great, especially in contrast with these huge borders.
Use box-shadow no need for any extra CSS with this.
/* CHANGE BORDER TO BOX SHADOW ON THE FOCUS */
.f1input:focus{
outline: none !important;
box-shadow: 0 0 0 4px red;
border-radius: 15px;
}
body {
background-color: #080808;
}
/*
.navbar-brand {
background-color: red;
}
*/
.container-fluid{
background-color: #006600;
border: 0;
}
#websiteName a{
color: black;
font-size: 20px;
}
#websiteName a:hover{
color: red;
}
#theLinks ul li a{
color: black;
font-size: 20px;
}
#theLinks ul li a:hover{
color: red;
}
#firstform{
background-color: #D8D8D8;
}
#firstform span{
position: absolute;
}
.glyphicon-search
{
position:relative !important;
}
#firstform .themessage{
position: absolute;
}
#firstform {
width: 60%;
margin: auto;
text-align: center;
}
#firstform h1{
text-align: center;
}
#firstform label{
text-align: left;
}
#myform {
width: 100%;
}
input {
background-color: #fff;
margin-left: 10px;
margin-bottom: 10px;
padding-right: 50px;
border-radius: 15px;
border: none;
}
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<label>Username </label> <input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip"><br>
<div class="pwordCheck">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<label>Email </label> <input type="email" class="f1input" id="e-mail"/><br>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<label>Job Role</label> <input type="text" class="f1input"/><br>
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/><br>
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/><br>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form>
</div>
Try this:
#myform{
width: 450px;
margin: 0 auto;
}
.sep{
padding: 10px;
}
body {
background-color: #080808;
}
/*
.navbar-brand {
background-color: red;
}
*/
.container-fluid{
background-color: #006600;
border: 0;
}
#websiteName a{
color: black;
font-size: 20px;
}
#websiteName a:hover{
color: red;
}
#theLinks ul li a{
color: black;
font-size: 20px;
}
#theLinks ul li a:hover{
color: red;
}
#firstform{
background-color: #D8D8D8;
}
#firstform span{
position: absolute;
}
.glyphicon-search
{
position:relative !important;
}
#firstform .themessage{
position: absolute;
}
#firstform h1{
text-align: center;
}
.sep label{
padding: 10px;
}
input {
background-color: #fff;
margin-left: 10px;
padding-right: 50px;
border-radius: 15px;
border: none;
}
.f1input:focus{
outline: none !important;
border:4px solid red;
border-radius: 15px;
}
input#occupation{
background-color: #999;
}
.mytooltip + .tooltip > .tooltip-inner {
background-color: #f00;
}
label{
display:inline-block;
width:150px;
}
/*
#-webkit-keyframes example{
25% {color: black;}
50% {color: yellow;}
75% {color: green;}
100% {color: red;}
}
#firstform h1{
color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}*/
.dropdown:hover .dropdown-menu {
display: block;
}#myCarousel {
width:50%;
margin: auto;
background-color: red;
text-align: center;
}
#myCarousel item {
text-align: center;
}
enter code here
<div class="container">
<div class="jumbotron" id="firstform">
<h1>Sign up page</h1>
<form id="myform">
<div class="sep">
<label>Username </label>
<input type="text" name="uname" class="f1input" id="uname" data-placement="bottom" title="" data-original-title="Username must be unique" class="mytooltip">
</div>
<div class="pwordCheck sep">
<label>Password </label> <input type="password" class="f1input" id="pword" data-placement="bottom" title="" onkeyup="passwordValidation(); return false;" data-original-title="Password must be more than 6 characters long" class="mytooltip"><br>
<label>Confirm Password </label> <input type="password" class="f1input" id="confpword" onkeyup="passwordValidation(); return false;" data-placement="bottom" title="" data-original-title="Passwords must match" class="mytooltip">
<span id="themessage" class="themessage"></span><br>
</div>
<div class="sep">
<label>Email </label> <input type="email" class="f1input" id="e-mail"/>
</div>
<div class="dropdown sep">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select job
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Java Developer</li>
<li>SQL Developer</li>
<li>Tester</li>
</ul>
</div>
<div class="sep">
<label>Job Role</label> <input type="text" class="f1input"/>
</div>
<div class="sep">
<label>Age </label> <input type="number" class="f1input" id="age" oninput="ifOfAge(); return false;"/>
</div>
<div class="sep">
<label>Can you drive? </label> <input type="text" class="f1input" id="drive" disabled/>
</div>
<input type="submit" value="Submit" onclick="usernameAlreadyExists(); return false;"/>
</form> `enter code here`
</div>
I'm not sure where I went wrong but my bootstrap form won't work as is because I can't type anything into the form boxes. If I move the form boxes above the third div from the top the email box works and if I move them above the second div from the top both boxes work. Can anyone explain what's going on and how to fix this?
<div class ="container" style= "height:150px;">
<div id="Logo" class="col-xs-12 col-md-11">
<img id="CashPass" src="assets/images/CashPassLogo (2).png"/>
</div>
</div>
<div class="container" style= "height:500px;" id="intro">
<div id="HomeTopContainer" class="col-xs-12 col-md-8">
<h3>
Something <i>Something</i>
</h3>
<img id="Something" src="https://abc123.jpg"/>
</div>
<div id="signup"> <!--style="height:500px; padding-right: 10%;"-->
<div class="col-xs-6 col-md-4">
<h1 class="hit">
Something
</h1>
<form class="form" name="form" ng-submit="signUp()" novalidate>
<div class="form-group"
ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
<!--<label>Email</label>-->
<input type="email" name="email" class="form-control" placeholder = "Email" ng-model="user.email" required/>
</div>
<div class="form-group"
ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
<!--<label>Password</label>-->
<input type="password" name="password" class="form-control" placeholder = "Password" ng-model="user.password"
ng-minlength="3"
required/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
Password must be at least 3 characters.
</p>
</div>
</form>
</div>
</div>
<div class= "hit">
<button class="btn btn-inverse btn-lg btn-login" id = "Join" type="submit">
Join
</button>
<a class="btn btn-default btn-lg btn-register" id = "login" href="/stuff">
Login
</a>
</div>
The SCSS is as follows:
.hit {
position: relative;
padding: 30px 15px;
/*color: #F5F5F5;*/
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
/*background: #4393B9;*/
.center-block{};
}
.center-block {
font-size: 5em;
width: 150px;
height: 150px;
text-align: center;
};
/*id*/
#intro {
background-color: #add8e6;
}
#glyphicon{
text-align: right;
font-size: 5em;
}
#HomeTopContainer {
text-align: center;
}
#signup{
margin-left: auto;
margin-right: auto;
}
#bottomborder{
height: 75px;
background-color: #19469D;
margin-top: -7px;
text-align: center;
font-size: 20px;
}
You basically have elements overlapping each other. Your class .hit is stacked on top of your other containers (you can see it if you allow that aqua background color to show) To get around this add this CSS:
#signup {
position: relative;
z-index: 10;
}
crazymatt, thanks again for your response, though it wasn't right it got me on the right track. I actually added the following code to fix it:
.form-group{
position: relative;
z-index: 10;
}