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>
Related
<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>
I feel like this should be easily searchable but I couldn't find it.
I want link buttons that are next to eachother horizontally:
<form action="http://google.com">
<input class="button" type="submit" value="google">
<input class="button" type="submit" value="yahoo">
</form>
this works, except that they both link to yahoo. I need each button to link differently.
<form action="http://google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
this links to different url's however it's rendering one on top of the other.
How do I make them on the same row?
You could do it by set display: inline-block; to form.
form {
display: inline-block;
}
<form action="http://google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
This should do the trick.
<head>
<style type="text/css">
form {
float: left;
}
</style>
</head>
<body>
<form action="http://www.google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://www.yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
</body>
Something like this would be the quick and easy way:
<div style="overflow: hidden;">
<form action="http://google.com" style="display: inline-block;">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com" style="display: inline-block;">
<input class="button" type="submit" value="yahoo">
</form>
</div>
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.
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.