Member Avatar for azapovjednik

Hello all,
I would like to make a simple search input field... something like google search on top of the screen when you sign into your gmail account.. you can see it hereClick Here

Because I had troubles trying to achieve it... I came up with a funny semi solution... you can see the code:
HTML
CSS

as you can see, I had to put two buttons after the input text... first one is to drop down the form for more advanced search... but... when I type in some text in input field and press enter... the drop form is shown instead of firing the second submit button...

is there any other way to accomplishing a similar search form?

Thank you in advance!

  • 2 Contributors
  • 1 Reply
  • 488 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Masterblank
Member Avatar for Masterblank

I made some changes in your code.

you must enclose all the input in only one <form> element.
I think this will work

    <div class="container">
        <div class="row">
            <form class="form-horizontal">   <!-- START FORM -->      
            <div id="pretraga_div" class="col-sm-3 col-md-3 pull-right">
               <div class="input-group glyph">
                 <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">

                 <div class="input-group-btn">
                      <button id="ikona" class="btn btn-default" onClick="return false;"><i class="glyphicon glyphicon-chevron-down"></i></button>
                      <button id="dugme" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i> Search</button>
                 </div>
               </div>
            </div>
            <div id="test" class="col-lg-5 col-sm-5 izleti_djavle">
                <span id="iksic" class="glyphicon glyphicon-remove"></span>
                    <fieldset>

                    <legend>Advanced search</legend>
                    <!-- Text input-->
                    <div class="control-group">
                      <label class="control-label" for="search_username">Username</label>
                      <div class="controls">
                        <input id="search_username" name="search_username" type="text" placeholder="username" class="input-medium">
                      </div>
                    </div>

                    <!-- Text input-->
                    <div class="control-group">
                      <label class="control-label" for="search_fname">First name</label>
                      <div class="controls">
                        <input id="search_fname" name="search_fname" type="text" placeholder="First name" class="input-medium">
                      </div>
                    </div>

                    <!-- Text input-->
                    <div class="control-group">
                      <label class="control-label" for="search_lname">Last name</label>
                      <div class="controls">
                        <input id="search_lname" name="search_lname" type="text" placeholder="Last name" class="input-medium">
                      </div>
                    </div>

                    <!-- Button -->
                    <div class="control-group">
                      <label class="control-label" for="search_button"></label>
                      <div class="controls">
                        <button id="search_button" name="search_button" class="btn btn-primary pull-right">Search</button>
                      </div>
                    </div>

                    </fieldset>
                </div>  <!-- END TEST DIV -->             
            </form> <!-- END FORM --> 

            <div class="col-lg-4 tekst" >
                <p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeca, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeca, vec se i vinuo u svijet elektronskog slovoslagarstva, ostajuci u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji takoder sadrži varijante Lorem Ipsum-a. </p>
                </div>
                        <div class="col-lg-4 tekst" >
                <p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeca, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeca, vec se i vinuo u svijet elektronskog slovoslagarstva, ostajuci u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji takoder sadrži varijante Lorem Ipsum-a.</p>
                </div>
                        <div class="col-lg-4 tekst" >
                <p>Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeca, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeca, vec se i vinuo u svijet elektronskog slovoslagarstva, ostajuci u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji takoder sadrži varijante Lorem Ipsum-a.</p>
                </div>

        </div> <!-- END ROW -->
    </div> <!-- CONTAINER END -->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.