Adds proper form wrapping and many missing attributes from form controls

templates/handlebars/bootstrap/button.hbs

@@ -0,0 +1,7 @@
+<div class="form-group">
+	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myButton{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+	<div class="{{#if buttonalign}}{{buttonalign}}{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
+		<{{#if isinput}}input{{else}}{{#if islink}}a{{else}}button{{/if}}{{/if}} {{#unless islink}}type="{{#if type}}{{type}}{{else}}button{{/if}}"{{else}}role="button"{{/unless}} id="{{#if id}}{{id}}{{else}}myButton{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myButton{{/if}}{{/if}}" class='btn{{#if buttonstyle}} {{buttonstyle}}{{else}} btn-default{{/if}}{{#if inputsize}} {{inputsize}}{{/if}}'{{#if disabled}} disabled{{/if}} aria-label="{{#if label}}{{label}}{{/if}}" {{#if isinput}}value="{{text}}"{{/if}}>{{#unless isinput}}{{text}}{{/unless}}</{{#if isinput}}input{{else}}{{#if islink}}a{{else}}button{{/if}}{{/if}}>
+		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	</div>
+</div>

templates/handlebars/bootstrap/input.hbs

@@ -0,0 +1,31 @@
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}">
+	{{#if label}}<label for="{{#if id}}{{id}}{{else}}myInput{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{label}}</label>{{/if}}
+	{{#if horizontal}}<div class="col-sm-10">{{/if}}
+		{{#if hasAside}}<div class="input-group">{{/if}}
+			{{#if prependText}}<span id="{{#if id}}{{id}}{{else}}myInput{{/if}}Prepend" class="input-group-addon{{#if horizontal}}{{#if inputsize}} input-{{inputsize}}{{/if}}{{/if}}">{{prependText}}</span>{{/if}}
+			{{#with prependCheckbox}}<label class="input-group-addon checkbox-custom" data-initialize="checkbox">
+				<input class="sr-only" type="checkbox" aria-label="{{#if aria}}{{aria}}{{else}}{{value}}{{/if}}" {{#if checked}}checked="checked"{{/if}} id="{{#if ../id}}{{../id}}{{else}}myInput{{/if}}Checkbox" name="{{#if ../name}}{{../name}}{{else}}{{#if ../id}}{{../id}}{{else}}myInput{{/if}}{{/if}}Checkbox" value="{{value}}"{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+			</label>{{/with}}
+			{{#with prependButtonDropdown}}
+			<div class="input-group-btn">
+				<button type="button" class="btn dropdown-toggle{{#if ../inputsize}} btn-{{../inputsize}}{{/if}}{{#if style}} {{style}}{{/if}}" data-toggle="dropdown"{{#if ../label}} aria-label="{{../label}} related options"{{/if}} aria-haspopup="true" aria-expanded="false"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{text}}&nbsp;<span class="caret"></span></button>
+				<ul class="dropdown-menu">{{#each options}}
+					{{#if separator}}<li role="separator" class="divider"></li>{{else}}<li><a href="#">{{value}}</a></li>{{/if}}{{/each}}
+				</ul>
+			</div>{{/with}}
+			<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myInput{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myInput{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+			{{#with appendButtonDropdown}}
+			<div class="input-group-btn">
+				<button type="button" class="btn dropdown-toggle{{#if ../inputsize}} btn-{{../inputsize}}{{/if}}{{#if style}} {{style}}{{/if}}" data-toggle="dropdown"{{#if ../label}} aria-label="{{../label}} related options"{{/if}} aria-haspopup="true" aria-expanded="false"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{text}}&nbsp;<span class="caret"></span></button>
+				<ul class="dropdown-menu dropdown-menu-right">{{#each options}}
+					{{#if separator}}<li role="separator" class="divider"></li>{{else}}<li><a href="#">{{value}}</a></li>{{/if}}{{/each}}
+				</ul>
+			</div>{{/with}}
+			{{#with appendCheckbox}}<label class="input-group-addon checkbox-custom" data-initialize="checkbox">
+				<input class="sr-only" type="checkbox" aria-label="{{#if checkboxAria}}{{checkboxAria}}{{else}}{{value}}{{/if}}" {{#if checked}}checked="checked"{{/if}} id="{{#if ../id}}{{../id}}{{else}}myInput{{/if}}Checkbox" name="{{#if ../name}}{{../name}}{{else}}{{#if ../id}}{{../id}}{{else}}myInput{{/if}}{{/if}}Checkbox" value="{{value}}"{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+			</label>{{/with}}
+			{{#if appendText}}<span id="{{#if id}}{{id}}{{else}}myInput{{/if}}Prepend" class="input-group-addon{{#if horizontal}}{{#if inputsize}} input-{{inputsize}}{{/if}}{{/if}}">{{appendText}}</span>{{/if}}
+		{{#if hasAside}}</div>{{/if}}
+		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	{{#if horizontal}}</div>{{/if}}
+</div>

templates/handlebars/bootstrap/textarea.hbs

@@ -0,0 +1,7 @@
+<div class="form-group">
+	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myTextarea{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+	{{#if horizontal}}<div class="col-sm-10">{{/if}}
+		<textarea class="form-control" id="{{#if id}}{{id}}{{else}}myTextarea{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myTextarea{{/if}}{{/if}}" rows="{{#if rows}}{{rows}}{{/if}}"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{#if text}}{{text}}{{/if}}</textarea>
+		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	{{#if horizontal}}</div>{{/if}}
+</div>

templates/handlebars/fuelux/checkbox.hbs

@@ -1,6 +1,15 @@
-{{#unless inline}}<div class="checkbox{{#if highlight}} highlight{{/if}}">{{/unless}}
-	<label class="checkbox-custom{{#if inline}} checkbox-inline{{/if}}{{#if highlight}} highlight{{/if}}"{{#unless doNotInit}} data-initialize="checkbox"{{/unless}} id="{{#if id}}{{id}}{{else}}myCustomCheckbox{{/if}}">
-		<input class="sr-only" type="checkbox" {{#if data-toggle}}data-toggle="{{data-toggle}}" {{/if}}{{#if checked}}checked="checked" {{/if}}{{#if disabled}}disabled="disabled" {{/if}}value="" name="{{#if name}}{{name}}{{else}}myCustomCheckboxName{{/if}}">
-		<span class="checkbox-label">{{#if label}}{{label}}{{else}}Checkbox Label{{/if}}</span>
-	</label>
-{{#unless inline}}</div>{{/unless}}
+<div class="form-group">
+	<label for="{{#if id}}{{id}}{{else}}myCustomCheckboxWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+
+	<div class="{{#if inline}}checkbox{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
+		{{#each checkboxes}}
+		{{#unless ../inline}}<div class="checkbox{{#if ../highlight}} highlight{{/if}}">{{/unless}}
+			<label class="checkbox-custom{{#if ../inline}} checkbox-inline{{/if}}{{#if ../highlight}} highlight{{/if}}"{{#unless ../doNotInit}} data-initialize="checkbox"{{/unless}} id="{{#if id}}{{id}}{{else}}{{#if ../id}}{{../id}}{{else}}myCustomCheckbox{{/if}}{{@index}}{{/if}}">
+				<input class="sr-only" type="checkbox" {{#if data-toggle}}data-toggle="{{data-toggle}}" {{/if}}{{#if checked}}checked="checked" {{/if}}{{#if disabled}}disabled="disabled" {{/if}}{{#if value}}value="{{value}}" {{/if}}name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}{{#if ../id}}{{../id}}{{else}}myCustomCheckbox{{/if}}{{/if}}{{@index}}{{/if}}">
+				<span class="checkbox-label">{{#if label}}{{label}}{{else}}Checkbox {{@index}} Label{{/if}}</span>
+			</label>
+		{{#unless ../inline}}</div>{{/unless}}
+		{{/each}}
+		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	</div>
+</div>

templates/handlebars/fuelux/combobox.hbs

@@ -1,11 +1,19 @@
-<div class="input-group input-append dropdown combobox{{#if cols}} col-sm-{{cols}}{{/if}}" {{#unless doNotInit}}data-initialize="combobox"{{/unless}} id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}">
-	<input type="text" class="form-control">
-	<div class="input-group-btn">
-		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-		<ul class="dropdown-menu dropdown-menu-right" role="menu">
-			{{#each options}}
-			<li data-value="{{value}}"{{#each data}} data-{{name}}="{{value}}"{{/each}}><a href="#">{{text}}</a></li>
-			{{/each}}
-		</ul>
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}">
+	<label for="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+
+	{{#if horizontal}}<div class="col-sm-10">{{/if}}
+	<div class="input-group dropdown combobox{{#if prependCombobox}} input-append{{else}} input-prepend{{/if}}{{#if inputsize}} input-group-{{inputsize}}{{/if}}" {{#unless doNotInit}}data-initialize="combobox"{{/unless}} id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}">
+		{{#unless prependCombobox}}<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myCombobox{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/unless}}
+		<div class="input-group-btn">
+			<button type="button" class="btn {{#if buttonstyle}}{{buttonstyle}}{{else}}btn-default{{/if}} dropdown-toggle{{#if inputsize}} btn-{{inputsize}}{{/if}}" data-toggle="dropdown"><span class="caret"></span></button>
+			<ul class="dropdown-menu{{#unless prependCombobox}} dropdown-menu-right{{/unless}}" role="menu">
+				{{#each options}}
+				<li data-value="{{value}}"{{#each data}} data-{{name}}="{{value}}"{{/each}}><a href="#">{{text}}</a></li>
+				{{/each}}
+			</ul>
+		</div>
+		{{#if prependCombobox}}<input type="{{#if type}}{{type}}{{else}}text{{/if}}" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myCombobox{{/if}}{{/if}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/if}}
 	</div>
+	{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	{{#if horizontal}}</div>{{/if}}
 </div>

templates/handlebars/fuelux/datepicker.hbs

@@ -1,6 +1,6 @@
 <div class="datepicker" {{#unless doNotInit}}data-initialize="datepicker"{{/unless}} id="{{#if id}}{{id}}{{else}}myDatepicker{{/if}}">
 	<div class="input-group">
-		<input class="form-control" id="{{#if id}}{{id}}{{else}}myDatepicker{{/if}}Input" type="text"/>
+		<input class="form-control" id="{{#if id}}{{id}}Input{{else}}myDatepickerInput{{/if}}" name="{{#if name}}{{name}}{{#if id}}{{id}}Input{{else}}myDatepickerInput{{/if}}{{/if}}" type="text"/>
 		<div class="input-group-btn">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				<span class="glyphicon glyphicon-calendar"></span>

templates/handlebars/fuelux/placard.hbs

@@ -7,9 +7,9 @@
 {{#if div}}
 	<div class="form-control placard-field{{#if glass}} glass{{/if}}"{{#if textarea}} data-textarea="true"{{/if}} contenteditable="true">{{#if placeholder}}{{placeholder}}{{/if}}</div>
 {{else if textarea}}
-	<textarea class="form-control placard-field{{#if glass}} glass{{/if}}">{{#if placeholder}}{{placeholder}}{{/if}}</textarea>
+	<textarea class="form-control placard-field{{#if glass}} glass{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myPlacard{{/if}}{{/if}}>{{#if placeholder}}{{placeholder}}{{/if}}</textarea>
 {{else}}
-	<input class="form-control placard-field{{#if glass}} glass{{/if}}" type="text"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}/>
+	<input class="form-control placard-field{{#if glass}} glass{{/if}}" type="text"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}} name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myPlacard{{/if}}{{/if}}/>
 {{/if}}
 {{#if footer}}
 	<div class="placard-footer">

templates/handlebars/fuelux/radio.hbs

@@ -1,6 +1,15 @@
-{{#unless inline}}<div class="radio{{#if highlight}} highlight{{/if}}">{{/unless}}
-	<label class="radio-custom{{#if inline}} radio-inline{{/if}}{{#if highlight}} highlight{{/if}}"{{#unless doNotInit}} data-initialize="radio"{{/unless}} id="{{#if id}}{{id}}{{else}}myCustomRadio{{/if}}">
-		<input class="sr-only" type="radio" {{#if data-toggle}}data-toggle="{{data-toggle}}" {{/if}}{{#if checked}}checked="checked" {{/if}}{{#if disabled}}disabled="disabled" {{/if}}value="" name="{{#if name}}{{name}}{{else}}myCustomRadioName{{/if}}">
-		<span class="radio-label">{{#if label}}{{label}}{{else}}Radio Label{{/if}}</span>
-	</label>
-{{#unless inline}}</div>{{/unless}}
+<div class="form-group">
+	<label for="{{#if id}}{{id}}{{else}}myCustomRadioWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+
+	<div class="{{#if inline}}radio{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
+		{{#each radios}}
+		{{#unless ../inline}}<div class="radio{{#if ../highlight}} highlight{{/if}}">{{/unless}}
+			<label class="radio-custom{{#if ../inline}} radio-inline{{/if}}{{#if ../highlight}} highlight{{/if}}"{{#unless ../doNotInit}} data-initialize="radio"{{/unless}} id="{{#if id}}{{id}}{{else}}{{#if ../id}}{{../id}}{{else}}myCustomRadio{{/if}}{{@index}}{{/if}}">
+				<input class="sr-only" type="radio" {{#if data-toggle}}data-toggle="{{data-toggle}}" {{/if}}{{#if checked}}checked="checked" {{/if}}{{#if disabled}}disabled="disabled" {{/if}}{{#if value}}value="{{value}}" {{/if}}name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}{{#if ../id}}{{../id}}{{else}}myCustomRadio{{/if}}{{/if}}{{/if}}">
+				<span class="radio-label">{{#if label}}{{label}}{{else}}Radio {{@index}} Label{{/if}}</span>
+			</label>
+		{{#unless ../inline}}</div>{{/unless}}
+		{{/each}}
+		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	</div>
+</div>

templates/handlebars/fuelux/search.hbs

@@ -1,9 +1,17 @@
-<div class="search input-group" {{#unless doNotInit}}data-initialize="search"{{/unless}} role="search" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}">
-	<input type="search" class="form-control" placeholder="Search"/>
-	<span class="input-group-btn">
-		<button class="btn btn-default" type="button">
-			<span class="glyphicon glyphicon-search"></span>
-			<span class="sr-only">Search</span>
-		</button>
-	</span>
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}">
+	<label for="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+
+	{{#if horizontal}}<div class="col-sm-10">{{/if}}
+	<div class="search input-group{{#if inputsize}} input-group-{{inputsize}}{{/if}}" {{#unless doNotInit}}data-initialize="search"{{/unless}} role="search" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}">
+		{{#unless prependSearch}}<input type="search" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySearch{{/if}}{{/if}}Input"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/unless}}
+		<span class="input-group-btn">
+			<button class="btn btn-default{{#if inputsize}} btn-{{inputsize}}{{/if}}" type="button"{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+				<span class="glyphicon glyphicon-search"></span>
+				<span class="sr-only">Search</span>
+			</button>
+		</span>
+		{{#if prependSearch}}<input type="search" class="{{#unless horizontal}}{{#if inputsize}}input-{{inputsize}} {{/if}}{{/unless}}form-control" id="{{#if id}}{{id}}{{else}}mySearch{{/if}}Input" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySearch{{/if}}{{/if}}Input"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{/if}}
+	</div>
+	{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	{{#if horizontal}}</div>{{/if}}
 </div>

templates/handlebars/fuelux/selectlist.hbs

@@ -1,13 +1,19 @@
-<div class="btn-group selectlist" {{#unless doNotInit}}data-initialize="selectlist"{{/unless}} data-resize="auto" id="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">
-	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-		<span class="selected-label">&nbsp;</span>
-		<span class="caret"></span>
-		<span class="sr-only">Toggle Dropdown</span>
-	</button>
-	<ul class="dropdown-menu" role="menu">
-		{{#each options}}
-		<li data-value="{{value}}" {{#each data}}data-{{name}}="{{value}}" {{/each}}><a href="#">{{text}}</a></li>
-		{{/each}}
-	</ul>
-	<input class="hidden hidden-field" name="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}" readonly="readonly" aria-hidden="true" type="text"/>
+<div class="form-group">
+	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">{{#if label}}{{label}}{{/if}}</label>
+	<div class="controls text-{{#if buttonalign}}{{buttonalign}}{{else}}left{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
+		<div class="btn-group selectlist"{{#unless doNotInit}} data-initialize="selectlist"{{/unless}} data-resize="auto" id="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">
+			<button class="btn {{#if buttonstyle}}{{buttonstyle}}{{else}}btn-default{{/if}} dropdown-toggle{{#if inputsize}} {{inputsize}}{{/if}}" data-toggle="dropdown" type="button"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>
+				<span class="selected-label">&nbsp;</span>
+				<span class="caret"></span>
+				<span class="sr-only">Toggle Dropdown</span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				{{#each options}}
+				<li data-value="{{value}}" {{#each data}}data-{{name}}="{{value}}" {{/each}}><a href="#">{{text}}</a></li>
+				{{/each}}
+			</ul>
+			<input class="hidden hidden-field" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}mySelectlist{{/if}}{{/if}}" readonly="readonly" aria-hidden="true" type="text"/>
+		</div>
+		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
+	</div>
 </div>