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

У меня есть три элемента управления в моей веб-форме из трех выпадающих списков.

Я хочу создать графический "ящик" вокруг этих элементов управления. Причина этого в том, что выбор этих элементов управления будет "ШАГОМ 1" моего процесса. Поэтому я хочу поставить окно вокруг этих элементов управления и называть его "Шаг 1"

Как мне сделать это с помощью CSS?

Пример:

box around form elements

Ответы

Ответ 1

A fieldset с legend обеспечивает визуальную и семантическую группировку для элементов управления формой. Затем вы можете создать стиль по своему желанию с помощью CSS. A fieldset несколько уникален тем, что legend способен визуально прерывать границу своего родителя fieldset (возможно с другими элементами, но сложно).

Пример: http://jsfiddle.net/NUMcr/1/

<fieldset>
<legend>Group 1</legend>
    <input type="text" />
    <asp:Textbox runat="Server" id="txt1" />
    <!-- etc -->
</fieldset>

fieldset {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;    
    border-radius: 4px;
}

legend {
    padding: 2px;    
}

Ответ 2

Существует HTML-элемент fieldset, который создан для этой конкретной цели: http://www.w3.org/wiki/HTML/Elements/fieldset. Если вы используете только CSS, вы можете сделать что-то вроде этого:

<html>
<head></head>
<body>

    <h1>Step 1</h1>
    <div style="border: 1px solid #000000;">
        <input type="text" />
        <input type="submit" value="Submit" />
    </div>

</body>
</html>

Затем вы можете создать стиль h1 (или любой тип HTML-элемента, который вы хотите использовать для заголовка), и div, содержащий элементы ввода.

Ответ 3

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>