I am new to HTML CSS but I know how to copy things.
Here is the case, as I copy the HTML from https://formsubmit.co/live-demo to my Brackets, it will lose all layout features.
I tried fixing it with:
h1 {
text-align: center;
margin: 35px 0 20px 0 !important;
}
<div class="container">
<h1>FormSubmit Demo</h1>
<form target="_blank" action="https://formsubmit.co/your#email.com" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
</div>
</div>
<div class="form-group">
<textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
</div>
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
</form>
</div>
Thanks a lot for helping.
Next time, click Resources
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>FormSubmit Demo</h1>
<form target="_blank" action="https://formsubmit.co/your#email.com" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
</div>
</div>
<div class="form-group">
<textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
</div>
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
</form>
</div>
</body>
</html>
main.css
h1 {
text-align: center;
margin: 35px 0 20px 0 !important;
}
I am having issues trying to make this form responsive. Whenever I make my screen smaller, my form won't resize. I am using bootstrap, but I am not sure how to make that happen. I also don't know how to align "email" label with the other labels.
<html>
<head>
<title>Title</title>
</head>
<style>
#myform {
border: 1px outset #ccc;
background: #fff repeat-x;
padding: 50px;
margin: 20px auto;
width: 500px;
height: 450px;
font-size: 14px;
-moz-border-radius: 4px;
}
#myform h3 {
text-align: left;
margin: 0 0 10px 0;
}
#inputs label,
#inputs input,
#inputs textarea,
#inputs select {
display: block;
width: 300px;
float: left;
margin-bottom: 10px;
}
#inputs input {
height: 40px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
#agree {
font-size: 10.5px;
}
</style>
<body>
<div class="container">
<form id="myform" action="#">
<h3>Your Information</h3>
<div id="inputs">
<!-- username -->
<label for="username">Firstname</label>
<br/>
<input id="username" type="text" placeholder="Fullname" /><br />
<!-- password -->
<label for="password">Password</label>
<br/>
<input id="password" type="password" placeholder="Password" />
<br />
<!-- email -->
<label for="email">Email </label>
<br/>
<input id="email" type="text" placeholder="Email" />
</div>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
Proceed
</button>
</p>
<label id="agree">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
<input type="checkbox" id="check" title="Required to proceed" />
</label>
</form>
</div>
<body>
</html>
As you already use bootstrap take advantage of bootstrap css classes. Here is official documentation about forms (https://v4-alpha.getbootstrap.com/components/forms/). One of form solution would be:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">username:</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Username" class="form-control input-md" required="">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">password:</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">email:</label>
<div class="col-md-4">
<input id="email" name="email" type="text" placeholder="email" class="form-control input-md" required="">
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
</label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton">Single Button</label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</fieldset>
</form>
I am trying to use sr-only class from bootstrap in order to make an inline form.
It should be something like this:
Title Cost
________________ __________ ______ days at $ ______ X (remove button)
I have already searched in lots of places but couldn't find a solution for this.
<form>
<div class="form-group col-sm-5">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group col-sm-2">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
</div>
<div class="form-group col-sm-2">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
</div>
</form>
Example
The class .sr-only has position:absolute style. But you can define you own class. Using margin-top or height. See this example i've made for you, so you can have an idea (See the snippet in fullpage option):
.form-group > .sr-only.control-label {
display: block;
position: relative;
height: 27px;
}
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<form>
<div class="form-group col-sm-5">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group col-sm-2">
<label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
<div class="input-group">
<input type="email" value='' class="form-control" id="name" placeholder="Ime" >
<div class="input-group-addon">days</div>
</div>
</div>
<div class="form-group col-sm-2">
<label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
<div class="input-group">
<input type="email" value='' class="form-control" id="name" placeholder="Ime" >
<div class="input-group-addon">days</div>
</div>
</div>
</form>
Use the following CSS. I added a class to the form in order to differentiate it from regular forms and removed the col classes from the groups, assuming they float the columns.
.inline-form .form-group {
display: inline-block;
vertical-align: bottom;
}
.inline-form label {
display: block;
}
.inline-form input {
border: none;
border-bottom: solid 1px;
}
<form class="inline-form">
<div class="form-group">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
</div>
<div class="form-group">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
</div>
</form>
I've just recently asked this and it worked previously but now it doesn't again. I have 2 divs (student-parent-container and student-guardian-other-container) I want positioned side-by-side using inline: block and if possible without using float.
Here is the HTML:
<div id="parent-and-guardian" class="tab">
<div id="student-parent-guardian-container">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
</fieldset>
</div>
</div>
</div>
and here is CSS:
#student-parent-container
display: inline-block;
}
#student-guardian-other-container
display: inline-block;
}
Here is a link to a jsFiddle:
Divs not positioning side-by-side
I would like for Guardian Information be on the right side of Father Information.
You didn't open the { in the css rules.
CSS
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
}
I updated your JS Fiddle, also adding a vertical-align to the guardian div:
https://jsfiddle.net/LinoLinux/7x8xde43/2/
I would like to have the labels not above the input field, but on the left side.
<form method="post" action="" role="form" class="form-inline">
<div class="form-group">
<label for="rg-from">Ab: </label>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<div class="form-group">
<label for="rg-to">Bis: </label>
<input type="text" id="rg-to" name="rg-to" value="" class="form-control">
</div>
<div class="form-group">
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</div>
</form>
This code gives me:
I would like to have:
You can use form-inline class for each form-group :)
<form>
<div class="form-group form-inline">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
Put the <label> outside the form-group:
<form class="form-inline">
<label for="rg-from">Ab: </label>
<div class="form-group">
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<!-- rest of form -->
</form>
The Bootstrap 3 documentation talks about this in the CSS documentation tab in the section labelled "Requires custom widths", which states:
Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within.
If you use your browser and Firebug or Chrome tools to suppress or reduce the "width" style, you should see things line up they way you want. Clearly you can then create the appropriate CSS to fix the issue.
However, I find it odd that I need to do this at all. I couldn't help but feel this manipulation was both annoying and in the long term, error prone. Ultimately, I used a dummy class and some JS to globally shim all my inline inputs. It was small number of cases, so not much of a concern.
Nonetheless, I too would love to hear from someone who has the "right" solution, and could eliminate my shim/hack.
Hope this helps, and props to you for not blowing a gasket at all the people that ignored your request as a Bootstrap 3 concern.
You can create such form where label and form control are side using two method -
1. Inline form layout
<form class="form-inline" role="form">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</form>
2. Horizontal Form Layout
<form class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-3">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-3">Password</label>
<div class="col-xs-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
<div class="col-sm-3">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
You can check out this page for more information and live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
Like this
DEMO
HTML
<div class="row">
<form class="form-inline">
<fieldset>
<label class="control-label"><strong>AB :</strong></label>
<input type="text" class="input-mini" >
<label class="control-label"><strong>BIS:</strong></label>
<input type="text" class="input-mini" >
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</fieldset>
</form>
</div>
I had the same problem, here is my solution:
<form method="post" class="form-inline form-horizontal" role="form">
<label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
<div class="input-group col-sm-7">
<input class="form-control" type="email" name="email" placeholder="your.email#example.com"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>
here is the Demo
You can see from the existing answers that Bootstrap's terminology is confusing. If you look at the bootstrap documentation, you see that the class form-horizontal is actually for a form with fields below each other, i.e. what most people would think of as a vertical form. The correct class for a form going across the page is form-inline. They probably introduced the term inline because they had already misused the term horizontal.
You see from some of the answers here that some people are using both of these classes in one form! Others think that they need form-horizontal when they actually want form-inline.
I suggest to do it exactly as described in the Bootstrap documentation:
<form class="form-inline">
<div class="form-group">
<label for="nameId">Name</label>
<input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
</div>
</form>
Which produces:
You must float left all elements like so:
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
give some margin to the desired elements :
.form-group { margin-right:5px }
and set the label the same line height as the height of the fields:
.form-group label { line-height:--px; }
I think this is what you want, from the bootstrap documentation "Horizontal form
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row". So:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/
You can use a span tag inside the label
<div class="form-group">
<label for="rg-from">
<span>Ab:</span>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</label>
</div>
I managed to fix my issue with. Seems to work fine and means I dont have to add widths to all my inputs manually.
.form-inline .form-group input {
width: auto;
}
I am sure you would've already found your answer... here is the solution I derived at.
That's my CSS.
.field, .actions {
margin-bottom: 15px;
}
.field label {
float: left;
width: 30%;
text-align: right;
padding-right: 10px;
margin: 5px 0px 5px 0px;
}
.field input {
width: 70%;
margin: 0px;
}
And my HTML...
<h1>New customer</h1>
<div class="container form-center">
<form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
<div style="margin:0;padding:0;display:inline"></div>
<div class="field">
<label for="customer_first_name">First name</label>
<input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
</div>
<div class="field">
<label for="customer_last_name">Last name</label>
<input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
</div>
<div class="field">
<label for="customer_addr1">Addr1</label>
<input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
</div>
<div class="field">
<label for="customer_addr2">Addr2</label>
<input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
</div>
<div class="field">
<label for="customer_city">City</label>
<input class="form-control" id="customer_city" name="customer[city]" type="text" />
</div>
<div class="field">
<label for="customer_pincode">Pincode</label>
<input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
</div>
<div class="field">
<label for="customer_homephone">Homephone</label>
<input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
</div>
<div class="field">
<label for="customer_mobile">Mobile</label>
<input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
</div>
<div class="actions">
<input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
</div>
</form>
</div>
You can see the working example here... http://jsfiddle.net/s6Ujm/
PS: I am a beginner too, pro designers... feel free share your reviews.
No CSS required. This should look fine on your page. You can set col-md-* as per your needs
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<div class="col">
<div class="form-group">
<label for="inputEmail" class="col-sm-3">Email</label>
<input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputPassword" class="col-sm-3">Email</label>
<input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
</div>
</div>
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</form>
</div>
</div>
<div class="control-group">
<label class="control-label" for="firstname">First Name</label>
<div class="controls">
<input type="text" id="firstname" name="firstname"/>
</div>
</div>
Also we can use it Simply as
<label>First name:
<input type="text" id="firstname" name="firstname"/>
</label>
It seems adding style="width:inherit;" to the inputs works fine.
jsfiddle demo