# Beginner \[Exercise 4: Input fields\] (Training slides exercise)

**URL:** <https://community.silverfin.com/t/beginner-exercise-4-input-fields-training-slides-exercise/1736>\
**Category:** Exercises\
**Tags:** exercises, training, beginner, input, input-fields\
**Created:** [April 7, 2020, 10:15am UTC](https://community.silverfin.com/t/beginner-exercise-4-input-fields-training-slides-exercise/1736 "2020-04-07T10:15:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![borjaGonzalez](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/borjagonzalez/32/825_2.png) [@borjaGonzalez](https://community.silverfin.com/u/borjaGonzalez)\
**Post date:** [April 7, 2020, 10:15am UTC](https://community.silverfin.com/t/beginner-exercise-4-input-fields-training-slides-exercise/1736/1 "2020-04-07T10:15:24Z")

</div>

Create a table containing the input fields shown below and try entering some data on them. For the currency column, create a dropdown that allows the user to select one of the following currencies: EUR, GBP or USD. The output should be similar to the image:

**![|800px;x100px;](https://lh5.googleusercontent.com/-6s3zHmqiPrZAeIFewcBmBQLIbs6wne9XhOpunB1TLfCj7nKVEl-BtrZkrp41l8cbDUrBSZzrT4Mv29X60ala5e87tMOo-3gXrDaF2z_-MEALtlB-oV5btzrU56FUkqky2dmH1GhGLYOMMZkZ2xfmeDJ=s2048)**

---

<div class="post-metadata">

**Author:** ![borjaGonzalez](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/borjagonzalez/32/825_2.png) [@borjaGonzalez](https://community.silverfin.com/u/borjaGonzalez)\
**Post date:** [April 7, 2020, 10:17am UTC](https://community.silverfin.com/t/beginner-exercise-4-input-fields-training-slides-exercise/1736/2 "2020-04-07T10:17:08Z")

</div>

Solution:

```auto
{% stripnewlines %}
| Invoice Number
| Attachment
| Invoice date
| Amount
| Currency
| Paid?
| Comments
{% newline %}
|--------
|:--------:
|--------
|--------:
|--------
|--------
|--------
{% newline %}
| {% input custom.invoice.number as:integer %}
| {% input custom.invoice.attachment as:file_collection %}
| {% input custom.invoice.inv_date as:date %}
| {% input custom.invoice.amount as:currency %}
| {% input custom.invoice.currency as:select options:'EUR|GBP|USD' %}
| {% input custom.invoice.paid as:boolean %}
| {% input custom.invoice.comments as:text %}
{% endstripnewlines %}

```

Solution with HTML Tables:

```auto
<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-line-bottom"><b>Invoice Number</b></th>
      <th class="usr-align-center usr-line-bottom"><b>Attachment</b></th>
      <th class="usr-line-bottom"><b>Invoice date</b></th>
      <th class="usr-align-right usr-line-bottom"><b>Amount</b></th>
      <th class="usr-line-bottom"><b>Currency</b></th>
      <th class="usr-line-bottom"><b>Paid?</b></th>
      <th class="usr-line-bottom"><b>Comments</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">{% input custom.invoice.number as:integer %}</td>
      <td class="usr-align-center">{% input custom.invoice.attachment as:file_collection %}</td>
      <td class="">{% input custom.invoice.inv_date as:date %}</td>
      <td class="usr-align-right">{% input custom.invoice.amount as:currency %}</td>
      <td class="">{% input custom.invoice.currency as:select options:'EUR|GBP|USD' %}</td>
      <td class="">{% input custom.invoice.paid as:boolean %}</td>
      <td class="">{% input custom.invoice.comments as:text %}</td>
    </tr>
  </tbody>
</table>

```