CODEWITHSUNDEEP
html
bebarules666
bebarules666

Reputation: 89

Html, Make the search bar wider

Im trying to make a search bar like google, i have it all pretty much worked out, im just not sure how to make the search bar wider, heres the code i have so far

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td>
    <FORM name="doingasearch" id="doingasearch">  
  <p align="center"><INPUT name=searchbox type=text size=20></p>
  <p align="center"><INPUT type="button" value="Search" onclick="return 

googleSearch();">
  <INPUT type="button" value="I Feel Lucky" onclick="return googleSearch

();"></p>
</FORM>
    </td>
  </tr>
  <tr>
  <td>
  </td>
  </tr>
</table>

If you find anything wrong with it, please say so

Upvotes: 0

Views: 22383

Answers (3)

Dalmantrix
Dalmantrix

Reputation: 1

<!DOCTYPE html> 
<html lang="en"> 
<head>

<title>Search box</title>

<body>

<div class="searchbox" >
                <input style="height: 40px;" autocomplete="on" maxlength="100" autofocus name="m" type="search" placeholder="input text Here"  size="50">
                <input type="submit" value="Search">
</div>
</body>
</html>

Upvotes: 0

D.A
D.A

Reputation: 2601

You could either do it in your HTML:

<input name="searchbox" type="text" size="40" />

Or you could do it the right way, with CSS:

input {
    width: 200px;
}

Upvotes: 4

Andrew Manson
Andrew Manson

Reputation: 280

You should refrain from tables when using search forms. Anyways, you could do two things here.

Either remove the size="20" from the searchbox <input> and change the width in CSS or you can increase the <input> size.

like this:

input {
    width: XXpx;
}

Upvotes: 1

Related Questions