WebApps 2

HTML Components

Regular HTML elements may also be used to accept data from the user.

Components

<!-- 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.