html - attribute - tooltip input bootstrap

Bootstrap-Añadiendo leyenda al pozo

Question

Actualmente estoy usando Twitter Bootstrap, que funciona bien, pero me gustaría agregar una leyenda a los elementos de "pozo" que se usan en un formulario (para que pueda tener varios pozos, denotando subsecciones en un formulario).

Un ejemplo de cómo se ve mi formulario ahora es:

Me gustaría agregar una leyenda para poder tener dos secciones separadas debajo del encabezado "Detalles", por ejemplo, pero poder indicar para qué sirven. Una leyenda parece ser la mejor manera de hacer esto.

La sección relevante del html se ve así:

<form>
   <div class="row">
        <div class="span6">
        <div class="nonboxy-widget">
            <div class="widget-head">
                <h5>Details</h5>
            </div>
            <div class="widget-content">
                 <div class="widget-box">
                    <div class = ''form-horizontal well''>
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label">Sale Type</label>
                                <div class="controls">

Cuando intento agregar una etiqueta de leyenda al fieldset o al div con clase form-horizontal well se representa como un encabezado dentro del cuadro, no como una leyenda html normal. Se rinde como:

con el codigo

<div class = ''form-horizontal well''>
  <fieldset>
    <legend>Details</legend>
    <div class="control-group">

¿Alguien puede recomendar una forma de hacer que se muestre como una leyenda normal, en el borde de la caja?

EDIT: Gracias al código de Simbirsk, ahora tengo:

Esto está bastante cerca, pero lo que quería era que la leyenda pareciera una leyenda html normal en un fieldset (es decir, para que se encuentre en el borde), así que cambié el CSS a:

legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}

pero eso resultó en esto:

¿Cómo puedo asegurarme de que el borde del pozo se "rompe" (no se muestra detrás del texto) como una leyenda de conjunto de campo normal?

EDIT 2: Después de editar la primera respuesta, apliqué el código a mi css y terminé con:

Notará que esto no es exactamente lo que estaba buscando; estoy tratando de poner la leyenda en el borde del pozo div, no en el conjunto de campo en sí mismo (debido a que esta es una forma anidada, podría haber varios conjuntos de campos dentro de un pozo, así que no puedo poner el borde en el fieldset en sí).

Parecía haber logrado esto con el código anterior, el único problema era poner una ruptura en el borde donde se encuentra la leyenda. ¿Se puede hacer esto con algún tipo de opacidad en el fondo del texto de la leyenda y un poco de relleno?

¿Alguna otra sugerencia?

¡Gracias!

Answer 1

Coloque el .well en el fieldset y anule la legend y los estilos de campo de fieldset .
HTML

<form>
    <fieldset class="well the-fieldset">
        <legend class="the-legend">Your legend</legend>
        ... your inputs ...
    </fieldset>
</form>

CSS

.the-legend {
    border-style: none;
    border-width: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
}
.the-fieldset {
    border: 2px groove threedface #444;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

NOTA: He enviado clases de Bootstrap como filas, tramos, controles, etc. Úsalos para que se ajusten a tu diseño.
EDITAR: Se cambió el código para incluir los estilos de conjunto de campo "restablecer".

Answer 2

Esto me funcionó en lo que estaba tratando de lograr como caja de grupo en Bootstrap.

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-legend {
  display: block;
  font-size: 14px;
  width: auto;
  padding: 2px 7px 2px 5px;
  margin-bottom: 20px;
  line-height: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

<form>
  <fieldset class="well">
    <legend class="well-legend">Group Box Legend</legend>
    ... your inputs ...
  </fieldset>
</form>