hi all i am try to apply bootstrap css in my mvc application
i want reconstruct this example http://getbootstrap.com/examples/signin/ in my application
i code my login page like
<form id="loginform" method="post" class="form-signin" role="form">
<h3 class="form-signin-heading">Login</h3>
<input type="text" name="user_NA" class="form-control" placeholder="User ID" />
<input type="password" name="user_pwd" class="form-control" placeholder="Password" />
<input type="submit" name="Submit" value="Login" class="btn btn-lg btn-primary btn-block" />
</form>
but i got the output like
i am not done any changes in bootstrap.css
i want tha black header(default). but here shows a button. please someon help me
You can try this..
Fiddle here
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
Good Luck..
Related
Hi there newbie here.
I created a simple login with html, css and js. Authentication is running on firebase, localhost training dummy. The problem I encountered is that as soon as I add tags around my inputs and buttons the page just reloads on the button press. The "solution" is to remove the form tags and everything is running smoothly, but I have to admit that this does not satisfy my knowledge of semantics and stuff.
<form id="userLogin" class="form-container">
<input id="txtEmail" type="email" placeholder="Email" required="" autofocus="" autocomplete="email">
<input id="txtPassword" type="password" placeholder="Password" required="" autocomplete="current-password">
<button id="btnLogin">Log in</button>
<button id="btnSignUp">Sign up</button>
<button id="btnLogout">Log out</button>
<button id="verify">Verify me</button>
</form>
You are not closing you're tags.
You should either do:
<input id='input' />
or this way:
<input id='input' ></input>
Your final code should look like this:
<form id="userLogin" class="form-container">
<input id="txtEmail" type="email" placeholder="Email" required="" autofocus="" autocomplete="email" />
<input id="txtPassword" type="password" placeholder="Password" required="" autocomplete="current-password" />
<button id="btnLogin">Log in</button>
<button id="btnSignUp">Sign up</button>
<button id="btnLogout">Log out</button>
<button id="verify">Verify me</button>
</form>
I have the following problem, I made the form:
<button class="btn btn-success">Edit form</button><div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="true">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "true">
</div>
<input type="hidden" value="" name="password_confirm">
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
By default, the fields are to have disabled status so that they can not be edited, now I would like the form to be available for editing after clicking the Edit form button and the hidden field as text. Unfortunately, for now, I have no idea how to go about it :(
Give this a try:
<button class="btn btn-success" (click)="onTogglenotEditMode()">Edit form</button>
<div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input *ngIf="!notEditMode" type="text" value="" name="password_confirm">
</div>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
And in the Component:
import { Component } from '#angular/core';
#Component({...})
export class AppComponent {
notEditMode = true;
onTogglenotEditMode() {
this.notEditMode = !this.notEditMode;
}
}
Here's a Working Sample StackBlitz for your ref.
I have a problem here. The form not redirect to the process file after I click the button.
This is the form code :
<form action="add_testimonial.php" method="POST" enctype="multipart/form-data">
<input type="text" class="form-control" placeholder="Name" name="nama">
<input type="email" class="form-control" placeholder="Email" style="margin-top: 10px;" name="email">
<textarea rows="2" class="form-control" style="margin-top: 10px;" name="text"></textarea>
<input type="file" class="form-control-file" style="margin-top: 10px;" name="foto_profil">
<input class="btn btn-success btn-block" type="button" value="Send testimonial" name="finish" style="margin-top: 10px;">
</form>
Hope anyone can help my problem.
Change input type button to submit
<form action="add_testimonial.php" method="POST" enctype="multipart/form-data">
<input type="text" class="form-control" placeholder="Name" name="nama">
<input type="email" class="form-control" placeholder="Email" style="margin-top: 10px;" name="email">
<textarea rows="2" class="form-control" style="margin-top: 10px;" name="text"></textarea>
<input type="file" class="form-control-file" style="margin-top: 10px;" name="foto_profil">
<input class="btn btn-success btn-block" type="submit" value="Send testimonial" name="finish" style="margin-top: 10px;">
</form>
The last button should have the following type:
<input class="btn btn-success btn-block" type="submit" value="Send testimonial" name="finish" style="margin-top: 10px;">
Type submit garantee that you send the form data to the action page. Here are a few explanations from the Mozilla Team.
Change your input type "button" to "submit"
<input class="btn btn-success btn-block" type="submit" value="Send testimonial" name="finish" style="margin-top: 10px;">
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" value="Login">
input class is declared.
the problem is the even though the button is clickable,i cant get it to open new_url.
You forgot to mention input type submit.
try below code
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</form>
</div>
Use <input type="submit" value="Login">
instead of
<input type="button" value="Login">
You just need to add one more input value
<input type="Submit" value="login">
When I enter the email and click on Submit. Nothing happens.
Thanks for your help.
Please find the html code.
<form method="post" action="contact.php" name="contactform" id="contactform">
<fieldset>
<label for="email" accesskey="E"></label>
<input name="email" type="text" id="email" size="30" value="" placeholder="Please enter your email address" />
<button type="submit" class="submit btn btn-custom" id="submit" value="Submit">
<i class="fa fa-envelope"></i>
Subscribe
</button>
</fieldset>
</form>
<div class="tex-center">
<div id="message"></div>
</div>
Try using <input type="submit" class="submit btn btn-custom" id="submit" value="Submit"> instead.