13 Replies Latest reply: May 12, 2009 7:12 AM by keramatali RSS

    How to insert search using form

    keramatali Community Member

      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

        • 1. Re: How to insert search using form
          Nancy O. MVP

          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/

          • 2. Re: How to insert search using form
            DwFAQ Community Member

            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.

            • 3. Re: How to insert search using form
              keramatali Community Member

              Hello

              Thank you so much for the info. yes you are correct.I just need to know how to have the search box and submit button placed on the same line. Is there any material you can suggest. I am still in early stage and working on my page in local host. Anyway I will probably be able to have it up by next week

               

              thank you so much for the hint. .

               

              also i am not sure zoom will work as the search I plan to have in my site will search the database

              • 4. Re: How to insert search using form
                Mark A. Boyd Community Member
                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' :-)

                • 5. Re: How to insert search using form
                  Nancy O. MVP

                  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/

                  • 6. Re: How to insert search using form
                    keramatali Community Member

                    Hello Thank you so much. Actually If I keep the text field and submit button in the center of the page it looks OK but if I try to shift them toward the right I see submit button moved to next line. here is the code: with submit and textfield in the middle but the but both are located in center but i would like it to be aligned toward right side. Also, How do I pass the value put in the text field as url parameter

                    <form action="searchresult.php?<?searchfor=php echo $row_mainpage['description']; ?>=" method="get" name="form1" target="_blank" id="form1">
                                <blockquote>
                                  <blockquote>
                                    <blockquote>
                                      <blockquote>
                                        <p>
                                          <input type="text" name="textfield" />
                                                  <input type="submit" name="Submit" value="Submit" />
                                        </p>
                                      </blockquote>
                                    </blockquote>
                                  </blockquote>
                                </blockquote>
                              </form>
                    
                    ==================================================
                    and here is the code when it is in my desired location but submit button 
                    moves to nextline
                    
                    
                    

                     

                    and here is the code when it is in my desired location but submit button moves to nextline

                     

                     

                    • 7. Re: How to insert search using form
                      Nancy O. MVP

                      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/

                      • 8. Re: How to insert search using form
                        keramatali Community Member

                        Dreamweaver put it when I do text indent to move the mouse in the desired location where i like ti insert the search and textfield

                         

                        Thanks

                        • 9. Re: How to insert search using form
                          Nancy O. MVP

                          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/

                          • 10. Re: How to insert search using form
                            DwFAQ Community Member

                            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.

                            • 11. Re: How to insert search using form
                              keramatali Community Member
                              Thank you so much!!!
                              1.I was able to get the search work.to work.the informatin you provided was great Only issue i have is is that once I search something in the search page I have to refresh it to do another search. how can i fix that. I choose _blank as target so that it opens in a new browser/tab
                              2. for postion issue I was not able to follow this : 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.
                              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. What is the best way to do it when I want to put an obeject in certan place in the page. (margin, blockquote)

                              • 12. Re: How to insert search using form
                                Nancy O. MVP
                                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/

                                • 13. Re: How to insert search using form
                                  keramatali Community Member
                                  This link does not work.
                                  Also, Can anyone suggest a way fix the problem of having to refresh the page after hitting the submit button for search. Other than this issue the search button i created based on your suggestion(create action + id) work perfectly
                                  thanks