Skip navigation
keramatali
Currently Being Moderated

How to insert search using form

May 7, 2009 4:44 PM

Hello

I am trying to use form to insert a search option in my home page. I inserted text field and a submit button in the form and when a user submit it a query will be done [in mysql database]  to find the entry that contain the word user put in the text box and result will be shown in  result page.

 

I can't really figure out how can I have the text box and submit button(which i will chaneg to search or something else) alligned next to each other. I only was able to create a form where submit button gets created below the text box. Also I was unable to place/move the form(text box and submit button) in desired location. I am using dreamweaver 8, PHP to bring the data and mysql database

 

Thanks

 
Replies
  • Currently Being Moderated
    May 7, 2009 4:57 PM   in reply to keramatali

    You can do this with your favorite server-side programming language (php, asp, ColdFusion, etc...)  or you can look at a boxed solution that may save you considerable time and effort.  Have a look at ZOOM search tool from Wrensoft.

    http://www.wrensoft.com/zoom/

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    -------------------------
    HTML Validator -
    http://validator.w3.org
    CSS Validator -
    http://jigsaw.w3.org/css-validator/
    FREE HTML, CSS & PHP Tutorials  - http://w3schools.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2009 6:20 PM   in reply to keramatali

    Heya,

     

    My understanding is you already have the search form functioning and you want to style the form to fit text field and submit button on one line. You can style the form by using CSS can't offer much more than that without link to page as reference.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2009 8:26 AM   in reply to keramatali
    I just need to know how to have the search box and submit button placed on the same line.

     

    This should be very easy. We can't tell what is wrong with your code without seeing it. Can you post a URL to the online page?

     

    Or, at the very least, you could post a snippet of the code in here. If you do that, please follow the directions from the FAQ, Posting code in this forum

     

    --
    Mark A. Boyd
    Keep-On-Learnin' :-)

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2009 11:09 AM   in reply to keramatali

    Here is basic HTML search form:

     

     

    <div class="searchform">
    <form action="example.php" method="get">
    <input type="text" class="searchbox" alt="Search" name="query" />
    <input type="submit" value="Search" class="searchbutton" />
    </form>
    </div><!--End Searchform -->

     

    And some CSS:

    .searchform {margin-left:75%; margin-top: 10px; width: 400px;}
    

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2009 12:54 PM   in reply to keramatali

    What the heck are all those blockquotes for!? 

     

    Tutorials  - http://w3schools.com/

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2009 1:54 PM   in reply to keramatali

    Text indent (Tab Key) is NOT a page layout device.  Neither is the spacebar.  You really need to get up to speed on CSS positioning or use a Table-based layout.

     

     

     

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/


    http://w3schools.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2009 6:02 PM   in reply to keramatali

    Pass value in form field as URL parameter by changing form method to 'GET'

     

    Add an id to for input text field combined with method 'GET' you'll have URL parameter form action + text field id as URL parameter. So if text field ID is search and form method is get with action to search.php if you enter 'something' into search field and submit it will pass URL parameter to search.php like this search.php?search=something

     

    A link posted to w3schools.com is useful; one person posting it 4 times in one thread may be redundant and it's only useful if you really know what to look for. For your form you can change your code to something like this adding style float right or text-align right or margin-left to move form to right side. You may have to clear the float if you use float. Change your search form to something like this:

     

     

    <form style="margin-left:200px" action="searchresult.php" method="get" name="form1" id="form1">
    <input style="width:20px" type="text" id="description" name="description" />
    <input style="border:solid 2px #000000; padding:3px 10px" type="submit" value="Search" />
    </form>

     

     

     

    Change text input width to fit text input field in div column it may be forcing the submit button to the next line because there's not enough room for the width of the text field and the submit button. If you make the text field shorter in width it may leave room for the submit button to remain on the same line as the text field.

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2009 10:54 AM   in reply to keramatali
    I have this alligment issue almost every object I place. for example I like to have a text place right next to an image. I can do it but for some reason i can't have the text right next to the image on the top.  i am having to put in secodn or thir line from the top of the image.

     

    Read this tutorial on floated images:

    http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

     

    What is the best way to do it when I want to put an obeject in certan place in the page. (margin, blockquote)

     

    Start with a multi-column CSS grid or Table

     

    As I stated earlier in this thread, you cannot use blockquotes (indent) or spacebar key to position objects on a page. It doesn't work.

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points