Jump to content
Sign in to follow this  
S@m

form class

Recommended Posts

I have a search form within a "p class". I need to keep the search field and the search button all on one line so I found this bit of code to keep it from inserting a line break:css:

.searchform { 	margin: 0; 	padding: 0;	display: inline; 	}

Then my html:

        <p class="headerNav"><a href="#">Home</a> | <a href="#">Locations</a>           | <a href="#">Contact Us</a> | <a href="#">Careers</a>| <a href="#">Français</a>           <br/>          <br/>          <img src="../images/caflag.gif" alt="Canada Flag"/>           <!--          <form action="/canada/en/search/process.do" method="get" class="searchform">          -->          <input name="queryString" type="text" id="queryString" value="Search" size="13" maxlength="50"/>          <input type="image" name="go" src="../images/search-button.gif" alt="go"/>          <input type="hidden" name="category"/></form>          </p>

That works fine, but when I validate the html, it doesn't like the fact that I have a class on the form inside of the p class. Is there a better way to do this?If I remove the class on the form, it puts in a line break. :)Thank you for your time and help!

Share this post


Link to post
Share on other sites

well, I'm not sure if this will help, but I would get out of using the "size" attribute in your <input> tag. Each browser interprets this differently. Either create a class for it's size or change it to something like:

<input name="queryString" type="text" id="queryString" value="Search" style="width:50px;" maxlength="50"/>

this will give you a more consistant display.Can you post the URL where this coed (in its entirety) resides? It would be interesting to play with your code a little bit to try and help.

Share this post


Link to post
Share on other sites

Well, I got this to work: css:

.searchform { 	margin: 0; 	padding: 5px 0px 0px 0px;	display: inline;	float: right;	}

html:

        <p class="headerNav"><a href="#">Home</a> | <a href="#">Locations</a>           | <a href="#">Contact Us</a> | <a href="#">Careers</a>| <a href="#">Français</a></p>    <br/>          <form action="/canada/en/search/process.do" method="get" class="searchform">    <img src="../images/caflag.gif" alt="Canada Flag"/>          <input name="queryString" type="text" id="queryString" value="Search" style="width:133px;" maxlength="133"/>          <input type="image" name="go" src="../images/search-button.gif" alt="go"/>          <input type="hidden" name="category"/></form>

Is is a "good idea" to put the image inside the form like that?I don't have the form inside a "p" tag, everything seems to work fine and checks out in validation as well. :) Thank you for your time Skemcin

Share this post


Link to post
Share on other sites

yeah you can put anything you want in inside a <form> tag - it simply puts a wrapper around everything so that the browser knows what form elements are to be associated with each form when it is submitted. Think of the <form> tag like the <body> tag in that you can do what ever you want in it.glad it's working out for you - let me know if what I said here confused you any.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×