Form Design Help

Hello,

I need help to make a search box like the web site yidio.com has with the large search box in the middle of the page.

I don't want something that big but looks the same.

Please help.

If anyone knows a web site that has a tutorial that covers this I would be very greatful

 

It's simply an input positioned so that it appears inside the box (which is just part of the background).
Then just an image being used as a submit button that is also positioned (probably using position:relative so that it appears next to the input field.

To do this you'll need to learn a bit of css, specifically how to set a background for an element, and how to position an input.

 

how do you get the input text so big in the text form?

 

That's simply styling the input with css.

You need something like this in your css:

input {
font-size:24px;
}

Or if you give your input an id:

input#bigtextforsearch {
font-size:24px;
}

If you come up with a background etc..., post it here and I can help you with the css and positioning.

 

Ok, so here's what you need in your css:

div#searchbox {
background:url(search.png) no-repeat;
width:350px;
height:50px;
min-width:350px;
min-height:50px;
}

input#search {
position:relative;
top:8px;
left:8px;
font-size:24px;
color:#3B4445;
width:330px;
height:30px;
border-style:none;
}

And here's how your html should look for your form:

<div id="searchbox">
<form action="" method="post">
<input type="text" id="search" name="search" value="" />
</form>
</div>

Let me know if you need any more help with this.

 

thank you for your help, but I put the css on the site in my stylesheet and put the form on their with the background image, but it only creates a small box with no background image.

 

ok, figured out what I did, thank you so much for all your help!

 

No problem, feel free to pm me if you have any other questions.

 

how can I get a search button right next to the search box?