When I click on a link on a form that will take a user to a page with the same background image, it does not load.
The form is a standard log in with password reset and create new account links. All three share pretty similar HTML code and the background image is loaded under the body and shared amongst all three htmls. I'm unsure if this falls under any other question answered or if I am blatantly missing something
Above is the HTML that is the same for both passwordreset.html and newaccount.html
The only difference is that the other two both share a "back to login" link.
I'd just expected the image would act as a sort of constant between each HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Login Form'</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox">
<i class="fas fa-user fa-7x"></i>
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Password</p>
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
Forgot your Password?<br>
Create an account
</form>
</div>
</body>
</html>
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Create New Account'</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox newaccount">
<i class="fas fa-user fa-7x"></i>
<h1>Create New Account</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Email</p>
<input type="email" name="" placeholder="Email">
<p>Password</p>
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Create">
Back to login screen<br>
</form>
</div>
</body>
</html>
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Reset Password'</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox passwordreset">
<i class="fas fa-user fa-7x"></i>
<h1>Password Reset</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Email</p>
<input type="email" name="" placeholder="Email">
<input type="submit" name="" value="Reset">
Back to login screen<br>
</form>
</div>
</body>
</html>
=================================================
CSS
=================================================
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("images/travel.jpg") no-repeat fixed center;
background-size: cover;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I tried to align my checkbox and label to the center of the screen but it wasn't moving at all. i tried to put it in the container tag but it result in the label of the check box is not align together. can someone please help with this problem?
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http-equiv= "X-UA-Compatible" content = "IE=edge">
<meta name= "viewport" content = "width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label>
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>
</body>
</html>
Add a class to your label in HTML:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http-equiv= "X-UA-Compatible" content = "IE=edge">
<meta name= "viewport" content = "width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label class = "checkbox">
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>
</body>
</html>
And then in your CSS move it to the right:
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
.checkbox {
left: 250px;
}
There are two ways to do this:
Make a div tag center contain the label checkbox.
Set label fullwidth and text center
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
/* add this style */
label {
display: flex !important;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class="form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class="form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label>
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type="submit" name="login" class="btn btn-block">
</p>
</div>
</body>
</html>
I created a form that it is connected to my google Doc but the problem the form is responsive to phone screen as it I want it to be. please check the attached picture
this how it looks in my phone browser
I want it to full screen like it is opened from an app. I have used materialize CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> creat PDF </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="name" type="text" class="validate">
<label class="active" for="name">First Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="id" type="text" class="validate">
<label class="active" for="id">Your Id</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="dep" type="text" class="validate">
<label class="active" for="dep">Your Department</label>
</div>
</div>
<button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit"
name="action">Submit
<i class="material-icons right">send</i>
</button>
<div id="msg">
<div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
You need to read the grid section of materialize css it is the most important section of any css framework.
Here is a solution:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> creat PDF </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col m6 offset-m3 s12 ">
<div class="input-field">
<input placeholder="Your name" id="name" type="text" class="validate">
<label class="active" for="name">First Name</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="id" type="text" class="validate">
<label class="active" for="id">Your Id</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="dep" type="text" class="validate">
<label class="active" for="dep">Your Department</label>
</div>
<button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit"
name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="row">
</div>
<div id="msg">
<div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign Up</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="sign-up-form">
<style>
body {
background-image: url("background.jpg");
}
</style>
<img src="./assets/user-Icon.png" alt="User Icon" />
<h1>Sign Up Now</h1>
<form action="/" method="GET">
<input
type="email"
class="input-box"
placeholder="Your E-Mail"
required
/>
<input
type="password"
class="input-box"
placeholder="Your password"
required
/>
<p>
<span
><input type="checkbox" name="Terms and Conditions" id="T&C"
/></span>
I agee to the Terms and Conditions
</p>
<a href="./home.html"
><button type="button" class="signup-btn">Sign Up</button></a
>
<!-- <hr>
<p class="or">OR</p>
<button type="button" class="twitter-btn">Log In with Twitter</button>
<p>Do you have an account Sign In</p> -->
</form>
</div>
</body>
</html>
I am trying to create a sign up form but on clicking the sign up button it redirects me to the
home page even when the fields are empty...I tried using the required tag but it is not working too. Please help!
You have placed the submit button inside a link (<a href="...">). This link takes precedence over the button, when the user clicks in that area.
The button would not submit the form, either. For this it needs a type of submit:
<button type="submit">Sign Up</button>
Because you wraped your button in a link that redirect you to a different page,, you should use <input type='submit' value='submit btn' /> to submit your form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="sign-up-form">
<style>
body {
background-image: url('background.jpg');
}
</style>
<img src="./assets/user-Icon.png" alt="User Icon">
<h1>Sign Up Now</h1>
<form action="/" method="GET">
<input type="email" class="input-box" placeholder="Your E-Mail" required/>
<input type="password" class="input-box" placeholder="Your password" required/>
<p><span><input type="checkbox" name="Terms and Conditions" id="T&C"></span> I agee to the Terms and Conditions</p>
home link
<input type="submit" class="signup-btn" value='Sign Up' />
<!-- <hr>
<p class="or">OR</p>
<button type="button" class="twitter-btn">Log In with Twitter</button>
<p>Do you have an account Sign In</p> -->
</form>
</div>
</body>
</html>
I am trying to create a inline form, but its not styling correctly.
Below is the code I am using:
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
This is how it renders in Chrome:
It seems your boostrap links are incorrect... I played around with your code and replaced the links and it worked fine. It looks like either you have put the downloaded files in the wrong place, or perhaps the example you found wasn't clear. When the src has a value like /static/css/bootstrap.min.css it is looking at the files on the server hosting the site. Perhaps you should use CDN links instead?
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
please see this picture!
I'm trying to align 'form element' to center.
here is what I tried.
1.I used .form-inline {margin: 0 auto;}2. added text-center in form class="form-inline"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="library/tether-master/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
< /html>
Could you please help me to find-out a solution of it?
Try the following CSS:
.form-inline {
margin: 0 auto;
display: table;
}
if your are using twitter-bootstrap why you not center with bootstrap elements ????? Offsetting columns
.com/css/#grid-offsetting
here is the Bootstrap solution, and its responsiv!
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container jumbotron">
<div class="row ">
<div class="col-sm-8 col-sm-offset-4 column">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</div>
</div>
</body>
</html>