Grow your CSS skills. Land your dream job.

Building a search form

  • # March 13, 2013 at 7:23 pm

    I’m know how to navigate code, and once I learn how to code something I remember it forever. That being said I have never built a search form before with this functionality and I was wondering if someone here could lead me in the right direction with how to get started.

    User chooses at least one option for any field. So he could choose to search for just Option 1 and not use option 2 / 3. Or he can select Option 1 , 2 and 3.

    (brackets indicate an option the user choose)

    Option 1 Dropdown
    - [test]
    - test2
    - test3

    Option 2 Dropdown
    - test
    - [test2]
    - test3

    Option 3 Dropdown
    - test
    - test2
    - [test3]

    Option 4 Dropdown
    - test
    - test2
    - test3

    user hits submit button and the following page loads:

    yoursite.com/?option1=test&option2=test2&option3=test3

    The user didn’t select anything for option 4 , thus it doesn’t appear in the url.

    # March 13, 2013 at 7:28 pm

    In trying to google for answer, I keep searching ‘build web form’ and everything coming back thus far is about building comment forms, or email collection forms. That’s not entirely what I’m doing here. If someone can give me a phrase of what I’m trying to do that would help me find a better google result that would be appreciated too :)

    # March 13, 2013 at 7:34 pm

    [My test codepen](http://codepen.io/joebrooks/pen/tHuBG)

    # March 13, 2013 at 11:53 pm

    If I’m not over simplifying what you’re trying to do, I believe you are looking to pass the search criteria via Query Strings in the URL. If that’s what you’re after, you’ll just have to create a separate file or section within the page that does the processing and have that as your action on the form submission.

    # March 14, 2013 at 12:12 am

    I found some code to do what I want :D








Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".