Is it best to wrap forms inputs in divs:
<div id="formContainer">
<div>
<label for="username">Username</label><input type="text" id="username">
</div>
<div>
<label for="password">Password</label><input type="text" id="password">
</div>
</div>
Or is it better to wrap in ul or ol list with list-style-type set to none
<ol id="formContainer">
<li>
<label for="username">Username</label><input type="text" id="username">
</li>
<li>
<label for="password">Password</label><input type="text" id="password">
</li>
</ol>
Or does it matter at all?
I would opt with a definition list:
<dl>
<dt><label for='name'>blah</label></dt>
<dd><input type='text'></dd>
</dl>
I always use tables because that makes it so easy to align the fields.
Related
I need two horizontal checkboxes in one page:
<div data-role="content">
<div data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies">
<legend>Hobbies (separates by ',')</legend>
</fieldset>
</div>
<div id="language" data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Languages (ordered by native, second lang...)</legend>
<input id="eng" type="checkbox">
<label for="eng">English</label>
<input id="zho" type="checkbox">
<label for="zho">国语</label>
<input id="jpn" type="checkbox">
<label for="jpn">日本語</label>
</fieldset>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button" id="revert">Revert</a>
</div>
<div class="ui-block-b">
<input value="Update" type="submit">
</div>
</div>
</div>
One image is more than a thousand words. As you see, two checkboxes' totally messed up:
Old fashion table tag works!!!
I am trying to make dropdown login form in navigation bar using Bootstrap 3, but it does not look good - labels and inputs are wider than drop down ... panel.
How I can change drop down form width using col-* Bootstrap classes?
Here is the code (http://getbootstrap.com/css/#forms-horizontal):
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Sign in <b class="caret"></b>
<div class="dropdown-menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</li>
</ul>
Thanks in advance.
You could add padding to the .dropdown-menu and change your columns to col-lg-11
Example: http://bootply.com/110118
I'm dynamically creating forms that will have an unknown number of semantically-related text-fields that must share a row (in Foundation's sense of the word) and be distributed evenly within it. The blockgrid class seems the better option, but I can't get the pre and post fix classes to work within it.
Note: this isn't my actual code, but rather a generalized form of the problem to increase community utility
<ul class="large-block-grid-<? echo count($choices);?> row"> <!-- $choices = array of fields-->
<h6><span data-tooltip class="has-tip" title="">TooltipText</span></h6>
<li class="row collapse">
<div class="small-9 columns">
<label for="inputA">
<input type="text" id="inputA" name="inputA" placeholder="val" />
</label>
</div>
<div class="small-3 columns">
<span class="postfix radius">PostFix Label A</span>
</div>
</li>
<li class="row collapse">
<div class="small-9 columns">
<label for="inputB">
<input type="text" id="inputB" name="inputB" placeholder="val" />
</label>
</div>
<div class="small-3 columns">
<span class="postfix radius">PostFix Label B</span>
</div>
</li>
</ul>
I end up with postifixes that are taller than their corresponding fields and problems with the left margins/padding (see screen cap). Anyone?
Eventually, I figured out my issues. Description of solution first, then the (slightly) improved code below:
1) the <ul> element isn't a row in Zurb's sense, and applying the "row" class was buggering up the margins; it should have been in one.
2) left align was broken because block-grids should, it turns out, be nested inside the usual grid; adding a wrapping <div> with a n-column class fixed it.
3) can't wrap <input> in <label> tags if it is to be paired with a postfix (this is what causes the height problems on the postfix <span>; may just be that I can't have the field nested inside a block-level element at a different level than the <span> element it's paired with; I just deleted the <label> elements and was happy enough to have resolved the problem).
The code:
<!-- note that I've now wrapped everything in a column-classed div -->
<div class='large-12 columns'>
<ul class='large-block-grid-*'> <!-- * = php's count on an array of fields-->
<h6><span data-tooltip class='has-tip' title="">TooltipText</span></h6>
<li class='row collapse'>
<div class="small-9 columns">
<input type='text' id='inputA' name='inputA' placeholder='val' />
</div>
<div class="small-3 columns">
<span class='postfix radius'>PostFix Label A</span>
</div>
</li>
<li class='row collapse'>
<div class="small-9 columns">
<input type='text' id='inputB' name='inputB' placeholder='val' />
</div>
<div class="small-3 columns">
<span class='postfix radius'>PostFix Label B</span>
</div>
</li>
</ul>
</div>
I want to put 2 forms in a well one next to other. I use twitter-boostrap.
This is my code
<div class="well">
<h3>
Title
</h3>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="select01">Label1: </label>
<select class="input-mini" id="select01">
(my options)
</select>
</div>
<div class="control-group">
<label class="control-label" for="input01">Label2: </label>
<input class="input-mini" id="input01">
</div>
<div class="control-group">
<label class="control-label" for="select02">Label3: </label>
<select class="input-mini" id="select02">
(myoptions)
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input02">Label3: </label>
<input class="input-mini" id="input02">
</div>
<div class="control-group">
<label class="control-label" for="input03">Label4: </label>
<input class="input-mini" id="input03">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
If I include the forms in divs and add a style with float:left, then my well brake and put my forms out of it. I tried span, divs, form inside a form, but I cannot find a way to put one form next to other without break the well.
Try wrapping your forms in a div to isolate that content from the well:
http://jsfiddle.net/SAdM8/6
<div class="well">
<div style="overflow: hidden;">
... forms ...
</div>
</div>
Like Billy Moat said, you could simply add the overflow property to the well. I prefer to keep Bootstrap elements in their natural state to avoid inadvertent breakage. Either works.
this line:
<li><?php echo $form['genero']->renderLabel() ?></li>
is generating
<li>
<label for="usuario_genero">Genero</label>
<ul class="radio_list">
<li> <!-- this li doesn't have any id-->
<input type="radio" checked="checked" id="usuario_genero_0" value="0"
name="usuario[genero]"> <label for="usuario_genero_0">Chico</label>
</li>
<li> <!-- this li doesn't have any id-->
<input type="radio" id="usuario_genero_1" value="1"
name="usuario[genero]"> <label for="usuario_genero_1">Chica</label>
</li>
</ul>
</li>
I'd like to force the choices as inline, but the li's generated don't have the 'id' attribute.
What should i do?
Regards
Javi
In your CSS:
ul.radio_list li
{
display: inline;
}
Alternatively, you can create your own formatter for your radio widgets, or extend from the existing sfWidgetFormSelectRadio class and override the formatter() method to display the radio icons in the format you require.