Login form
How do I make an login form?
Initially for my MMOGame, i am also using Angular :)Follow me on Twitter for progress on what this form was initially made for. What is a login form? How do you make a login form? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.
Login form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login form</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app> <div class="login-module" ng-controller="TabController"> <h1><a href="#">Lorem</a></h1> <div ng-show="tab == 'login'"> <form> <input type="text" placeholder="Username" autofocus autocomplete> <input type="password" placeholder="Password"> <input type="submit" value="Login"> </form> <a href="#" ng-click="tab = 'help'">Can't login?.. let me help</a> <button ng-click="tab = 'register'"> Create new account</button> </div> <div ng-show="tab == 'register'"> <button class="back" ng-click="tab = 'login'"><i class="fa fa-arrow-left"></i></button> <form> <input type="text" placeholder="Email"> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <input type="password" placeholder="Confirm"> <input type="submit" value="Create account"> </form> </div> <div ng-show="tab == 'help'"> <button class="back" ng-click="tab = 'login'"><i class="fa fa-arrow-left"></i></button> <form> <input type="text" placeholder="Email"> <input type="submit" value="Send recovery options"> </form> </div> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Login form - Script Codes CSS Codes
body { background: #333; font-family: Open sans, Arial; font-weight: Lighter;
}
.login-module { width: 320px; margin: 10px auto; padding: 10px; background-color: rgba(0, 0, 0, 0.5); border-radius: 2px; text-align: center; position: relative;
}
.login-module h1 { font-size: 2em; margin-bottom: 10px;
}
.login-module h1 a { color: rgba(255, 255, 255, 0.75); text-decoration: none;
}
.login-module h1 a:hover { color: white;
}
.login-module input,
.login-module button { font-size: 1em; padding: 10px; border-radius: 1px; border: 0; display: block;
}
.login-module input[type=text],
.login-module input[type=password] { width: 300px; margin-bottom: 10px; background-color: rgba(255, 255, 255, 0.25); color: whitesmoke;
}
.login-module input[type=text]:hover,
.login-module input[type=password]:hover { background-color: rgba(255, 255, 255, 0.35);
}
.login-module input[type=text]:focus,
.login-module input[type=password]:focus { background-color: white; color: #666;
}
.login-module a { color: white; padding: 10px; display: block; margin: 10px 0;
}
.login-module input[type=submit],
.login-module button { width: 175px; margin: 0 auto; cursor: pointer; background-color: rgba(255, 255, 255, 0.75);
}
.login-module input[type=submit]:hover,
.login-module button:hover { background-color: white;
}
.login-module button.back { border-radius: 100%; width: 45px; height: 45px; font-size: 1em; color: #222; position: absolute; top: 25px; left: -20px;
}
Login form - Script Codes JS Codes
function TabController($scope){ $scope.tab='login';
}
Developer | Charlie Walter |
Username | cjonasw |
Uploaded | January 11, 2023 |
Rating | 3 |
Size | 3,129 Kb |
Views | 6,072 |
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!
Name | Size |
Slanty goodness | 2,707 Kb |
Collision with walls | 3,242 Kb |
Gamepad API - DOM Element Demo | 2,414 Kb |
Calender UI | 3,513 Kb |
Angry Birds Catapult with Divs | 4,366 Kb |
Charliejwalter.net | 4,688 Kb |
Facebook tabs with AngularJS | 3,539 Kb |
JQuery countdown | 4,386 Kb |
Flash CC HTML5 Canvas | 14,083 Kb |
3D PONG | 3,601 Kb |
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!
Name | Username | Size |
CSS3 Media Queries demo | Machal | 1,824 Kb |
React Template | Isac | 1,241 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!