I just can't figure out to get the "submit" button to the right of the text box for the form found at the top of the loop on this page: http://www.babysavers.com.
The code I'm using is here:
<center>
<div style="width: 625px; height: 70px; border-style: dotted; border-color: #d7345a; border-width: 1px; padding: 5px;">
<form action="http://www.feedblitz.com/f/f.fbz?AddNewUserDirect&ajax=4" method="POST" name="FeedBlitz_9fe455b8521611e29f67003005ce8903">
<h3>Join over 8,900 subscribers! Enter your email below for FREE Updates:</h3>
<input style="display:none" type="text" name="EMAIL" value="" maxlength="64" size="65">
<input type="hidden" name="EMAIL_" value="" maxlength="64" />
<input type="hidden" name="EMAIL_ADDRESS" value="" maxlength="64" />
<input type="hidden" name="FEEDID" value="873069" /> <input type="hidden" name="cids" value="1" />
<input type="hidden" name="PUBLISHER" value="24085942" />
<input onclick="FeedBlitz_9fe455b8521611e29f67003005ce8903s(this.form);" type="button" value="Subscribe!" />
</form></div><script type="text/javascript" language="Javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
function FeedBlitz_9fe455b8521611e29f67003005ce8903i(){var x=document.getElementsByName('FeedBlitz_9fe455b8521611e29f67003005ce8903');for(i=0;i<x .length;i++){x[i].EMAIL.style.display='block';
x[i].action='http://www.feedblitz.com/f/f.fbz?AddNewUserDirect';}}
function FeedBlitz_9fe455b8521611e29f67003005ce8903s(v){v.submit();}FeedBlitz_9fe455b8521611e29f67003005ce8903i();
// ]]></script><br></center>
I know my code is sloppy, but all I want to do is line up the Submit button so it's to the right of the text box, not underneath it. Any help would be appreciated.
Set your display to inline rather than none:
style="display: inline;"
Try this change (display: inline):
<input type="text" size="65" maxlength="64" value="" name="EMAIL" style="display: inline;">
Related
I have an HTML Form with some fields. I want to add two buttons to it. First two recreate a new set of all the fields in this form on the next line. Second to delete any of the newly recreated set of fields.
<form action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
</form>
Yes, you can use only html, or you can use JS or if you want you can use HTML and JS to make it more dynamic,:-
You can refer this
you can use var cln=form.cloneNode(true); to clone a particular element or a whole form and then just append it to the body of the document using document.body.appendChild(cln);
run the code snippet to see how it works
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function copyForm(){
var form=document.getElementById("form1");
var cln = form.cloneNode(true);
document.body.appendChild(cln);
}
function deleteForm(event){
event.parentElement.remove();
}
</script>
</head>
<body>
<input type="button" name="copy" value="add new form" onclick="copyForm();">
<form id="form1" action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
<input type="button" value="delete form" onclick="deleteForm(this);" />
</form>
</body>
</html>
I would like to display my own magnifying glass image to the right of a DuckDuckGo search box. The search itself is working, but the image is displayed below the box. How can I make it display to the right of it? My code is as follows:
form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 24px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top;
maxlength="255";
}
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com"/>
<input type="hidden" name="k8" value="#000000"/>
<input type="hidden" name="k9" value="#0000ff"/>
<input type="hidden" name="kaa" value="#880088"/>
<input type="hidden" name="kt" value="a"/>
<input type="text" name="q" maxlength="255" placeholder=" ..."/>
</form>
<img src="images/image.gif" height="20" width="20">
You need to insert the search box and the image into a div with display: inline-block;
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com"/>
<input type="hidden" name="k8" value="#000000"/>
<input type="hidden" name="k9" value="#0000ff"/>
<input type="hidden" name="kaa" value="#880088"/>
<input type="hidden" name="kt" value="a"/>
<div style="display: inline-block">
<input type="text" name="q" maxlength="255" placeholder=" ..."/>
<img src="images/image.gif" height="20" width="20">
</div>
</form>
trying to get the search button (image) to display either next to or inside the search box. Everything I try, the search button(image) always ends up below the search box and centered for some reason.
<form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8">
<input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value="">
<span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label>
<input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10">
</span>
<span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label>
<input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20">
</span>
<input id="searchGoButton" style="width: 27px;" type="image" src="/images/searchbutton27px.png" alt="Search">
</form>
https://jsfiddle.net/pf6qQ - for some reason it shows up to the right on fiddle but on my Joomla site it's always centered and below the search box. Ultimately I'm looking to get it in the search box
Try to define your css separately and not inline in your HTML. Despite this, I've taken your code and added a position style to the search image. This should work.
Try this:
<form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8">
<input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value=""></input>
<span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label>
<input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10"></input>
</span>
<span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label>
<input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20"></input>
</span>
<input id="searchGoButton" style="width: 27px; position:relative; left:-40px; top:10px;" type="image" src="/images/searchbutton27px.png" alt="Search"></input>
</form>
I used jqueryui dialog . There are input boxes in the page. When the dialog appears on clicking a link, then the input boxes are visible from behind the dialog body resulting into bad visibility of the dialog body text etc.
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<input type="text" value="" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" />
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
How to refrain the input boxes from distorting the modal window body part?
If you specify modal:true the background will be grayed out.
$(function() { $( "#dialog" ).dialog({modal:true}); });
If you want the entire background to be hidden you can change the overlay to a solid color using CSS:
.ui-widget-overlay{
background: gray;
opacity: 1;
}
JSFiddle: http://jsfiddle.net/WBstB/1/
I want this form band button to line up horizontally and to sit as a whole in the horizontal center of the page.
How do I set my css?
<form action="signup.php" method="post">
<fieldset>
<label>Email: <label>
<input type="text" name="email" id="email" placeholder='email address' />
<input type="submit" value="Sign Up" class= "button" />
</fieldset>
</form>
Plenty of ways to tackle this. Here is one solution. Though, I do recommend not using inline styles, but here is your form with the CSS.
<form action="signup.php" method="post" style="margin: 0 auto; width: 350px;">
<fieldset>
<label>Email: <label>
<input type="text" name="email" id="email" placeholder='email address' />
<input type="submit" value="Sign Up" class= "button" />
</fieldset>
</form>
I would wrap your inputs in a div and set the div to display:inline in your css. In your css also target your form and set that to margin:auto
something like this:
<div style="width: 300px; margin-left: auto; margin-right:auto;">
<form action="signup.php" method="post">
<fieldset>
<label>Email: <label>
<input type="text" name="email" id="email" placeholder='email address' />
<input type="submit" value="Sign Up" class= "button" />
</fieldset>
</form>
</div>