<Card className="input">
<form onSubmit={addUserHandler} className="input">
<label htmlFor="username">Username</label>
<input id="username" type="text" />
<label htmlFor="age">Age (Years)</label>
<input id="age" type="text" />
<button type="submit">Add User</button>
</form>
</Card>
Now the Card component below.
return <div className="card">{props.children}</div>;
How to align this two for css styling?
css
.card > .input-form {
background-color: gray
}
code as below
<Card className="input">
<form onSubmit={addUserHandler} className="input-form">
<label htmlFor="username">Username</label>
<input id="username" type="text" />
<label htmlFor="age">Age (Years)</label>
<input id="age" type="text" />
<button type="submit">Add User</button>
</form>
</Card>
Now the Card component below.
return <div className="card">{props.children}</div>;
Related
I have just started to learn how to code and I was trying to select the button class to change the color when you hover over it. I managed to make it work by selecting this in css:
.button[type="submit"]:hover {
background-color: grey;
}
But I am wondering why this doesn't work instead:
.button:hover {
background-color: grey;
}
here is my html code:
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
It works perfectly, You probably faced not closed div's mistake's or something like this...
take a screenshot if you're sure that everything is alright with your code's.
this helps you to find mistaked like i said:
http://help.simplytestable.com/errors/html-validation/end-tag-for-element-x-which-is-not-open/end-tag-for-element-div-which-is-not-open/
.button:hover {
background-color: grey;
}
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
<div class="col-md-4" style="margin-top:30px;" id="subscriber_page">
<div class="well">
<form>
<h3> Subscribe Now! </h3>
<label for="Name"> FullName </label>
<input type="text" class="form-control" placeholder="input fullname here" id="name" required/>
<br />
<label for="Name"> Address </label>
<input type="text" class="form-control" placeholder="input full address here" id="address" required/>
<br /> <br /> <br />
<center><button type="submit" class="btn btn-primary">Subscribe</button></center>
</div>
</form>
</div>
</div>
Hi there, can someone help me with the bootstrap theme well in a login page? I don't like the current color of the well in bootstrap. Is there another way I can change the color on it? I tried some CSS code but it didn't work.
I already tried the following:
.well{
background: #000000;
}
You can use !important after color
.well{
background: #000 !important;
}
<form className="pure-form">
<fieldset>
<input ref="email" type="email" placeholder="Email"
value={this.state.emailInput}
onChange={this.handleChange}
/>
<input ref="password" type="password" placeholder="Password"
value={this.state.passwordInput}
onChange={this.handleChange}
/>
<label htmlFor="remember">
<input ref="remember" id="remember" type="checkbox" /> Remember me?
</label>
<button onClick={this.handleLoginClick} type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
I just copy-pasted the example form from Purecss.io.
How come everything sticks together? Why do they have no margin?
You have the classes incorrectly added:
<form className="pure-form">
should be
<form class="pure-form">
...and so on.
<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
<form class="pure-form">
<fieldset>
<input red="email" type="email" placeholder="Email" />
<input ref="password" type="password" placeholder="Password" />
<label htmlFor="remember">
<input ref="remember" id="remember" type="checkbox" />Remember me?
</label>
<button onClick={this.handleLoginClick} type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
Paulie_D is correct if you want to call any css class on any html tag then you need to follow the syntax like this
<tag class="classname"></tag>
Eg:
<form class="pure-form">
form elements goes here
</form>
Currently I have a site styled up in Pure. How could I change a pure form to a bootstrap form without changing markup? My pure form is this:
<form class="pure-form pure-form-stacked">
<div class="pure-control-group">
<label for="first-name">First name</label>
<input class="pure-input-1-2" type="text" id="first-name" placeholder="First name">
</div>
<div class="pure-control-group">
<label>Last name</label>
<input class="pure-input-1-2" type="text" placeholder="Last name">
</div>
<div class="pure-control-group">
<label>Middle names</label>
<input class="pure-input-1-2" type="text" placeholder="Middle names">
</div>
<div class="pure-control-group">
<label>Gender</label>
<select>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<button>Save</button>
</form>
You can use Bootstrap's predefined classes for labels and form controls.
Here's an example:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="first-name" class="form-control" id="first-name" placeholder="First Name">
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="last-name" class="form-control" id="last-name" placeholder="Last Name">
</div>
<div class="form-group">
<label for="middle-names">Middle Name</label>
<input type="middle-names" class="form-control" id="middle-name" placeholder="Middle names">
</div>
<div class="form-group">
<label for="sel1">Gender</label>
<select class="form-control" id="gender">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form
Standard rules for form layouts:
Always use <form role="form">
Wrap labels and form controls in <div class="form-group">
Add class .form-control to all textual <input>, <textarea>, and <select> elements
Working on a form with Bootstrap CSS, have the form class as "form-inline", but for some reason, the form refuses to actually display inline.
Here's a fiddle, showing the problem:
http://jsfiddle.net/5wBzE/
Here's the HTML:
<iframe id="AweberFormSubmitFrame" style="display: none" name="AweberFormSubmitFrame" src="about:blank"></iframe>
<form id="before_header" target="AweberFormSubmitFrame" method="post" class="form-inline" action="http://www.aweber.com/scripts/addlead.pl">
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="2074084490" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="foreverjobless" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_f916c5c4ae42ade190efaef62fd11c16" />
<input type="hidden" name="meta_adtracking" value="FJ:_Header" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div class="af-element">
<div class="form-inline">
<input class="text form-control" id="awf_field-60198198" type="text" name="email" value="" tabindex="500" />
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<button name="submit" onClick="return _submit_form_header(this.form);" class="submit btn btn-primary btn-lg" type="submit" value="Submit" tabindex="501">Subscribe</button>
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;">
<img src="http://forms.aweber.com/form/displays.htm?id=TAzsLAwcLCycDA==" alt="" />
</div>
</form>
<div id="after_header" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
Any tips or pointers in the right direction is appreciated!
Solved this by taking out the unnecessary aweber divs.