This spacing issue was driving me crazy. I finally figured out that in order to have spaces between the form elements, I need to format my HTML code as shown below.
Could somebody explain what's going on here? Is this some newline issue?
Notes:
I'm using Bootstrap 3 CSS file, no other styling in place
the only difference between the 2 samples below is in how .form-group divs are laid out
1. Form elements with spaces:
<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>
2. Form elements without spaces:
<!DOCTYPE html>
<html>
<head>
<title>Elements with spaces</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div><button type="submit" class="btn btn-default">Sign in</button>
</form>
</body>
</html>
Inline elements are sensitive to white space in your code. Since you have divs in your example which are normally block level elements, but they're appearing side by side, your CSS is most likely changing them to display inline. You could also remove the gap by using HTML comments.
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div><!--
--><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
According to the Bootstrap docs (http://getbootstrap.com/css/#forms-inline), form-group is used to wrap the form-control so your 2nd approach is better.
Your 1st example is rendering as expected since the Bootstrap CSS sets inline-block and no margin on the form-control itself. You could override this behavior by using margin in the CSS..
.form-inline .form-control {
display: inline-block;
margin-right:4px;
}
Demo: http://bootply.com/86947
As an alternative to j08691 answer, this is the method I use to prevent white-space:
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
You don't introduce unnecessary comments, but auto-formatting in some IDEs might mess up your indentation a bit.
Related
I'm trying to make a Two label and input in one line can anyone help me to build these forms like this. I want to make this like this image. i need to make input below the label and them in one lineImage
.first_line_left,.first_line_right,.first_line_right_far{
float: left;width:50%;box-sizing: border-box;
}
label,input{
width:10%,float:left;box-sizing:border-box;
}
input{
padding: 8px 10px;box-sizing: border-box;
}
.first_line_left,.first_line_right,.first_line_right_far{
width: 33.33%;float: left;padding: 10px;
box-sizing: border-box;
}
<!DOCTYPE>
<html>
<head>
<title>form</title>
</head>
<link rel="stylesheet" type="text/css" href="form.css">
<body>
<h1>Personal Details</h1><hr>
<form action="" method="post">
<div class="First_line_left">
<label for="title">Title</label>
<select>
<option value="0"></option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div class="First_line_right">
<label for="Delegate_First_name">Delegate First</label>
<input type="text" name="Delegate_First_name" placeholder="Delegate First name">
</div>
<div class="First_line_right_far">
<label for="Delegate_last_name">Delegate last Name</label>
<input type="text" name="Delegate_last_name" placeholder="Delegate last Name">
</div>
</div>
</div>
</form>
</body>
</html>
mgur.com/Muvyh.png
You need to use CSS to make the form style like that.
I have created an example code in JS fiddle based on your requirements.
https://jsfiddle.net/rajeevRF/8vu73Lso/8/
.left_half,.right_half{width:50%;float:left;padding:10px;box-sizing: border-box;}
label,input,select{width:100%;float:left;box-sizing: border-box;}
input{padding:8px 10px;box-sizing: border-box;}
.first_left,.first_center,.first_right{width:33.33%;float:left;padding:10px;box-sizing: border-box;}
<html>
<form action="" method="post">
<div class="left_half">
<label>Name</label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="right_half">
<label>Phone</label>
<input type="text" name="phone" placeholder="Enter your phone">
</div>
<div class="first_left">
<label>Email</label>
<input type="text" name="email" placeholder="Enter your email">
</div>
<div class="first_center">
<label>Comments</label>
<input type="text" name="comment" placeholder="Enter your comment">
</div>
<div class="first_right">
<label>Subject</label>
<input type="text" name="subject" placeholder="Enter your subject">
</div>
</form>
</html>
Are you trying to make the label appear beside the input field, or make the input fields appear side by side as seen in your picture?
If you are using bootstrap, you may find this solution helpful: Form inline inside a form horizontal in twitter bootstrap?
Pardon me if the question is absurd. I need to do something like this.
I have this two external css files in my html document.
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/mdb.css">
There is a form in my html as follows:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>New Affiliate Signup</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">First Name</label>
<div class="col-md-5">
<input id="fname" name="fname" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</fieldset>
</form>
mdb.css - contains the same classes and Ids as that of bootstrap.css but they have been manipulated to give advanced visual effects (hovering,button colors, shadow colors and other advanced features) without affecting the core content of the bootstrap.css
But I don't need mdb.css to affect in my <form> yet I still need it for other elements in my <html> document (Headers, Carousels etc...)
Since I have already linked the mdb.css it will affect all the elements including <form>.
Can I only be able to link bootstrap.css to my <form> without linking mdb.css and without removing mdb.css inside <head>
Like putting a <div> around <form> and setting only the bootstrap.css stylesheet to that <div>?
Please someone help me?
I think that one solution could be to add a class "without-mdb" to your form and add ":not(.without-mdb)
Why dont you just add individual classes to your mdb.css stylesheet that do what you want it to do and include it within your element? Rather than trying to update standard bootstrap classes.
This is the simpler option but would require some refactoring of your mdb.css stylesheet.
Example
.redBackground
{
/* !important rule overrides any existing styles on the element */
background: red !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>New Affiliate Signup</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">First Name</label>
<div class="col-md-5">
<!-- Add the new css class as additional class in your markup !-->
<input id="fname" name="fname" type="text" placeholder="First Name" class="form-control input-md redBackground" required="">
</div>
</div>
</form>
You cannot apply CSS files to elements. You apply CSS rules from CSS files to elements.
To keep the bootstrap styles of your <form> element AND keep both CSS files without changes in the head section, you will have to add a specific selector to the <form> (like
a class .no-mdb) and notate some additional CSS rules with higher specificity, that revert the mdb styles to the bootstrap styles.
Here is a working example:
.no-mdb {
/* your reverting styles go here.
make sure your styles have a higher specificity to properly overwrite your existing styles */
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6">
<form>
<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-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form class="no-mdb">
<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-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
Nevertheless the better approach would be, to properly handle the form in your mdb.css.
I've got some problems with sizing and positioning bootstrap input filds.
I've added the css class="form-controle" to the inputs.
and Now it looks like this:
But this is a cloze text to fill in and it should look like this:
It should always be like this: <> input <> input
Any hint how I can get this view with bootstrap?
check this example in bootstrap site
http://getbootstrap.com/css/#forms-inline
Try form-inline - check it on bootstrap's site here.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control hello" type="text"/>
</div>
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control" type="text"/>
</div>
<input type="submit" class="btn" value="submit"/>
</form>
How would I make the middle input have a width of 500px? I tried wrapping it in a row with col-xs-10, but that also didn't work. Here is a jsfiddle demo.
The following CSS rule would work:
.form-inline .form-control.hello {
display: inline-block;
width:500px;
}
JS Fiddle: http://jsfiddle.net/uvdU8/3/
The simplest solution would probably be to add style="width:500px;" to the input.
Updated JSFiddle: http://jsfiddle.net/ThomasMcNaught/uvdU8/1/
If you want it to be applied through CSS then try an ID.
input#width {
width: 500px;
}
Demo: http://jsfiddle.net/ThomasMcNaught/uvdU8/2/
Right now I'm working on a school project where I create a bookstore. I have created the front page and now I'm trying to use php to create the login and register system. I've created the Register page (php) and I created a CSS File to go along with it, however I can't get the two to connect properly. When I run it in localhost the css won't render. I don't see a error in my code and I don't understand why it's not working. I tried to change the css name around a bit to see if the problem was the naming however nothing else seems to work.
/* Import Google Font */
#import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
font-family: 'Lora', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<!--Bootstrap 4 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS File --->
<link rel="stylesheet" href="registerandlogin.css" type="text/css">
<title>Register</title>
</head>
<body>
<p>Register Today and Join the Royal Reader Community</p>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="signup.php" method="post">
<h3 class="text-center">Register</h3>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="passwordConf">Confirm Password</label>
<input type="password" name="passwordConf" class="form-control form-control-lg">
</div>
<div class="form-group">
<button type="submit" name="signup-btn" class="btn btn-primary btn-block btn-log">Sign Up</button>
</div>
<p class="text-center">Already a member?</p>Sign In
</form>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Try to add a class to your form or whatever like this:
<form class="form-div" action="signup.php" method="post">
Here you can read about css selectors: https://www.w3schools.com/html/html_css.asp
You do not have an element named .form-div, which is why your CSS does not affect anything. Try adding an element with that class name in your <form> tag.