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

Templates Exercises
, , , ,
1

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;

2

Solution:

{% 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:

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