Flexbox login form

Developer
Martin Boyce
Size
3,551 Kb
Views
101,200
  1. Flexbox login form Previews
  2. Flexbox login form HTML Codes
  3. Flexbox login form CSS Codes
  4. Flexbox login form JS Codes

How do I make an flexbox login form?

A login form that uses flexbox for horizontal and vertical centering.. What is a flexbox login form? How do you make a flexbox login form? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Flexbox login form Previews
IQ Test

Flexbox login form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flexbox login form</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="parent"> <div class="child"> <div class="form-block"> <header> <img src="https://www.sutherlandshire.nsw.gov.au/files/templates/00000000-0000-0000-0000-000000000000/006a54a2-c659-42e2-9e84-eb119442657e/library-logo.png" alt="logo" /> <span>Libraries</span> </header> <form class="login-form"> <p class="lead">Login to your Account</h1> <div class="form-group"> <label for="code">Card No.</label> <input id="code" name="code" type="text" class="form-control" placeholder="22232..."> </div> <div class="form-group"> <label for="pin">PIN</label> <input id="pin" name="pin" type="password" class="form-control"> </div> <p id="pw-reset" class="help-block"><a href="/pinreset">Forgot PIN?</a></p>
<!--ifneedspin--> <fieldset id="ipssonewpin"> <p class="lead">Please enter a new PIN.</p> <div class="form-group"> <label for="pin1">New PIN</label> <input id="pin1" name="pin1" type="password" class="form-control"> </div> <div class="form-group"> <label for="pin2">Retype PIN</label> <input id="pin2" name="pin2" type="password" class="form-control"> </div> </fieldset>
<!--xif--> <!-- Message from client webapp to be displayed on the CAS login screen -->
<!-- <p id="status" class="errors">You have entered invalid account information Please try again. You have entered invalid account information Please try again.</p> --> <div id="clientmessage"> <!--display any errors--> </div> <!-- end clientmessage --> <div class="buttons"> <button type="submit" class="btn btn-primary">Sign In</button> <a href="/selfreg" class="btn btn-default">Join the Library</a> </div> </form> <footer> <p><a href="//www.sutherlandshire.nsw.gov.au/library">home</a> <a href="//encore.sutherlandshire.nsw.gov.au">library catalogue</a></p> </footer> </div> <!-- /form-block --> </div><!-- /child -->
</div><!-- /parent --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox login form - Script Codes CSS Codes

.parent { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; /* Or whatever */ background: #fff;
}
.child { margin: auto; /* Magic! */
}
header { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}
header img { max-width: 200px;
}
header span { color: #0083a9; font-size: 24px; font-weight: 300; border-left: 1px solid #0083a9; padding: 6px 14px;
}
.login-form { padding: 20px; margin: 20px; background: #eee; border: 1px solid #ccc; border-radius: 4px; text-align: center;
}
.login-form .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.login-form .form-group label { -webkit-box-flex: 0; -ms-flex: 0 0 80px; flex: 0 0 80px; text-align: right; padding-right: 4px;
}
.login-form .form-group input { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
}
.help-block { text-align: right; margin-bottom: 2em;
}
.errors { max-width: 440px;
}
.buttons { text-align: center;
}
footer { text-align: center;
}
footer p { padding: 10px; text-align: center;
}
footer p a:first-child { margin-right: 20px;
}

Flexbox login form - Script Codes JS Codes

$('#status').addClass('alert alert-danger');
//hide things for testing
$('#status').hide();
$('#ipssonewpin').hide();
Flexbox login form - Script Codes
Flexbox login form - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 3,551 Kb
Views 101,200
Do you need developer help for Flexbox login form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Boyce (boycetrus) Script Codes
Name
Test form validation with validate.js
First steps with Handlebars.js
Scratchpad
Test Case for ajax fail on single result
AJAX content from an RSS feed using jQuery
Fetching book covers with the Google Books API
Google Analytics Event Tracking using html5 data attributes
Get the app
Google Maps API Ground Overlay
Flexbox horozontal scrolling booklist
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!