Please wait...

Try Bacotna with other template and color skins
Index variants
Color options

Components form

  1. Home
  2. Components
  3. Form
Form control

<!-- Input -->
<input type="text" class="form-control" placeholder="Text input" />

<!-- Select default -->
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
  <option value="v1">Select options</option>
  <option value="v2">Option 1</option>
  <option value="v2">Option 2</option>
  <optgroup label="Option heading">
    <option value="v25">Option 3</option>
    <option value="v26">Option 4</option>
  </optgroup>
  <option value="v2">Option 5</option>
  <option value="v2">Option 6</option>
</select>

<!-- Multi select -->
<select class="multitest" size="7" multiple>
  <optgroup label="Multiple select test">
    <option>Option 1</option>
    <option>Option 2</option>
  </optgroup>
  <optgroup label="heading group">
    <option>Option 3</option>
    <option>Option 4</option>
     <option>Option 5</option>
     <option>Option 6</option>
  </optgroup>
  <option>Option 7</option>
  <option>Option 8</option>
</select>

<!-- Textarea -->
<textarea class="form-control" rows="3" placeholder="Textarea input"></textarea>

<!-- Input file default -->
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-default" data-multiple-caption="{count} files selected" multiple />
<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Input a file default</span></label>

<!-- Input file icon -->
<input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-icon" data-multiple-caption="{count} files selected" multiple />
<label for="file-5"><figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></figure> <span>Choose a file…</span></label>

<!-- Checkbox -->
<div class="checkbox">
	<label>
		<input type="checkbox" value="check1">
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="checkbox disabled">
	<label>
		<input type="checkbox" value="" disabled>
		Option two is disabled
	</label>
</div>

<!-- Radio -->
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
		Option two can be something else and selecting it will deselect option one
	</label>
</div>
<div class="radio disabled">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
		Option three is disabled
	</label>
</div>
Basic form

JPEG or PNG images only, size 200x200

<form>
	<div class="form-group">
		<label>Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" />
	</div>
	<div class="form-group">
		<label>Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
	</div>
	<div class="form-group">
		<label>File input</label>
		<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-default" data-multiple-caption="{count} files selected" multiple />
		<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Input a file default</span></label>
		<p class="help-block">JPEG or PNG images only, size 200x200</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form height sizing

<input type="text" class="form-control input-lg" placeholder="Large size" />
<input type="text" class="form-control" placeholder="Default size" />
<input type="text" class="form-control input-sm" placeholder="Small size" />
<input type="text" class="form-control input-xs" placeholder="Extra small size" />
Inline form
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="exampleInputEmail3">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
	</div>
	<div class="form-group">
		<label class="sr-only" for="exampleInputPassword3">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Remember me
		</label>
	</div>
	<button type="submit" class="btn btn-primary">Sign in</button>
</form>

<form class="form-inline">
	<div class="form-group">
		<label for="exampleInputName2">Name</label>
		<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
	</div>
	<div class="form-group">
		<label for="exampleInputEmail2">Email</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
	</div>
	<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
$
.00
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only">Amount (in dollars)</label>
		<div class="input-group">
			<div class="input-group-addon">$</div>
			<input type="text" class="form-control" placeholder="Amount">
			<div class="input-group-addon">.00</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
Form column sizing
	<div class="col-xs-2">
		<input type="text" class="form-control" placeholder=".col-xs-2">
	</div>

	<div class="col-xs-3">
		<input type="text" class="form-control" placeholder=".col-xs-3">
	</div>

	<div class="col-xs-4">
		<input type="text" class="form-control" placeholder=".col-xs-4">
	</div>

	<div class="col-xs-3">
		<input type="text" class="form-control" placeholder=".col-xs-3">
	</div>

	<div class="col-xs-6">
		<input type="text" class="form-control" placeholder=".col-xs-6">
	</div>

	<div class="col-xs-6">
		<input type="text" class="form-control" placeholder=".col-xs-6">
	</div>

	<div class="col-xs-5">
		<input type="text" class="form-control" placeholder=".col-xs-5">
	</div>

	<div class="col-xs-7">
		<input type="text" class="form-control" placeholder=".col-xs-7">
	</div>

	<div class="col-xs-9">
		<input type="text" class="form-control" placeholder=".col-xs-9">
	</div>

	<div class="col-xs-3">
		<input type="text" class="form-control" placeholder=".col-xs-3">
	</div>