Question

I am trying to make a search bar with a few feilds. Right now the code is as follows:

        <asp:DropDownList ID="DropDownList1" runat="server" Height="25px">
            <asp:ListItem>Database</asp:ListItem>
            <asp:ListItem>Engine</asp:ListItem>
            <asp:ListItem>Pool</asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" Text="Button" Height="25px" />
        <asp:TextBox ID="TextBox1" runat="server" Height="25px"></asp:TextBox>
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

Right now it looks like crap and doesnt flow at all, I was wondering how I would go about making a better visual looking search bar with all the required feilds. Thanks.

Example: digg.com has images in there search bar.

EDIT: Basically I want to code this image: http://o.imm.io/qlQ.png

Answer 1

The biggest lesson I’ve learned is if you have a small amount of space and some options the user has to choose (and understand) don’t use standard HTML controls. Design a real solution opposed to using the annoying HTML elements.

One main issues in building the search area is that the dropdownlist is not very style-able. Try building in the options that they can choose. You only have three options to pick from a radiobutton list would work better as the user would see all the options. You can then apply a filter onto the list and make it an image based toggle option list.

see the first example here for other options (Interface elements on demand) :
http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

_{(source: smashingmagazine.com)}