<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>
Related
<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>;
I have this html code which made in browser three buttons.How can I put the buttons on the same line?(they appear on different lines).
<form action="file:///C:/Users/andre/Desktop/home.html"/>
<input type="submit" value="Home" />
</form>
<form action="file:///C:/Users/andre/Desktop/players.html"/>
<input type="submit" value="Players" />
</form>
<form action="file:///C:/Users/andre/Desktop/league.html"/>
<input type="submit" value="League" />
</form>
input[type=submit]{cursor:pointer}
form input{float:left;margin:5px}
<form action="file:///C:/Users/andre/Desktop/home.html"/>
<input type="submit" value="Home" />
</form>
<form action="file:///C:/Users/andre/Desktop/players.html"/>
<input type="submit" value="Players" />
</form>
<form action="file:///C:/Users/andre/Desktop/league.html"/>
<input type="submit" value="League" />
</form>
form tag's default display value is block. If you make it inline-block, it will solve that problem.
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/home.html">
<input type="submit" value="Home" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/players.html">
<input type="submit" value="Players" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/league.html">
<input type="submit" value="League" />
</form>
Just add following code
<style>
form { display : inline-block; }
</style>
This is my HTML from. and i'm trying to set a Virtual Page View when submitting the form but i just can't make it work.
Pls advice
<form id="frmContact" action="post.php" method="post">
<div class="form-right-pnl">
<input type="text" class="required name" size="40" placeholder="×©× ×ž×œ×:" name="full_name">
<input type="text" class="required phone" size="40" placeholder="טלפון:" name="phone">
<input type="text" class="required email" size="40" placeholder='דו×"ל:' name="email">
<span>מ×שר קבלת ×—×•×ž×¨×™× ×¤×¨×¡×•×ž×™×™×</span>
<input type="checkbox" class="radio_btn" name="selling_a_property" checked value="Yes"/>
</div>
<div class="form-left-pnl" id='basic-modal'>
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push([‘_trackEvent’, ‘Forms’, ‘Submit’]);” />
</div>
<div class="clear"></div>
</form>
Change this line
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push([‘_trackEvent’, ‘Forms’, ‘Submit’]);” />
for
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push(['_trackPageview', '/virtual-page-view-on-click-submit-button']);” />
My html:
<section class="featured">
<div class="content-wrapper">
<h1>Hey! This is private!!!</h1>
<form action="" method="POST">
<fieldset>
<legend>(Not really) Opt In or Out</legend>
<input type="checkbox" id="selectTwitter" name="selectTwitter">I'm Twitterpated!</input>
<br />
<input type="checkbox" id="selectBingSearch" name="selectBingSearch">Bing Search</input>
<br />
<input type="checkbox" id="selectDuckDuckGoSearch" name="selectDuckDuckGoSearch">Duck Duck Go Search</input>
<br />
<input type="checkbox" id="selectYouTube" name="selectYouTube">You Tuber!</input>
<br />
<input type="checkbox" id="selectFlickr" name="selectFlickr">Flickr</input>
<br />
<input type="checkbox" id="selectWikipedia" name="selectWikipedia">Wikipedia</input>
<br />
<input type="checkbox" id="selectAmazon" name="selectAmazon">amazon</input>
<br />
<input type="checkbox" id="selectFlickr" name="selectFlickr">Fakebook</input>
<br />
<input type="submit" id="btnSubit" name="btnSubmit" value="Save Config changes</input><br />
</fieldset>
</form>
</div>
</section>
...displays as I would expect on jsfiddle (http://jsfiddle.net/CTyVk/)
But when I run my site, it appears like so:
What is the problem?
You didn't close <input>.. in <input type="submit" id="btnSubit" name="btnSubmit" value="Save Config changes</input><br />
You're missing a "> in your submit button code. Try:
<input type="submit" id="btnSubit" name="btnSubmit" value="Save Config changes"></input>
When label tag should be used over span or dev in form?
Example:
option1-span:
<form action="">
<span>Name:</span><input type="text">
<input type="submit" />
</form>
option2-label:
<form action="">
<label>Name:</label><input type="text">
<input type="submit" />
</form>
option3-div:
<form action="">
<div style="display:inline;">Name:</div><input type="text">
<input type="submit" />
</form>
Thanks
This is what label tags are for:
<form action="">
<label for="txt">Name:</label><input type="text" id="txt" name="txt" />
<input type="submit" />
</form>
Then clicking on the label will focus on the input element.
The label tag is primarily used along with the for attribute. This aids in web accessibility of forms. For example
<form>
<label for="firstName">First name:</label>
<input type="text" name="firstName" value=""/>
</form>
By using the for tag, we can essentially associate the text "First Name:" with the input field having the name = "firstName".
Aside from that it has other attributes allowed but the span is more regularly used for styling markup.