Add a form field

csa · #1 (**permalink**) Nov 20th, 2005, 11:33

I would like to add a keysearch field form into the top blue section of my site. (see attached) The problem is when I add the form tag it pushing the div height throwing the layout.

Is there a neat way of adding form content to an area such as this and still have control over how it looks?
Thanks

yngexec · #2 (**permalink**) Nov 20th, 2005, 12:31

Quote:

Originally Posted by csa

I would like to add a keysearch field form into the top blue section of my site. (see attached) The problem is when I add the form tag it pushing the div height throwing the layout.

Is there a neat way of adding form content to an area such as this and still have control over how it looks?
Thanks

Try applying a style to the form with a margin: 0;

csa · #3 (**permalink**) Nov 20th, 2005, 13:45

Not sure how to include this? I've done the following but is doens't work, so I'm not sure what goes where

<div id="keysearch">
<form name="form1" method="post" action="">
<input type="text" name="textfield">
</form></div>
CSS
#keysearch{
margin:0;
}

yngexec · #4 (**permalink**) Nov 20th, 2005, 14:11

Code: Select all

<HTML>
<HEAD>
</HEAD>
<BODY>
<STYLE>
form {
  margin: 0;
 }
</STYLE>
Random text and stuff...blah blah blah blah blah blah...
</BODY>
</HTML

csa · #5 (**permalink**) Nov 20th, 2005, 14:42

Right this is where I've got too

http://www.media-drive.co.uk/nti/store/index20.htm

I quite like where the keyword search currently is, however I was trying to get this onto the grey bar above but I can't seem to get this to work.

By applying the margin: 0px is this suppost to make the field height slimmer? as it still looks quite big. The code I've used is below. Thanks

css

form#login {
background-color: #CCCCCC;
color: #000000;
border: 1px solid #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
margin: 0px;
}
#login .buttons {
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #163A78;
color: #ffffff;
margin-right: 6px;
margin:0px;
}
.buttons{
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #163A78;
color: #ffffff;
margin-right: 6px;
}
.fieldcell {
background-color: #F2F7FB;
color: #000000;
text-align: left;
margin-right: 0px;
padding-right: 0px;
margin: 0px;
}

html

<div id="contentheader">
<h1> 0121 <span class="class1"><a href="home.asp">     &nbs p;           enquiries@e.co.uk</a></span></h1>
<form name="login" id="login" method="post" action="#">
<label>
<input name="textfield" type="text" class="fieldcell" value="Keyword Search" size="16">
<input name="Submit" type="submit" tabindex="3" value="Submit" class="buttons" />
</label>
</form>

</div>

benbacardi · #6 (**permalink**) Nov 20th, 2005, 14:44

try putting "display:inline" into the form css?

csa · #7 (**permalink**) Nov 20th, 2005, 15:06

Something happened!

It's still not pushing it onto the line above. See attached, I was aiming for it to be placed top right. At the moment it's under the phone number.

(benbacardi added brownie points!)

form#login {
background-color: #CCCCCC;
color: #000000;
border: 1px solid #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
margin: 0px;
background-image:url(images/searchback.gif);
display:inline;

csa · #8 (**permalink**) Nov 20th, 2005, 15:11

Arrrh!!!! Just moved my form html code and this has worked. A bit of tidying up and this should do what I want, just need to find a keyword script now!

Thanks for all your help. It is very much appreciated, makes working on a Sunday worth the effort!

herkalees · #9 (**permalink**) Nov 23rd, 2005, 20:33

To shrink the height of the text box, try this in the css:

input.fieldcell {
height: 16px;
}

But mess around with the actual number to your liking.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
multiple form field calculation	thenamenoonehastaken	JavaScript Forum	2	Feb 21st, 2008 22:32
Form with confirm password field	dhossai	JavaScript Forum	28	Dec 16th, 2007 05:12
Number validation in form field	Matc	JavaScript Forum	2	May 26th, 2006 15:05
adding a field input to the subject in a form	goatsalad	PHP Forum	1	Feb 3rd, 2006 14:49
Newbie: changing the value of a field on form	d9085	Databases	1	Dec 12th, 2005 18:08

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Add a form field