Angular - Components - Login Form #11

akash-coded · 2022-07-27T04:19:08Z

akash-coded
Jul 27, 2022
Maintainer

Create an Angular app with a login form component as the child component of the app component.

uzma23 · 2022-07-27T04:53:43Z

uzma23
Jul 27, 2022

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 &nbsp;</label>
          <input id="name" placeholder="Enter full name" />
        </div>
        <div>
          <label for="phone">Phone Number &nbsp;</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 &nbsp;</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>

0 replies

ghost · 2022-07-27T05:08:28Z

ghost
Jul 27, 2022

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
<app-greet></app-greet>

0 replies

gayatribabar · 2022-07-27T05:08:57Z

gayatribabar
Jul 27, 2022

app.component.html

<app-child></app-child>

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

0 replies

meghvi-raj · 2022-07-27T05:15:18Z

meghvi-raj
Jul 27, 2022

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

0 replies

ghost · 2022-07-27T05:20:14Z

ghost
Jul 27, 2022

child1.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" />
  </head>
  <body>
    <h2>Login Page</h2>
    <br />
    <div class="login">
      <form id="login" method="get" action="login.php">
        <label><b>User Name </b> </label>
        <input type="text" name="Uname" id="Uname" placeholder="Username" />
        <br /><br />
        <label><b>Password </b> </label>
        <input type="Password" name="Pass" id="Pass" placeholder="Password" />
        <br /><br />
        <input type="button" name="log" id="log" value="Log In" />
        <br /><br />
        <input type="checkbox" id="check" />
        <span>Remember me</span>

        <a href="">Forgot Password</a>
      </form>
    </div>
  </body>
</html>

child1.component.css

    .login {
        width: 382px;
        overflow: hidden;
        margin: auto;
        margin: 20 0 0 450px;
        padding: 80px;
        background: #23463f;
        border-radius: 15px;

    }

    h2 {
        text-align: center;
        color: red;
        padding: 20px;
    }

    label {
        color: #08ffd1;
        font-size: 17px;
    }

    #Uname {
        width: 300px;
        height: 30px;
        border: none;
        border-radius: 3px;
        padding-left: 8px;
    }

    #Pass {
        width: 300px;
        height: 30px;
        border: none;
        border-radius: 3px;
        padding-left: 8px;

    }

    #log {
        width: 300px;
        height: 30px;
        border: none;
        border-radius: 17px;
        padding-left: 7px;
        color: blue;


    }

    span {
        color: white;
        font-size: 17px;
    }

    a {
        float: right;
        background-color: grey;
    }

app.component.html

<app-child1></app-child1>

Screenshot

0 replies

ApoorvaSinha · 2022-07-27T05:21:30Z

ApoorvaSinha
Jul 27, 2022

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

<app-login></app-login>

Screenshot

0 replies

Coder-093 · 2022-07-27T05:48:00Z

Coder-093
Jul 27, 2022

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>

0 replies

vshvandana · 2022-07-27T06:01:18Z

vshvandana
Jul 27, 2022

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

0 replies

Kuntapaliwal · 2022-07-27T06:42:33Z

Kuntapaliwal
Jul 27, 2022

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

0 replies

PurnaPichuka · 2022-10-13T18:40:19Z

PurnaPichuka
Oct 13, 2022

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;
}

0 replies

rrajbanshi · 2022-10-14T04:59:57Z

rrajbanshi
Oct 14, 2022

<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
<app-login-form></app-login-form>

0 replies

NavneetBais · 2022-10-14T05:52:38Z

NavneetBais
Oct 14, 2022

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

<app-login></app-login>

Folder Structure

0 replies

shubhammane555 · 2022-10-14T07:07:31Z

shubhammane555
Oct 14, 2022

child works!

<title>Document</title>

Login Details

Email address

Password

Submit

0 replies

lingamurthi · 2022-10-14T08:35:02Z

lingamurthi
Oct 14, 2022

<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>

0 replies

amit4106 · 2022-10-17T10:04:07Z

amit4106
Oct 17, 2022

<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>

0 replies

atirkey123 · 2022-10-18T04:45:31Z

atirkey123
Oct 18, 2022


<!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>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <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>
    
</body>
</html>

0 replies

Angular - Components - Login Form #11

Uh oh!

akash-coded Jul 27, 2022 Maintainer

Replies: 15 comments

Uh oh!

app.component.html

regpage.component.html

Uh oh!

screenshot

Uh oh!

app.component.html

child.componet.html

screenshot

Uh oh!

CHILD HTML

PARENT HTML

SCREENSHOT

Uh oh!

Uh oh!

Login page(child component)

app.component.html

Screenshot

Uh oh!

Uh oh!

Uh oh!

Login html

Screenshot

Uh oh!

Uh oh!

Login Page(Child component of app component)

Screenshot

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Login Component

App Component HTML

Folder Structure

Uh oh!

Login Details

Uh oh!

Uh oh!

Uh oh!

akash-coded
Jul 27, 2022
Maintainer