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.
Related
I am trying to scrape some data from a website using R, but every once in a while it asks for my password. How can I have R fill in the form?
The html code for the form looks like this:
<form action="/en/login" method="post">
<input type="hidden" name="_target_path" value="http://website.com/" />
<div style="margin-top:10px;">
<input type="text" id="username" name="_username" value="" class="inputLoginBox" placeholder="your username" tabindex="1"/></td>
</div>
<div style="margin-top:10px;">
<input type="password" id="password" name="_password" class="inputLoginBox" placeholder="your password" tabindex="2"/></td>
</div>
<div style="margin-top:10px;">
<input type="checkbox" id="remember_me" name="_remember_me" class="inputCheckbox" tabindex="3"/>
<label for="remember_me">remember me</label>
forgot password?
</div>
<div style="margin-top:10px;">
<button type="submit" class="submitButton" name="login[go]" tabindex="4" style="font-size:1.3em;">login</button>
<br><br>
</div>
</form>
<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>
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']);” />
I am trying display images seamlessly in a checkerboard fashion. All images are same size. Can't seem to eliminate spacing between rows.
The overall goal is compact code.
Here is the original code.
<?php build();
function build(){
for($x=1;$x<=11;$x++){
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><?php }}}?>
Here is what I have after trying several other things to eliminate the spacing.
<?php build();
function build(){
for($x=1;$x<=11;$x++){
?><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']"
><input type="image" name="data" value="var" src="images/blue.png"></form
><?php }?></div><?php }}?>
Per request, html translation.. (values changed to 3 to reduce length.)
<form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form>
Here is what ended up working. It works now because all inputs have been lumped into a single form.
<?php solutionbuild();
function solutionbuild(){
for($x=1;$x<=11;$x++){
?><form method="POST" action="<?php $_SERVER['PHP_SELF'] ?>"><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><input type="image" name="data" value="9" src="images/green.png"><?php
}?></div><?php }}?>
html version (yikes)
<form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div>
I don't know exactly why consolidation of the forms eliminates the spacing issue. If anyone knows, please let me know. Thanks
The space you are seeing below your images is because they are inline elements. Inline elements include space for the descender in text like the lowercase letters j and g.
Float your image inputs to or set them to display block to remove this extra space.
Edit
Not sure why you want to use a form for each image input. I would wrap a form tag around the whole thing myself (that is, without further info) so I left them out.
Here's an example:
.no-float,
.float {
margin: 25px 0;
}
.float input {
float: left;
}
.float .row {
clear: left;
}
<!-- Non floated inputs (has spaces) -->
<div class="no-float">
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
</div>
<!-- floated inputs (no spaces) -->
<div class="float">
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
</div>
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>