<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
}
.wrapper{
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper" style="width: 500px; margin: 0 auto; background: #000; color: #fff;">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<?php
if(!empty($login_err)){
echo '<div class="alert alert-danger">' . $login_err . '</div>';
}
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>">
<span class="invalid-feedback"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? Sign up now.</p>
</form>
</div>
</body>
</html>
I need to show my wrapper class at the center of the page. I have researched and find out some methods, but this only centered horizontally and the login form is at top of the page. Can someone show me how to use this code to show my login form at the center of page? I need horizontal and vertical center.
I have changed the css class as well. But no any changes.
I am getting the output as below,
I need to show as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
font: 14px sans-serif;
height: 100%;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding: 20px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
width: 500px;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="wrapper" style="">
<h2>Login</h2>
<p>Please fill in your credentials to login.</p>
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control <?php echo (!empty($username_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $username; ?>">
<span class="invalid-feedback"><?php echo $username_err; ?></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<p>Don't have an account? Sign up now.</p>
</form>
</div>
</body>
</html>
This should do it. I also removed the inline css. You should avoid this in future. I took the main information from this answer.
Related
I have a small HTML file where I want the particle.js as a background but it just shows up on a certain portion of the screen please recommend some solution to it
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital#1&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background:grey;
}
body .container-fluid .row .col-12 ,body .container-fluid .row .col-sm-1
{
left: 35%;
}
#wel
{
margin-left: 6%;
font-family: 'Rowdies', cursive;
}
h3,h6
{
font-family: 'Work Sans', sans-serif;
}
#submit-button
{
margin-left: 6%;
;
}
#particles-js
{
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>strong password generator</title>
<br>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="particles-js"></div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 id="wel">WELCOME!!!!</h1>
</div>
<div class="col-12">
<br>
<p>
<h3>GENERATE A STRONG PASSWORD</h3>
</p>
</div>
</div>
<form action="{% url 'password' %}" method="GET">
<div class="form-group row">
<label class="col-sm-1 col-form-label" for="select-number">
Length:
</label>
<div class="col-sm-3 col-12">
<input type="number" name="select-number" min="6" max="20" value="12" selected='selected' placeholder="Length">
</div>
<div class="col-12">
<span>
<label for="UPPER" class="col-form-label">
<h6> UPPER : </h6>
</label>
<input type="checkbox" name="UPPER">
</span>
<span>
<label for="specialcharacter" class="col-form-label">
<h6>SPECIAL CHARACTER : </h6>
</label>
<input TYPE="checkbox" name="specialcharacter">
</span>
<span>
<label for="number" class="col-form-label">
<h6>NUMBER : </h6>
</label>
<input type="checkbox" name="number">
</span>
<br><input type="submit" value="GENERATE PASSWORD" class="btn btn-primary btn-lg" id="submit-button">
</div>
</div>
</form>
</div>
<script src="./particles.js"></script>
<script src="./app.js"></script>
</body>
</html>
This is the HTML and CSS code that I use. I am using Django in the backend but I don't think it will be necessary for debugging this. So, I'm not including it here.
Add these styles to your particle ID,
The point is using z-index.
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
z-index: 0;
overflow: hidden;
Use z-index and position: relative;
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
Am creating a login form on a website whereby am having trouble creating an alert box at the top of the form that should display error messages after server-side validation and sanitization of the user input.The problem is that when the page loads, it displays the alert-box, while I want it to display only when displaying error messages. Please assist?
HTML PART
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="form">
<span class="info">
<?php
echo
$fNameErr;
$lNameErr;
$emailErr;
?>
</span>
<br>
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<h1>Sign Up for Free</h1>
<form action="signup.php" method="post" autocomplete="off">
<div class="top-row">
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Firstname*" type="text" value="<?php echo $firstname;?>" required autocomplete="off" name='firstname' />
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="LastName*" type="text" value="<?php echo $lastname;?>" required autocomplete="off" name='lastname' />
</div>
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Email Address*" type="email" value="<?php echo $email;?>" required autocomplete="off" name='email' />
</div>
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input placeholder="Set A Password*" type="password"required autocomplete="off" name='password'/>
</div>
<button type="submit" class="button button-block" name="register">Register</button>
</form>
</div> <!-- /form -->
</div>
</body>
</html>
style.css page
.info {
color: pink;
display: block;
text-align: center;
padding: 5px;
margin-top: -20px;
margin-bottom: 15px;
border: 1px solid red;
background: #66131c;
}
<span class="info">
<?php
echo
$fNameErr;
$lNameErr;
$emailErr;
?>
</span>
try changing this to the below. let me know how it goes
<?php
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo "<span class='info'>";
echo $fNameErr . $lNameErr . $emailErr;
echo "</span>"
}
?>
I assume that you'd only want this to display when those variables have some kind of value and they would otherwise be blank. It would be pretty easy to only output this HTML element when that is the case. Perhaps something like this:
<?php if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo
"<span class='info'>"
$fNameErr;
$lNameErr;
$emailErr;
"</span>";
} ?>
<?php
if(isset($fnameErr) || isset($lNameErr) || isset($emailErr)){
echo '<span class="info">';
echo $fNameErr;
echo $lNameErr;
echo $emailErr;
echo '</span>';
}
?>
try this. If it does not work , show us your php code too
I have an HTML form that submits to a Coldfusion action page. For some reason, the form struct does not come through? The 2 files index.cfm and add.cfm are both in the same directory. When I submit the form the test text in the processing page shows, but not the form. I also do not see the form variables in the CF debugger.
What am I missing?
index.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Slideshow Admin</title>
<!--- <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> --->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
h1 {
font-size: 34px;
}
h2 {
font-size: 26px;
}
.yt-container {
padding: 2% 5%;
max-width: 1400px;
margin: 0 auto;
}
.input-short {
max-width: 200px;
}
.input-shorter {
max-width: 100px;
}
.input-med {
max-width: 500px;
}
.input-long {
max-width: 800px;
}
</style>
</head>
<body>
<div class="yt-container">
<h1>Video Slideshow Admin</h1>
<!-- form -->
<h2 class="form-title">Add Video</h2>
<p class="required">* Required</p>
<form name="vidform" action="add.cfm" method="post">
<div class="form-group">
<label for="heading">Heading</label>
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
</div>
<div class="form-group">
<label for="url">Embed URL*</label>
<input type="text" class="form-control input-long" id="url" placeholder="Embed URL" value="" required>
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control input-short" id="status">
<option ng-selected="formData.type == null">Select</option>
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</div>
<div class="form-group">
<label for="order_seq">Order Sequence</label>
<input type="text" class="form-control input-shorter" id="order_seq" placeholder="Order" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
add.cfm
We are here
<cfdump var="#form#">
<cfabort>
Every form input needs a name attribute as well.
This is what Coldfusion is looking for when you post the form.
So:
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
Becomes:
<input type="text" class="form-control input-med" id="heading" name="heading" placeholder="Heading" value="">
This goes the same for <select> and checkbox / radio
Following is my CSS code :
.registerFormContainer{width: 45%;border: 1px solid #2C5887; border-radius: 5px; text-align: center; margin: 0 auto; height: auto;}
.registerFormContainer h3{padding: 10px; background: #2C5887; border-top-radius: 5px; width: auto;}
.registerFormContainer h3 label{color: #fff; font-size: 18px; font-weight: bold;}
Here if I am using the height:auto; then its not displaying the border for .registerFormContainer and .registerFormContainer h3. And if I am using manual height like 300px then its showing the border. But if I am using manual height then the div is not expading after validation error. What should be the issue? I am learning CSS and not have much idea about it.
and Following is my html
<div class="registerFormContainer">
<h3><label style="background-image:url( '/images/lock.png'); width: auto; background-repeat:no-repeat; background-position:left center;"> Create an Account</label></h3>
<div class="row_2">
<center><?php echo $this->msg; ?></center>
<label class="label2"> </label>
<?php if ($this->displayimage) { ?>
<img src="<?php echo $this->displayimage; ?>"></img>
<?php } ?>
</div>
<div class="row_2">
<label class="label2"> </label>
<b>Welcome, <?php if (isset($this->displayname)) echo $this->displayname; ?></b>
</div>
<div class="row_2">
<label class="label_2" for="username">Email:</label>
<?php if (isset($this->fbid)) { ?>
<input class="required" id="username" name="username" type="hidden" value="<?php echo $this->email; ?>"/>
<?php echo $this->email; ?>
<?php } else { ?>
<input class="required" id="username" name="username" type="text"/>
<?php } ?>
</div>
<div class="row_2">
<label for="password" class="label_2">Password:</label>
<input class="required" id="rpassword" name="password" type="password"/>
</div>
<div class="row_2" >
<label for="cpassword" class="label_2">Confirm Password:</label>
<input class="required" id="cpassword" name="cpassword" type="password"/>
</div>
<div class="row_2">
<label class="label_2"> </label>
<input type="submit" class="submit" value="Submit" name="submit" id="submit">
</div>
</div>
Any help would be appreciated.
Please try overflow-y:auto for class registerFormContainer I hope it will be work for you.
thanks