I have a form that is divided into two columns with floats. I want to make them "checkered". How can I use nth-child to achieve this? See the screenshot below to see what I mean. Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Grade Calculator
</title>
<style type="text/css">
.form-group {
padding: 15px;
width: 45%;
float: left;
}
.form-group:nth-child(3n+0){
background: #e4e4e4;
}
form {
margin: 25px auto;
border-width: 0px 1px;
border-style: solid;
border-color: #ccc;
width: 50%;
}
label {
width: 350px;
margin: 0;
padding: 0;
display: block;
}
input {
width: calc(100% - 20px);
margin: 15px 0px;
}
</style>
</head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Era4Q8Ttswx16Rg3XXwdNh7LuVHYalpdgKUCOJGwMcgBX7OP6eVRcScpUQ68BMteFlRltJ8L3vXUMx8wG+4DEf3Oi4RZcMfq/H6H7MbdpUbBLssudRCbS2QNV6vILQ9uBG64j4wb2CKGAAM2+aw+BYfCpxNSeloQ2BbcnUnOHjk=" />
</div>
<div>
<div class="form-group">
<span id="aOneActualLbl">Assignment 1</span>
<input name="aOneActualTxt" type="text" value="8" id="aOneActualTxt" />
<span id="aOnePossibleLbl">Possible</span>
<input name="aOnePossibleTxt" type="text" value="10" id="aOnePossibleTxt" />
</div>
<div class="form-group">
<span id="aTwoActualLbl">Assignment 2</span>
<input name="aTwoActualTxt" type="text" value="8" id="aTwoActualTxt" />
<span id="aTwoPossibleLbl">Possible</span>
<input name="aTwoPossibleTxt" type="text" value="10" id="aTwoPossibleTxt" />
</div>
<div class="form-group">
<span id="aThreeActualLbl">Assignment 3</span>
<input name="aThreeActualTxt" type="text" value="9" id="aThreeActualTxt" />
<span id="aThreePossibleLbl">Possible</span>
<input name="aThreePossibleTxt" type="text" value="10" id="aThreePossibleTxt" />
</div>
<div class="form-group">
<span id="aFourActualLbl">Assignment 4</span>
<input name="aFourActualTxt" type="text" value="9" id="aFourActualTxt" />
<span id="aFourPossibleLbl">Possible</span>
<input name="aFourPossibleTxt" type="text" value="10" id="aFourPossibleTxt" />
</div>
<div class="form-group">
<span id="aFiveActualLbl">Assignment 5</span>
<input name="aFiveActualTxt" type="text" value="8" id="aFiveActualTxt" />
<span id="aFivePossibleLbl">Possible</span>
<input name="aFivePossibleTxt" type="text" value="10" id="aFivePossibleTxt" />
</div>
<div class="form-group">
<span id="aSixActualLbl">Assignment 6</span>
<input name="aSixActualTxt" type="text" value="8" id="aSixActualTxt" />
<span id="aSixPossibleLbl">Possible</span>
<input name="aSixPossibleTxt" type="text" value="10" id="aSixPossibleTxt" />
</div>
<div class="form-group">
<span id="aSevenActualLbl">Assignment 7</span>
<input name="aSevenActualTxt" type="text" value="8" id="aSevenActualTxt" />
<span id="aSevenPossibleLbl">Possible</span>
<input name="aSevenPossibleTxt" type="text" value="10" id="aSevenPossibleTxt" />
</div>
<div class="form-group">
<span id="aEightActualLbl">Assignment 8</span>
<input name="aEightActualTxt" type="text" value="8" id="aEightActualTxt" />
<span id="aEightPossibleLbl">Possible</span>
<input name="aEightPossibleTxt" type="text" value="10" id="aEightPossibleTxt" />
</div>
<div class="form-group">
<span id="aNineActualLbl">Assignment 9</span>
<input name="aNineActualTxt" type="text" value="8" id="aNineActualTxt" />
<span id="aNinePossibleLbl">Possible</span>
<input name="aNinePossibleTxt" type="text" value="10" id="aNinePossibleTxt" />
</div>
<div class="form-group">
<span id="aTenActualLbl">Assignment 10</span>
<input name="aTenActualTxt" type="text" value="8" id="aTenActualTxt" />
<span id="aTenPossibleLbl">Possible</span>
<input name="aTenPossibleTxt" type="text" value="10" id="aTenPossibleTxt" />
</div>
<div class="form-group">
<input type="submit" name="runCalculation" value="Calculate Grade" id="runCalculation" />
<span id="currentGradeLbl">Your current grade is B</span>
</div>
</div>
In the screenshot below, I would like assignment 2, 3, 6, 7, and 10 to be grey to create the checker effect. Is this possible?
I was trying to work this out using a single formula but sometimes it's easy if you break them into multiple series.
2, 6, 10, 14, ... => 4n-2
3, 7, 11, 15, ... => 4n-1
So,
.form-group:nth-child(4n-2), .form-group:nth-child(4n-1){
background: #e4e4e4;
}
check this fiddle
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 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 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>
I am currently struggeling making from elements if twitter bootsrap 3.0 display in one without breaks in it. What happens when I make a wrapper float is that the input elements cut off.
Look at this jsfiddle please
<form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform">
<span class="comment-form-author"><label class="obscure" for="author">Name</label><span class="input-group span2"><input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /></span></span> <span class="comment-form-email"><label class="obscure" for="author">Email</label><span class="input-group span3"><input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /></span></span> <span class="comment-form-url"><label class="obscure" for="url">Website</label><span class="input-group span3"><input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /></span></span>
<div class="comment-form-comment">
<textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment">
</textarea>
</div>
<!-- #form-section-comment .form-section -->
<p class="form-submit"><input type="submit" value="Post Comment" id="submit" name="submit" /> <input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /> <input type="hidden" value="0" id="comment_parent" name="comment_parent" /></p>
</form>
css
#import url('http://my-hardware.net/bs/bootstrap.css');
/* hiding content but not from screen readers, used in comments form */
.obscure {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.comment-form-email{
display: block;
float: left;
}
For showing purposes I just added my attempt to one of the 3 imputs I want to line up.
Does anyone has a idea how to make this work?
I think this should work...
<div class="controls-row">
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">X</span>
<input type="text">
</div>
</div>
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">Y</span>
<input type="text">
</div>
</div>
</div>
I am trying to create a fairly basic form with in my maincontent. I am sure I am coding things incorrectly and it is driving me crazy. Note my code. I get extremely wide vertical spacing in IE 7 and the bacground color between the field sets does not work correctly. All is good in FF.
My CSS is:
fieldset {
margin: 1.5em 0 0 0;
padding: 0;
border-style: none;
border-top: 1px solid #BFBAB0;
background-color: #FFFFFF;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li {
padding-bottom: 1em;
}
fieldset.submit {
border-style: none;
}
{
var w = document.myform.mylist.selectedIndex;
var selected_text = document.myform.mylist.options[w].text;
alert(selected_text);
}
label em {
display: block;
color: #900;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}
This is my html code.
<div id="mainContent1">
<form name="myform">
<label for="mylist"><strong>Select an Account Type:</strong></label>
<select name="mylist"><option value="traditional">Traditional Account</option>
<option value="paperless">Paperless Account</option>
</select>
</form>
<br /><a> </a>
<form action="example.php">
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="name">Name:</label>
<input id="name" name="name" class="text" type="text" />
<label for="name">
<em>required</em>
</label>
</li>
<li>
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
<label for="name">
<em>required</em>
</li>
<li>
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
<label for="name">
<em>required</em>
<ol>
<li>
<input id="option1" name="option1"
class="checkbox" type="checkbox" value="1" />
<label for="option1">Savings</label>
</li>
<li>
<input id="option2" name="option2"
class="checkbox" type="checkbox" value="1" />
<label for="option2">Checkings</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Delivery Address</legend>
<ol>
<li>
<label for="address1">Address 1:</label>
<input id="address1" name="address1" class="text"
type="text" />
</li>
<li>
<label for="city">City:</label>
<input id="city" name="city" class="text" type="text" />
</li>
<li>
<label for="postcode">Zip Code:</label>
<input id="postcode" name="postcode"
class="text textSmall" type="text" />
</li>
<li>
<label for="country">Country:</label>
<input id="country" name="country" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset class="submit">
<input class="submit" type="submit" value="Submit" />
</fieldset>
<fieldset class="clear">
<input class="clear" type="clear"
value="Submit" />
</fieldset>
</form>
First, get rid of the script in your CSS file...
Firefox/compliant browsers and IE treat legends and fieldsets very differently, unfortunately... that may be the problem you're seeing:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
make sure there is a "#" before your id's and a "." before your classes in your css file. not doing so causes confusion.