twitter-bootstrap - template - formulario bootstrap ejemplo
Bootstrap 3 selecciona formulario de entrada en línea (9)
Así es como lo hice sin css o jquery extra:
<div class="form-group">
<div class="input-group">
<label class="sr-only" for="extra3">Extra name 3</label>
<input type="text" id="extra3" class="form-control" placeholder="Extra name">
<span class="input-group-addon">
<label class="checkbox-inline">
Mandatory? <input type="checkbox" id="inlineCheckbox5" value="option1">
</label>
</span>
<span class="input-group-addon">
<label class="checkbox-inline">
Per person? <input type="checkbox" id="inlineCheckbox6" value="option2">
</label>
</span>
<span class="input-group-addon">
To be paid?
<select>
<option value="online">Online</option>
<option value="on spot">On Spot</option>
</select>
</span>
</div>
</div>
Estoy tratando de obtener entrada y seleccionar la opción en línea adjunta entre sí como esta demostración usando Bootstrap 2 .
Siguiendo las pautas de Bootstrap 3, logro hacer esto:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="form-group col-sm-5">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
</div>
<div class="form-group col-sm-3">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Es sensible, pero la entrada y la selección no se pueden adjuntar sin algunos hacks de css desagradables. Encontré muchos ejemplos con botones adjuntos, pero eso no funciona con el elemento seleccionado.
Creo que accidentalmente encontré una solución. Lo único que se debe hacer es insertar un <span class="input-group-addon"></span> vacío entre la <input> y la <select> .
Además, puedes hacerlo "invisible" reduciendo su ancho, relleno horizontal y bordes:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-addon" title="* Price" id="priceLabel">Price</span>
<input type="number" id="searchbygenerals_priceFrom" name="searchbygenerals[priceFrom]" required="required" class="form-control" value="0">
<span class="input-group-addon">-</span>
<input type="number" id="searchbygenerals_priceTo" name="searchbygenerals[priceTo]" required="required" class="form-control" value="0">
<!-- insert this line -->
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<select id="searchbygenerals_currency" name="searchbygenerals[currency]" class="form-control">
<option value="1">HUF</option>
<option value="2">EUR</option>
</select>
</div>
Probado en Chrome y Firefox.
En función de la respuesta de spacebean, esta modificación también cambia el texto que se muestra cuando el usuario selecciona un elemento diferente (como haría un <select> ):
http://www.bootply.com/VxVlaebtnL
HTML:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="mydropdowndisplay">Choice 1</span> <span class="caret"></span></button>
<ul class="dropdown-menu" id="mydropdownmenu">
<li><a href="#">Choice 1</a></li>
<li><a href="#">Choice 2</a></li>
<li><a href="#">Choice 3</a></li>
</ul>
<input type="hidden" id="mydropwodninput" name="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Jquery:
$(''#mydropdownmenu > li'').click(function(e){
e.preventDefault();
var selected = $(this).text();
$(''#mydropwodninput'').val(selected);
$(''#mydropdowndisplay'').text(selected);
});
Gracias a G_money y otras sugerencias para esta excelente solución de entrada de texto con menú desplegable en línea ... aquí hay otra gran solución.
<form class="form-inline" role="form" id="yourformID-form" action="" method="post">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-male"></i></span>
<div class="form-group">
<input size="50" maxlength="50" class="form-control" name="q" type="text">
</div>
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
</form>
Esto funciona con Bootstrap 3: permite el ingreso de texto en línea con un menú desplegable de selección. Esto es lo que parece a continuación ...
No puedo hacer que funcione sin hacks tampoco, entonces lo que hice fue simplemente usar el menú desplegable en lugar de un cuadro de selección y enviar la información a través de un campo oculto, como eso (usando tu código):
Jquery:
$(''.dropdown-menu li'').click(function(e){
e.preventDefault();
var selected = $(this).text();
$(''.category'').val(selected);
});
HTML:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<input type="hidden" name="category" class="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
No estoy seguro si eso funcionará para lo que quiere, pero es una opción para usted.
Otra respuesta diferente a una vieja pregunta. Sin embargo, encontré una implementación hecha específicamente para bootstrap que podría ser útil aquí. Espero que esto ayude a cualquiera que esté buscando ...
Requiere una adición menor de CSS para que funcione con Bootstrap 3:
.input-group-btn:last-child > .form-control {
margin-left: -1px;
width: auto;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
<div class="input-group">
<input class="form-control" name="q" type="text" placeholder="Search">
<div class="input-group-btn">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
Sé que esto es un poco viejo, pero tuve el mismo problema y mi búsqueda me trajo aquí. Quería dos elementos seleccionados y un botón todo en línea, que funcionaba en 2 pero no en 3. Terminé envolviendo los tres elementos en <form class="form-inline">...</form> . Esto realmente funcionó perfectamente para mí.
Se puede hacer con el código puro de Bootstrap.
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="form-group">
<label for="id" class="col-md-2 control-label">ID</label>
<div class="input-group">
<span class="input-group-btn">
<select class="form-control" name="id" id="id">
<option value="">
</select>
</span>
<span class="input-group-btn">
<select class="form-control" name="nr" id="nr">
<option value="">
</select>
</span>
</div>
</div>