The first item in the array ref is used for both id
and name
. Except...
%= formgroup 'Text test 1', text_field => ['test_text']
<div class="form-group"> <label class="control-label" for="test_text">Text test 1</label> <input class="form-control" id="test_text" name="test_text" type="text" /> </div>
%= formgroup 'Text test 2', text_field => ['test_text', size => 30]
<div class="form-group"> <label class="control-label" for="test_text">Text test 2</label> <input class="form-control" id="test_text" name="test_text" size="30" type="text" /> </div>
...if the input name (the first item in the text_field array ref) contains dashes -- those are replaced (in the name
) to underscores:
%= formgroup 'Text test 4', text_field => ['test-text', large]
<div class="form-group"> <label class="control-label" for="test-text">Text test 4</label> <input class="form-control input-lg" id="test-text" name="test_text" type="text" /> </div>
An input with a value:
%= formgroup 'Text test 5', text_field => ['test_text', '200' ]
<div class="form-group"> <label class="control-label" for="test_text">Text test 5</label> <input class="form-control" id="test_text" name="test_text" type="text" value="200" /> </div>
Note the difference with the earlier example. Here large
is outside the text_field
array reference, and therefore .form-group-lg
is applied to the form group:
<form class="form-horizontal"> %= formgroup 'Text test 6', text_field => ['test_text'], large, cols => { small => [2, 10] } </form>
<form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="control-label col-sm-2" for="test_text">Text test 6</label> <div class="col-sm-10"> <input class="form-control" id="test_text" name="test_text" type="text"> </div> </div> </form>
%= formgroup text_field => ['test_text', xsmall] => begin Text test 7 % end
<div class="form-group"> <label class="control-label" for="test_text"> Text test 7 </label> <input class="form-control input-xs" id="test_text" name="test_text" type="text" /> </div>
A formgroup used in a .form-horizontal
form
:(Note that in this context, medium
and large
are not shortcuts, but ordinary hash keys.)
%= formgroup 'Text test 8', text_field => ['test_text'], cols => { medium => [2, 10], small => [4, 8] }
<div class="form-group"> <label class="control-label col-md-2 col-sm-4" for="test_text">Text test 8</label> <div class="col-md-10 col-sm-8"> <input class="form-control" id="test_text" name="test_text" type="text" /> </div> </div>
%= formgroup text_field => ['test-text-9']
<div class="form-group"> <input class="form-control" id="test-text-9" name="test_text_9" type="text" /> </div>
%= formgroup 'Text test 9', text_area => ['atextarea', 'default text']
<div class="form-group"> <label class="control-label" for="atextarea">Text test 9</label> <textarea class="form-control" id="atextarea" name="atextarea">default text</textarea> </div>
Textareas can also be used in formgroups.