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>
Related
I need to separate a form into 2 pieces. 3 fields on one site and the other field and submit button on the other. I gave them all one class called "contactform" exept for the button. I'm working with drupal, that means that i can ONLY work with the CSS. So i cant add any other HTML tag a class other then the inputfields.
What i have
What i'm trying to achieve
The only code i can provide is the HTML code inside "Inspect element", which i cant post here so i'll post in in a comment below
I hope you guys can help me out with this and thank you in advance!
This is what i can give you. Its a whole mess of code but there's nothing more i can do:
<form class="webform-client-form webform-client-form-14" action="/drupal/contact-0" method="post" id="webform-client-form-14" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield webform-component--naam form-group form-item form-item-submitted-naam form-type-textfield form-group"><input required="required" placeholder="Uw naam" class="contactform form-control form-text required" type="text" id="edit-submitted-naam" name="submitted[naam]" value="" size="50" maxlength="40" /> <label class="control-label element-invisible" for="edit-submitted-naam">Naam <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-email webform-component--email form-group form-item form-item-submitted-email form-type-webform-email form-group"><input required="required" class="email contactform form-control form-text form-email required" placeholder="Uw emailadres" type="email" id="edit-submitted-email" name="submitted[email]" size="50" /> <label class="control-label element-invisible" for="edit-submitted-email">Email <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textfield webform-component--onderwerp form-group form-item form-item-submitted-onderwerp form-type-textfield form-group"><input required="required" placeholder="Uw onderwerp" class="contactform form-control form-text required" type="text" id="edit-submitted-onderwerp" name="submitted[onderwerp]" value="" size="50" maxlength="255" /> <label class="control-label element-invisible" for="edit-submitted-onderwerp">Onderwerp <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textarea webform-component--bericht form-group form-item form-item-submitted-bericht form-type-textarea form-group"><div class="form-textarea-wrapper"><textarea required="required" placeholder="Uw bericht" class="contactform2 form-control form-textarea required" id="edit-submitted-bericht" name="submitted[bericht]" cols="50" rows="5"></textarea></div> <label class="control-label element-invisible" for="edit-submitted-bericht">Bericht <span class="form-required" title="This field is required.">*</span></label>
</div><input type="hidden" name="details[sid]" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-4vEZg04Y8Zevfr2GC6ONWVw8UI_4vxf3AL8NRrCFWtg" />
<input type="hidden" name="form_token" value="gNUgTXDR4TC0WhrHOwB7IaYOMOR6Nxz01qjuvrsVPPQ" />
<input type="hidden" name="form_id" value="webform_client_form_14" />
<div class="form-actions"><button class="webform-submit button-primary btn btn-primary form-submit" type="submit" name="op" value="Submit">Submit</button>
</div></div></form>
</section>
The CSS
.webform-client-form-14 {
float: left;
width: 45%;
margin-top: 20px;
margin-bottom: 30px;
}
.contactform {
border-radius: 0;
border: none;
}
The issue is that you set the whole form to 45% width, but we only want elements within it to be 45% width. Without being able to add wrappers to the html, you will need to target each input group one-by-one with either the :nth-child(n) css selector or the field group's custom class, eg: .webform-component--bericht.
Example:
.webform-client-form-14 .form-item:nth-child(1) {
width:45%;
display:block;
float:left;
}
try giving the text area display: block;
I'm using Wufoo for a web form. The form is in my page in an iframe. They let you use custom CSS to style the form. I'm trying to center the form in the iframe.
Here's the HTML I grabbed from the page when the form is displayed in the iframe:
<div id="container" class="ltr">
<form id="form2" name="form2" class="wufoo topLabel page1 hideHeader" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate="true" action="https://peakinbound.wufoo.com/embed/mtco4fp0qomvz2/def/&header=hide#public">
<ul>
<li id="fo2li1" class="notranslate">
<label class="desc" id="title1" for="Field1">
Name<span id="req_1" class="req">*</span>
</label>
<span>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
<label for="Field1">First</label>
</span>
<span>
<input id="Field2" name="Field2" type="text" class="field text ln" value="" size="14" tabindex="2" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
<label for="Field2">Last</label>
</span>
</li>
<li id="fo2li3" class="notranslate">
<label class="desc" id="title3" for="Field3">
Email<span id="req_3" class="req">*</span>
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
</div>
</li>
<li class="buttons ">
<div>
<input type="hidden" name="currentPage" id="currentPage" value="jssDPjBF2iK6t1UvInla0mSUbe82kYF5HwuBetLwuBe5y49jw=" />
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="GET INFO" onmousedown="doSubmitEvents();" />
</div>
</li>
</ul>
</form>
</div>
<!--container-->
I tried using this on the CSS but it didn't center the form.
#container {
width: 350;
height: 250;
margin:0 auto;
}
Any ideas on how to get this form centered?
Thanks for your help.
You need to declare a measuring unit in px.
http://jsfiddle.net/73TSr/10/
http://jsfiddle.net/73TSr/10/show
#iframe-container {
width: 350px;
height: 300px;
margin:0 auto;
}
#iframe-container > iframe {
overflow-y: auto;
border: none;
height: 100%;
width: 100%;
}
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;">
can anyone help me?
I need to place a div after a textbox in a html form.
ie.label,textbox,and new div is in same line
please see my html code .i didn't add div code yet.
please can any one help me to add a div in same line without any modification to this codes.
because i made several css codes for aligning this labels and text boxes
<form action="operates/signup.php" method="post" name="signupform" id="signupform">
<label id="fnamelabel" for="fnam">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" />
<p>
<label id="lnamelabel" for="lnam">Last Name :</label>
<input type="text" name="lnam" id="lnam" tabindex="2" />
</p>
<p>
<label id="yemail" for="email">Your Email :</label>
<input type="text" name="email" id="email" tabindex="3" />
</p>
<p>
<label id="reemail" for="remail">Re-enter Email :</label>
<input type="text" name="remail" id="remail" tabindex="4" />
</p>
<p>
<label id="npass" for="password">New Password :</label>
<input type="text" name="password" id="password" tabindex="5" />
</p>
<p>
<label id="mskill" for="bskill">Main Skill :</label>
<select name="bskill" id="bskill" tabindex="6">
</select>
</p>
<p>
<input type="checkbox" name="termsanc" id="termsanc" tabindex="6" />
<label id="terms" for="termsanc">I agreed the Terms and Conditions</label>
</p>
<div id="signupbutton" onclick="document.forms.signupform.submit()"></div>
</form>
Thank you
You can style the div as inline, but you should rather use a span.
<label id="fnamelabel" for="fnam" style = "display:inline">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" style = "display:inline" />
<div id="newDiv" style = "display:inline"></div>
normally I wouldn't use in-line CSS like that, but as you didn't post the css i felt it'd be necessary.
First of all, let's work on that markup!
<form action="operates/signup.php" method="post" name="signup_form">
<label>First Name:
<input name="first_name"></label>
<label>Last Name:
<input name="last_name"></label>
<label>Your Email:
<input type="email" name="email"></label>
<label>Please Reenter Your Email:
<input type="email" name="validate_email"></label>
<label>New Password:
<input type="password" name="password"></label>
<label>Main Skill:
<input name="main_skill"></label>
<label><input type="checkbox" name="terms_and_conditions">I agreed the Terms and Conditions</label>
<button type="submit">Submit</button>
</form>
<style type="text/css">
form {
display: block;
width: 400px;
}
label {
display: block;
padding: 5px;
margin: 5px;
}
form label input {
float: right;
}
input[type=checkbox] {
float: none;
}
</style>
There, now doesn't that look much better?
As for the original question, don't use a div, div is a completely-unsemantic block-level element. If you want an inline element (i.e. to show on the same line), use a span, which is a completely-unsemantic inline-level element.
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>