Создание визуально плавной панели поиска, ASP.NET C #

Question

Я пытаюсь создать панель поиска с несколькими полями. Сейчас код выглядит следующим образом:

        <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>

Сейчас это выглядит как дерьмо и совсем не течет, мне было интересно, как бы я сделал лучшую визуально выглядящую панель поиска со всеми необходимыми функциями. Спасибо.

Пример: на digg.com есть изображения в строке поиска.

РЕДАКТИРОВАТЬ: В основном я хочу закодировать это изображение: http://o.imm.io/qlQ.png

Answer 1

Самый большой урок, который я усвоил, - это если у вас мало места и некоторые опции, которые пользователь должен выбрать ( и понимают ), не используют стандартные элементы управления HTML. Разработайте реальное решение, которое не будет использовать раздражающие элементы HTML.

Одной из основных проблем при создании области поиска является то, что выпадающий список не очень подходит для стиля. Попробуйте создать варианты, которые они могут выбрать. У вас есть только три варианта выбора из списка радиокнопок, которые будут работать лучше, так как пользователь увидит все варианты. Затем вы можете применить фильтр к списку и сделать его списком переключателей на основе изображений.

см. Первый пример здесь для других опций (элементы интерфейса по запросу): http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

альтернативный текст http://media.smashingmagazine.com/cdn_smash/images/web-applications-interface-techniques/kontain_search.png