Question

Hi I would like the form width to be 100%. I would like the text box to extend almost the entire width of the page, and have the small “GO” button directly to the right of the text box, all on the same line (or block).

Right now my text box is only about the width of the text within it (“Enter an address here”) Thank you!

CSS

#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}

HTML

<div id="search1">
  <form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get"    onsubmit="codeAddress(); return false">
    <input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
    <input type="button" value="GO" onclick="codeAddress()"/>
  </form>
</div>

Answer 1

By default the form with is 100% if you do not change it. If you want the input field to be longer you can use the size attribute.

<input id="address" size="90" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>

FIDDLE

Or you can achieve it through CSS by adding this:

#address{
         width:80%;
}