10. Forms
10.1 Inputs And Textareas
<div class="field">
<label class="field-label" for="form-example-01">label</label>
<input id="form-example-01" type="text" value="value text">
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-02">label</label>
</div>
<input id="form-example-02" type="text" placeholder="placeholder text">
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-03">label</label>
</div>
<input id="form-example-03" class="d-block" type="text" placeholder="full width input"></input>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-04">label</label>
</div>
<input id="form-example-04" type="text"><span>.textsuffix.com</span>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-11">label</label>
</div>
<textarea id="form-example-11" name="" id="" cols="30" rows="10" placeholder="placeholder text"></textarea>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-12">label</label>
</div>
<textarea id="form-example-12" class="d-block" cols="60" rows="10" placeholder="full width textarea"></textarea>
</div>
10.1.1 Inputs With Prefixes / Suffixes
<div class="field">
<div>
<label class="field-label" for="form-example-05">label</label>
</div>
<label for="form-example-05" class="input-prefix-ex icon icon-link"></label><input id="form-example-05" type="text">
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-06">label</label>
</div>
<input id="form-example-06" type="text"><span class="input-suffix-ex icon icon-link"></span>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-07">label</label>
</div>
<div class="input-prefix-container">
<span class="input-prefix-in icon icon-link"></span><input id="form-example-07" type="text">
</div>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-08">label</label>
</div>
<div class="input-suffix-container">
<input id="form-example-08" type="text"><span class="input-suffix-in icon icon-link"></span>
</div>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-09">label</label>
</div>
<label class="input-prefix-ex icon icon-link" for="form-example-09"></label><div class="input-prefix-container">
<span class="input-prefix-in icon icon-link"></span><input id="form-example-09" type="text">
</div>
</div>
<div class="field">
<div>
<label class="field-label" for="form-example-10">label</label>
</div>
<div class="input-suffix-container">
<input id="form-example-10" type="text"><span class="input-suffix-in icon icon-link"></span>
</div><span class="input-suffix-ex icon icon-link"></span>
</div>
10.2 Radios And Checkboxes
<div class="field">
<input type="radio" id="radio1" name="radios" checked> <label class="field-label" for="radio1">label</label>
</div>
<div class="field">
<input type="radio" id="radio2" name="radios"> <label class="field-label" for="radio2">label</label>
</div>
<div class="field">
<div>
<input type="checkbox" id="checkbox1" checked> <label class="field-label" for="checkbox1">label</label>
</div>
<div>
<input type="checkbox" id="checkbox2"> <label class="field-label" for="checkbox2">label</label>
</div>
</div>
<div>
<div class="field">
<input class="visuallyhidden" type="radio" id="radio3" name="radios" checked><label class="field-label" for="radio3"><span class="icon radio-custom visuallyhidden-ie8"></span> custom radio</label>
</div>
<div class="field">
<input class="visuallyhidden" type="radio" id="radio4" name="radios"><label class="field-label" for="radio4"><span class="icon radio-custom visuallyhidden-ie8"></span> custom radio</label>
</div>
</div>
<div>
<div class="field">
<input class="visuallyhidden" type="checkbox" id="checkbox3" checked><label class="field-label" for="checkbox3"><span class="icon checkbox-custom visuallyhidden-ie8"></span> custom checkbox</label>
</div>
<div class="field">
<input class="visuallyhidden" type="checkbox" id="checkbox4"><label class="field-label" for="checkbox4"><span class="icon checkbox-custom visuallyhidden-ie8"></span> custom checkbox</label>
</div>
</div>
10.3 Date Picker
<div class="field">
<input type="text" id="datepicker"><label class="field-label icon icon-calendar input-suffix-ex" for="datepicker"></label>
</div>
10.4 Autocomplete
Simple
Custom Data
Custom Data With Tokens
<h2>Simple</h2>
<div class="field">
<label for="typehead-1">Tags: </label>
<input class="typeahead-1">
</div>
<h2>Custom Data</h2>
<div class="field">
<label for="typehead-2">Tags: </label>
<input class="typeahead-2">
</div>
<h2>Custom Data With Tokens</h2>
<div class="field">
<input type="hidden" id="typehead3-id">
<ul class="token-list list-reset">
<li class="token-list-item">
<input class="token-list-input typeahead-3" placeholder="type your search here" id="typeahead-1"">
</li>
</ul>
</div>
10.5 File Upload
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
10.6 Wysiwyg
<textarea id="" name="" rows="15"span="80" style="width: 80%" class="tinymce">
<p>
This is some example text that you can edit inside the <strong>TinyMCE editor</strong>.
</p>
<p>
Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus.
</p>
</textarea>