I have a login form that is on the center of the page. The FORM is already in the right place with the right size. However, the two inputs are aligned to the left and I want them to be centered. The following code does not work. Any ideas?
HTML
<div class="col-sm-4 col-sm-offset-4">
<form action="/new" method="POST">
<input class="loginField" type="text" name="email" placeholder="Email address"></input>
<input class="loginField" type="text" name="password" placeholder="Password"></input>
</form>
</div>
CSS
.loginField {
margin: 0 auto;
width: 500px;
height: 50px;
}
You should use the form-control class to alter the default behavior of Bootstrap inputs.
*I altered your HTML so it's mobile first, this wont effect the text being centered if it's unnecessary for your needs tho.
body {
padding-top: 50px;
}
#loginForm {
max-width: 500px;
margin: 0 auto;
}
#loginForm .form-control {
position: relative;
height: 50px;
font-size: 16px;
text-align: center;
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
</form>
</div>
<!-- /container -->
<hr>
Add a class="text-center" to your form
<form class="text-center" action="/new" method="POST">
jsBin demo
Logically, if you don't want all your form's text to be centered, wrap your inputs inside a i.e: <div> and add the class to that DIV instead.
Related
Every time I submit the form, even when the input text fields are empty, the form gets submitted even though I put the required tag. Is there a problem with my code? I don't know how to fix this or where the error lies. Also, how can I clear the input fields after I submit. Thank you in advance. Is it a problem from the compiler (I'm using VS code and I'm launching the website on google chrome)
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-sm-5 form-group">
<label for="firstName">First Name</label>
<input
type="text"
id="firstName"
class="form-control"
#fnameinput
required />
</div>
<div class="col-sm-5 form-group">
<label for="lastName">Last Name</label>
<input
type="text"
id="lastName"
class="form-control"
#lnameinput
required />
</div>
<div class="col-sm-5 form-group">
<label for="phone">Phone Number</label>
<input
type="text"
id="lname"
class="form-control"
#phoneinput
required />
</div>
<div class="col-sm-2">
<button
class="btn btn-success"
type="submit"
(click)="onAddContactItem()"
>Add New Contact</button>
</div>
</div>
</form>
</div>
</div>
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 3px solid #CCC;
border-radius: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: center;
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
font-size: 16px;
display:block;
border: 0;
height: 34px;
margin: 0;
float:left;
}
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
novalidate is default in later version of angular. So HTML5 validators are not triggered. Use ngNativeValidate in your form as an attribute ( )
I want to use the legend html tag to visually wrap a set of similar inputs in a form. It should look similar to how it does when one uses the legend attribute without bootstrap, like is shown here.
I made a bootply example which is here. As one can see: I am trying to create a legend which wraps the First Name and Last name input fields. The styling is not right.
I did already look at this question, but it is different than mine because I am attempting to use a legend within a grid.
Here's a way using custom CSS. Just add this CSS, and add .customLegend to the fieldset that will have a legend you want to display this way. Adjust the positioning, padding, etc as needed.
.customLegend {
border: 1px solid #e5e5e5;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0; left: 1em;
padding: 0 .5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<fieldset class="customLegend row">
<legend>Enter Your Name</legend>
<div class="form-group col-sm-6">
<label for="first_name">First Name:</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group col-sm-6">
<label for="last_name">Last Name:</label>
<input type="text" class="form-control" id="pwd">
</div>
</fieldset>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I am creating a form for a landing page, so I want to keep the text input field side by side so I don't make the form very long.I trying to do something like this :
But it seems really difficult right now, this is what my form current looks like:
.teaser-right {
float: right;
width: 45%;
margin: 3% 0 0 0
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
Add this to your CSS:
.form-section{
display:inline-block;
}
To put 2 input fields beside each other you can use of float. if you float the elements you need to make sure you use the clearfix hack on the parent div. Otherwise the parent div won't have a height.
Another option is to use display: inline-block If you use display inline-block you need to reset the font-size on the parent to 0. The elements that where you use display: inline-block need to get the font-size: 12px; for example. With display inline-block you can get a slight height difference.
Example:
float: left;
https://jsfiddle.net/ymma61hu/3/
Clearfix hack:
https://css-tricks.com/snippets/css/clear-fix/
Example 2:
display: inline-block;
https://jsfiddle.net/vh49gtzL/
Hi just put input elements inside same div see fiddle. https://jsfiddle.net/v5omym1a/
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
I cleaned up your markup a bit. You don't need to wrap your <h3> and <h4> in div-s - those are block level elements as well and can be perfectly styled.
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0;
overflow: hidden;
}
.form-section {
float: left;
width: 50%;
}
label {
display: block;
margin-bottom: .25em;
}
<div id="calltoaction-form" class="teaser-form">
<h3 class="form-title">sample form</h3>
<form id="contact_form" action="_contact-us.php" method="post">
<h4 class="form-header">Personal details</h4>
<div class="form-section">
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<label for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</form>
</div>
.form-section {
float: left;
margin: 1%;
width: 48.5%;
}
.form-section input {
width: 100%;
}
.form-section:first-child {
margin-left: 0;
}
.form-section:last-child {
margin-right: 0;
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 100%;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-container">
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</div>
I am trying to create a message input box in a bootstrap form, however the box has to be of sufficient height so the user could read his message, the place holder of "message" would stay in the middle, also when I write the text it keeps going horizontally without considering margins, I am a newbie programmer so please don't be too harsh.
.theform {
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
border: 5px solid;
padding: 20px 20px 20px 20px;
}
.theform h1 {
font-size: 50px;
text-decoration: underline;
}
#formGroupExampleInput {
height: 50px;
}
.form-control {
font-size: 30px;
}
#messagebox {
height: 200px;
margin-right: 40px;
line-height: 0px;
}
#message {
height: 200px;
margin-right: 40px;
line-height: -20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="theform" id="link3">
<h1 class="text-center">Contact</h1>
<form>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="messagebox" placeholder="Message" size="50">
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
You have to use a textarea instead of an input. If you want to center the placeholder vertically, you also have to use some JS, just to adjust the textare.
Just look into this codepen for an example implementation of a vertical centered textarea:
https://codepen.io/desandro/pen/gICqd
NO JS REQUIRED
you can fix this issue by puting the text area :
<textarea name="" id="" cols="30" rows="10"></textarea>
by default in text area the placeholder is sent to the top left.
Don't make the mistake of puting input instead because when you will give it a huge height the placeholder will be sent to the middle left !!!
I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.
remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.