HTML Components
Regular HTML elements may also be used to accept data from the user.
Components
html
<!-- Text -->
<div class="form-group">
<label>Text</label>
<input type="text" class="form-control" name="text" />
</div>
<!-- Email -->
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" />
</div>
<!-- Textarea -->
<div class="form-group">
<label>Textarea</label>
<textarea class="form-control" name="textarea"></textarea>
</div>
<!-- Radiobuttons -->
<div class="form-group">
<label><input type="radio" value="Value1" name="radio" />Value 1</label>
<label><input type="radio" value="Value2" name="radio" />Value 2</label>
</div>
<!-- Checkbox -->
<div class="form-group">
<label
><input
type="checkbox"
value="Checkbox1"
name="checkbox"
/>Checkbox1</label
>
<label
><input
type="checkbox"
value="Checkbox2"
name="checkbox"
/>Checkbox2</label
>
<label
><input
type="checkbox"
value="Checkbox3"
name="checkbox"
/>Checkbox3</label
>
</div>
<!-- Checkbox boolean -->
<div class="form-group">
<label
><input
type="checkbox"
name="checkboxBoolean"
data-value-type="boolean"
/>True/False</label
>
</div>
<!-- Single Selection -->
<div class="form-group">
<select id="select" name="single" class="form-control">
<option value="Value1">Value 1</option>
<option value="Value2">Value 2</option>
<option value="Value3">Value 3</option>
<option value="Value4">Value 4</option>
</select>
</div>
<!-- Multiple selection -->
<div class="form-group">
<select id="multiple-select" multiple name="multiple" class="form-control">
<option value="Value1">Value 1</option>
<option value="Value2">Value 2</option>
<option value="Value3">Value 3</option>
<option value="Value4">Value 4</option>
</select>
</div>
Checkbox boolean
For checkboxes you can use the data attribute data-value-type="boolean" to make it return true or false.
Did you find the content on this page useful?