Angular - Components - Login Form #11
akash-coded
started this conversation in
Tasks
Replies: 15 comments
-
app.component.html<app-regpage> </app-regpage>regpage.component.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.0" />
<title>Document</title>
<style>
label {
font-weight: bold;
}
form {
background-color: rgb(226, 205, 209);
}
</style>
</head>
<body>
<form style="border: 2px solid black; width: 60%; padding: 10px">
<div>
<div>
<label for="Name">Full Name </label>
<input id="name" placeholder="Enter full name" />
</div>
<div>
<label for="phone">Phone Number </label>
<div>
<input
type="text"
name="countrycode"
style="width: 50px"
value="+91"
readonly
/>
<input id="phone" placeholder="Enter phone number" />
</div>
</div>
<div>
<label for="dob">DOB </label>
<input type="date" id="dob" placeholder="Enter dob" />
</div>
<div>
<label for="Email">Email address</label>
<input type="email" id="Email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="Password1">Password</label>
<input type="password" id="Password1" placeholder="Password" />
</div>
<div class="form-group">
<label for="Password2">Confirm Password</label>
<input type="password" id="Password2" placeholder="Password" />
</div>
<button type="submit" class="btn btn-primary mb-3">Submit</button>
</div>
</form>
</body>
</html>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
greet.component.html <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" style="background-color:rgb(21, 21, 66)" ;>
<a class="navbar-brand" href="#0">
<img
src="data:image/png;base64,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"
width="30";
height="30"/>
</a>
<ul class="navbar-nav" style="margin-left:auto">
<li class="nav-item">
<a href="http://127.0.0.1:3000/sign_up_page.html" class="nav-link active">
<strong>Sign Up</strong>
</a>
</li>
</ul>
</nav>
<section class="vh-5" style="background-color: #d4dbda;">
<div class="container py-5 h-50">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<h4 class="mb-5">Sign in</h4>
<div class="form-outline mb-2">
<input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX-2">Email</label>
</div>
<div class="form-outline mb-2">
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX-2">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-start mb-4">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" />
<label class="form-check-label" for="form1Example3"> Remember password </label>
</div>
<button class="btn btn-lg btn-block btn btn-outline-dark" type="submit" style="background-color:rgb(212, 162, 25)">Login</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer font-small text-white" style="background-color: rgb(21, 21, 66)">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 1996-2022, Amazon.com, Inc. or its affiliates
</div>
<!-- Copyright -->
</footer>
</body>
</html>screenshot
app.component.html |
Beta Was this translation helpful? Give feedback.
0 replies
-
app.component.html
child.componet.html<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
* {
box-sizing: border-box;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type="text"]:focus,
input[type="password"]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #04aa6d;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<form action="/action_page.php">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr />
<label for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter Email"
name="email"
id="email"
required
/>
<label for="psw"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="psw"
id="psw"
required
/>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input
type="password"
placeholder="Repeat Password"
name="psw-repeat"
id="psw-repeat"
required
/>
<hr />
<p>
By creating an account you agree to our
<a href="#">Terms & Privacy</a>.
</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>screenshot
|
Beta Was this translation helpful? Give feedback.
0 replies
-
CHILD 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.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.loginstyle {
color: rgb(187, 11, 152);
font-family: "Times New Roman", Times, serif;
}
.loginbuttonstyle {
background-color: rgb(187, 11, 152);
}
</style>
</head>
<body>
<p style="text-align: center">Login works</p>
<section class="container" style="padding: 70px">
<main class="col-md-5 mx-auto mt-4">
<form action="register-backend" method="GET" class="font-weight-bold">
<!-- Email -->
<div id="emailField" name="emailField" class="form-group">
<label
for="email"
style="
font-family: 'Times New Roman', Times, serif;
color: rgb(187, 11, 152);
"
>Email ID</label
><br />
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Please enter your Email"
autofocus
required
/>
</div>
<!-- Password -->
<div id="passwordField" name="passwordField" class="form-group">
<label
for="password"
style="
font-family: 'Times New Roman', Times, serif;
color: rgb(187, 11, 152);
"
>Password</label
><br />
<input
type="password"
id="password"
name="password"
class="form-control"
required
/>
</div>
<!-- Captcha -->
<div id="captcha" name="captcha" class="row form-group">
<div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
<label
for="captchaCode"
style="
font-family: 'Times New Roman', Times, serif;
color: rgb(187, 11, 152);
"
>Captcha</label
><br />
<input
type="text"
id="captchaCode"
name="captchaCode"
class="form-control font-weight-bold text-primary"
value="Q23f42"
readonly
/>
</div>
<div
id="captchaInputField"
name="captchaInputField"
class="col-lg-6"
>
<label
for="captchaInput"
style="
font-family: 'Times New Roman', Times, serif;
color: rgb(187, 11, 152);
"
>Enter Captcha</label
><br />
<input
type="text"
id="captchaInput"
name="captchaInput"
class="form-control"
autocomplete="off"
autofocus
required
/>
</div>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="keepMeSignedInCheck"
/>
<label
class="form-check-label font-weight-normal"
for="keepMeSignedInCheck"
style="
font-family: 'Times New Roman', Times, serif;
color: rgb(187, 11, 152);
"
>
Keep me signed in
</label>
</div>
<!-- Submit Button -->
<div id="loginButton" class="my-4">
<input
type="submit"
value="Login"
class="btn btn-block loginbuttonstyle"
/>
</div>
</form>
</main>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>PARENT HTML<app-login></app-login>
SCREENSHOT
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
child1.component.html child1.component.css app.component.html
Screenshot
|
Beta Was this translation helpful? Give feedback.
0 replies
-
Login page(child component)<!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.0" />
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<fieldset style="background-color: aquamarine">
<legend>Login Forms</legend>
<p>
<label for="salutation">Salutation</label>
<br />
<select name="salutation" id="salutation">
<option value="none">---None---</option>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
</select>
</p>
<p>
<label for="fname">First Name :</label>
<input
type="text"
name="fname"
id="fname"
placeholder="Enter First Name"
/>
</p>
<p>
<label for="lname">Last Name :</label>
<input
type="text"
name="lname"
id="lname"
placeholder="Enter Last Name"
/>
</p>
<p>
<label for="gender">Gender : </label>
<input type="radio" name="gender" id="gender" /> Male
<input type="radio" name="gender" id="gender" /> Female
</p>
<p>
<label for="email">Email :</label>
<input
type="email"
name="email"
id="email"
placeholder="Eg : text@example"
/>
</p>
<p>
<label for="dob">Date of Birth :</label>
<input type="date" name="dob" id="dob" />
</p>
<p>
<label for="address">Address :</label>
<br />
<textarea name="address" id="address"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</fieldset>
</form>
</body>
</html>app.component.html
Screenshot
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
app.component.html <app-complogin></app-complogin>login page <!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.0" />
<title>login</title>
</head>
<body>
<form action="#" method="get">
<fieldset style="background-color: lightblue">
<h1>LOGIN</h1>
<p>
<label for="fn">First Name :</label>
<input type="text" name="fn" id="fn" placeholder="John" />
</p>
<p>
<label for="ln">Last Name :</label>
<input type="text" name="ln" id="ln" placeholder="Smith" />
</p>
<p>
<label for="gender">Gender : </label>
<input type="radio" name="gender" id="gender" /> Male
<input type="radio" name="gender" id="gender" /> Female
<input type="radio" name="gender" id="gender" /> Other
</p>
<p>
<label for="email">Email :</label>
<input
type="email"
name="email"
id="email"
placeholder="your_email@example"
/>
</p>
<p>
<label for="dob">Date of Birth :</label>
<input type="date" name="dob" id="dob" />
</p>
<p>
<label for="city">City :</label>
<input type="text" name="city" id="city" placeholder="City" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</fieldset>
</form>
</body>
</html>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
Login 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.0" />
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<p style="text-align: center">Login Page</p>
<section class="container" style="padding: 70px">
<main class="col-md-5 mx-auto mt-4">
<form action="register-backend" method="GET" class="font-weight-bold">
<div id="emailField" name="emailField" class="form-group">
<label for="email">Email ID</label><br />
<input type="email" id="email" name="email" class="form-control"
placeholder="Please enter your Email" autofocus required />
</div>
<div id="passwordField" name="passwordField" class="form-group">
<label for="password">Password</label><br />
<input type="password" id="password" name="password" class="form-control" required />
</div>
<div id="captcha" name="captcha" class="row form-group">
<div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
<label for="captchaCode">Captcha</label><br />
<input type="text" id="captchaCode" name="captchaCode"
class="form-control font-weight-bold text-primary" value="Tygh89" readonly />
</div>
<div id="captchaInputField" name="captchaInputField" class="col-lg-6">
<label for="captchaInput">Enter Captcha</label><br />
<input type="text" id="captchaInput" name="captchaInput" class="form-control" autocomplete="off"
autofocus required />
</div>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="keepMeSignedInCheck" />
<label class="form-check-label font-weight-normal" for="keepMeSignedInCheck">
Keep me signed in
</label>
</div>
<div id="loginButton" class="my-4">
<input type="submit" value="Login" class="btn btn-block btn-danger" />
<p class="font-weight-normal">Don't have the account ?<a
href="http://127.0.0.1:3000/frontend/RegistrationPage.html"> <u> Click here to
create.</u></a></p>
</div>
</form>
</main>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>Screenshot
|
Beta Was this translation helpful? Give feedback.
0 replies
-
Login Page(Child component of app component)<!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.0" />
<title>Login Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<style>
body {
background-color: rgb(180, 214, 245);
}
ul>li>a {
color: white;
}
nav,
footer {
background-color: rgb(89, 145, 234);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#0">
Sporty
<img src="../../../Assets/Images/images (1).png" alt="" width="85px">Shoes
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav offset-8">
<li class="nav-item">
<a href="#" class="nav-link ">
<strong>Contacts</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">
<strong>LogIn</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>SignUp</strong>
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-5 mx-auto mt-4">
<header class="text-center">
<h1 class="display-4 text-primary text-uppercase">LOGIN</h1>
<h6 class="text-secondary">Enter your credentials</h6>
</header>
<hr />
<section>
<form action="register-backend" method="GET" class="font-weight-bold">
<!-- Email -->
<div id="emailField" name="emailField" class="form-group">
<label for="email">Email</label><br />
<input type="email" id="email" name="email" class="form-control" placeholder="abc@xyz.com" autofocus
required />
</div>
<!-- Password -->
<div id="passwordField" name="passwordField" class="form-group">
<label for="password">Password</label><br />
<input type="password" id="password" name="password" class="form-control" required />
</div>
<!-- Captcha -->
<div id="captcha" name="captcha" class="row form-group">
<div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
<label for="captchaCode">Captcha Code</label><br />
<input type="text" id="captchaCode" name="captchaCode"
class="form-control font-weight-bold font-italic text-primary bg-warning" value="Q23f42"
readonly />
</div>
<div id="captchaInputField" name="captchaInputField" class="col-lg-6">
<label for="captchaInput">Enter Captcha</label><br />
<input type="text" id="captchaInput" name="captchaInput" class="form-control" autocomplete="off"
autofocus required />
</div>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="keepMeSignedInCheck" />
<label class="form-check-label font-weight-normal" for="keepMeSignedInCheck">
Keep me signed in
</label>
</div>
<!-- Submit Button -->
<div id="loginButton" class="my-4">
<input type="login" value="Login" class="btn btn-block btn-primary" />
</div>
</form>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<footer class="page-footer font-small indigo my-2">
<!-- Footer Links -->
<div class="container text-center text-md-left" style="color: white">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Very long link 1</a>
</li>
<li>
<a href="#!">Very long link 2</a>
</li>
<li>
<a href="#!">Very long link 3</a>
</li>
<li>
<a href="#!">Very long link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color: white">© 2020 Copyright:
<a href="/" style="color: white"> SportyShoes.com</a>
</div>
<!-- Copyright -->
</footer>
</body>
</html>Screenshot
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
login-form.component.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.0" />
<title>Netflix_SignUp_Page</title>
</head>
<body style="background-image: url('assets/images/back.jpg')">
<!-- Login -->
<div class="login_body">
<div class="login_box">
<h2>Sign In</h2>
<form action="#">
<div class="input_wrap">
<input type="text" placeholder="email or phone number" />
</div>
<div class="input_wrap">
<input type="password" placeholder="enter password" />
</div>
<div class="input_wrap">
<button>Sign in</button>
</div>
<div class="support text-muted">
<div class="remember">
<span><input type="checkbox" checked name="rem" id="rem" /></span>
<span>Remember me</span>
</div>
<div class="need_help">Need Help?</div>
</div>
<div class="login_footer text-muted">
<span class="one">New to Amazon?</span>
<span class="two">Sign up now</span>
</div>
<div class="learn text-muted">
<p>
This page is protected by Google reCAPTCHA to ensure you're not a
bot. <a href="#">Learn more.</a>
</p>
</div>
</form>
</div>
</div>
</body>
</html>login-form.component.css .login_body{
padding: 60px;
z-index: 90;
position: relative;
max-width: 450px;
height: 630px;
margin-left: 50%;
margin-top: 10px;
background-color: rgb(26, 24, 24);
border-radius: 5px;
box-sizing: border-box;
transform: translateX(-50%);
}
.login_body h2{
font-size: 35px;
color: white;
margin-top: 0;
margin-bottom: 20px;
}
.login_body input{
height: 50px;
width: 100%;
border-radius: 3px;
color: white;
background-color: #333;
border: 1px solid #333;
padding-left: 15px;
box-sizing: border-box;
outline: none;
}
.input_wrap{
margin-bottom: 25px;
}
.login_body button{
height: 50px;
width: 100%;
color: white;
background-color: red;
border-radius: 3px;
font-weight: 500;
font-size: 16px;
border: 1px solid red;
}
.support{
display: flex;
color: #b3b3b3;
justify-content: space-between;
font-size: 15px;
}
.support input{
width: 15px;
height: 15px;
}
.remember{
display: flex;
align-items: center;
}
.remember span{
margin-right: 10px;
height: 25px;
}
.login_footer{
margin-top: 65px;
display: flex;
font-size: 18px;
}
.login_footer .one{
margin-right: 10px;
}
.login_footer .two{
color: white;
}
.learn{
margin-top: 13px;
}
|
Beta Was this translation helpful? Give feedback.
0 replies
-
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" class="form-control" id = "pw" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>ts |
Beta Was this translation helpful? Give feedback.
0 replies
-
Login Component<form class="col-lg-6 offset-3 mt-5">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>App Component HTML
Folder Structure
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
child works! <title>Document</title>Login Details
Email address
Password
Submit
|
Beta Was this translation helpful? Give feedback.
0 replies
-
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" class="form-control" id = "pw" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
//CHILD COMPONENT
<app-login></app-login> |
Beta Was this translation helpful? Give feedback.
0 replies
-
<form method="post" action="#">
<div class="col-lg-4 mx-auto justify-content-center" style="padding-top: 6%;">
<fieldset>
<legend class="text-center font-weight-bold">Registration Form</legend><br>
<label>First Name</label>
<input type="text" placeholder="first name" class="form-control"><br>
<label>Last Name </label>
<input type="text" placeholder="last name" class="form-control"><br>
<label>Email</label>
<input type="text" placeholder="email" class="form-control"><br>
<label>Password</label>
<input type="password" id="pwd" onkeypress="myFunction(this.value)" class="form-control"
placeholder="password" required><br>
<p id="demo"> </p>
<input type="submit" value="submit" class="btn btn-block btn-primary">
</fieldset>
</div>
</form>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Create an Angular app with a
loginform component as the child component of the app component.Beta Was this translation helpful? Give feedback.
All reactions