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>
Related
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 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>
Hi its a very basic question i just want to know when hover on one element the style of other changes how can I achieve this ?
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
Like when i hover on button border-color of all the input changes.
I only want this with css no js or jQuery.
It is possible to do this but not with your current code.
Below is code of this working, the hover element will have to be before the elements you want to change. It works by going down and not up, so if this button is at the bottom you will not be able to see the same effect as the effect does not effect elements that are already rendered.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
We can select other elements siblings by using the ~ selector.
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
More here
Here is the button at the bottom, as you can see it will not work.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
for a pure css solution you need to move the <button>-tag in front of the inputs you want to change, but then it'll work like this
button:hover ~ .form-group input {
border-color: red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
that is possible only if the inputs after the button
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
and the css:
#btn:hover ~ .form-group input {
background: #000;
}
after that you can use position absolute for the button
and this is demo
http://jsfiddle.net/u7tYE/6037/
try this
<form id="numerical" class="row">
<label for="btn" class="label"></label>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
<style>#numerical{
position: relative;
}
.form-group {
margin-bottom:10px;
}
#numerical .label {
position: absolute;
bottom: 0;
left: 0;
height: 32px;
width:102px;
}
.label:hover ~ .form-group input {
border: solid 2px red;
}
#btn{
background:blue;
color:#fff;
height:30px;
width:100px;
} </style>
Fiddle
I am little bit confused how to use Bootstrap CSS. I have two textboxes, a search button and image side to it. For fullscreen all elements should be in a row.
resizing screen, All elements should be one after another.
<div class="form-group" style="vertical-align: top; margin-right: 20px">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="vertical-align: top; margin-right: 20px">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
Please help....
<form class="form-inline">
<div class="form-group">
<label for="name">Name:</</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="city">City:</</</label>
<input type="text" class="form-control" id="city" placeholder="City">
</div>
<button type="submit" class="btn btn-warning">Search</button>
<img class="img-responsive" src="xx.jpg" />
</form>
You could add in display:inline-block on both those form-group div's
<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
There is an image responsive class:
you can try adding:
<img class="img-responsive" src="xx.jpg" />
Try adding this to your code display: inline i.e, Replace your top line with this .
<div class="form-group" style="vertical-align: top; margin-right: 20px; display: inline">
You need to use display: inline-block; property.
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
You don't have to add any inline css. There is a built-in feature in bootstrap that would position the text boxes, buttons, etc. side by side in one row.
Your form should be wrapped in a <form> tag.
<form class="form-inline" role="form">
*Your form groups here.*
</form>
That should make your form groups display inline, depending on the width of your browser. It should also be responsive as well.
<div class="form-group">
<label class="col-xs-2 control-label" style="color:eea236">name:/label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="name" name="name"/>
</div>
<label for="organization" style="color: #eea236">City:</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<div class="col-xs-3">
<button class="btn btn-warning" type="submit">Search</button>
</div> <img src="xx.jpg" />
</div>
My HTML has a class called .required that is assigned to required fields.
Here is the HTML:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
I added the following to my CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Still that does not give a red * around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce * to required fields?
EDIT
The * in terms and conditions does not appear immediately to a checkbox. How to fix this?
Use .form-group.required without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Note: not tested
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok third edit:
CSS back to what is was
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Assuming this is what the HTML looks like
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
To display an asterisk on the right of the label:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesome add these lines (and change the content line):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
.form-group .required .control-label:after should probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.
use simple css,
.myform .required:after {
content: " *";
color: red;
font-weight: 100;
}
<form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form
The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:
.form-group .required {
styles
}
Is targeting an element with the class of "required" that is inside an element with the class of "form-group".
Without the space it's targeting an element that has both classes. 'required' and 'form-group'
This CSS worked for me:
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
and this HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
This works for me:
CSS
.form-group.required.control-label:before{
content: "*";
color: red;
}
OR
.form-group.required.control-label:after{
content: "*";
color: red;
}
Basic HTML
<div class="form-group required control-label">
<input class="form-control" />
</div>
I modified the css, as i am using bootstrap 3.3.6
.form-group.required label:after{
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
}
the HTML
<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea>
</div>