# A form for adding a new employee

Create **views\empadd.dt** for our data entry form.

```
extends layout
block maincontent
  include cssformgrid.dt
  div.form-grid-wrapper
    h2.center-align New employee details
    form.form-grid(method="post", action="add_employee", enctype="multipart/form-data")
      label.form-grid-label Employee number
      input.form-grid-input(type="empid", name="e_empid", placeholder="employee number", required)
      label.form-grid-label Department
      select#deprt.form-grid-input(name="e_deprt")
        -foreach(dep; departments)
          option(value="#{dep}") #{dep}
      label.form-grid-label Salary grade
      select#deprt.form-grid-input(name="e_paygd")
        -foreach(pay; paygrades)
          option(value="#{pay}") #{pay}
      label.form-grid-label Email address
      input.form-grid-input(type="email", name="e_email", placeholder="email@company.com", required)
      label.form-grid-label Password
      input.form-grid-input(type="password", name="e_pword", placeholder="password", required)
      label.form-grid-label First name
      input.form-grid-input(type="text", name="e_fname", placeholder="First name", required)
      label.form-grid-label Last name
      input.form-grid-input(type="text", name="e_lname", placeholder="Last name", required)
      label.form-grid-label Phone
      input.form-grid-input(type="text", name="e_phone", placeholder="Phone number")
      label.form-grid-label Street address (no city)
      input.form-grid-input(type="text", name="e_street", placeholder="Street address", required)
      label.form-grid-label City
      input.form-grid-input(type="text", name="e_city", placeholder="City", required)
      label.form-grid-label Province
      select#province.form-grid-input(name="e_province")
        -foreach(prov; provinces)
          option(value="#{prov[0]}") #{prov[1]}
      label.form-grid-label Postal code
      input.form-grid-input(type="text", name="e_postcode", placeholder="A1A 1A1")
      label.form-grid-label ID Picture
      input.form-grid-input(type="file", name="picture")
      input(type="hidden", name="e_photo")
      input(type="hidden", name="e_id", value="1")
      div
      div
        input.form-grid-button(type="reset", value="Clear the form")
        input.form-grid-button(type="submit", value="Submit")
```

The line

`form.form-grid(method=`**`"post"`**`,action=`**`"add_employee"`**`, enctype="multipart/form-data")`

will call the **postAddEmployee()** method of the **EmployeeController** class.

The part of the form declaration

`enctype="multipart/form-data"`

means the form will upload a file, which in this case is a photo.

We can mix D code inside a Diet template file with a – (hyphen). 

Thus the line

          `-foreach(dep; departments)`

and

 `-foreach(prov; provinces)`

and

 `-foreach(pay; paygrades)`

mean iterate (or loop) through the **departments** or **provinces** or **paygrades** array to access each item.

The form includes **views\cssformgrid.dt** for its CSS formatting.

Here is the **views\cssformgrid.dt**:

```css
:css 
  .form-grid-wrapper
  {
    width: 700px;
    height: auto;
    margin: 20px auto;
    padding: 1px 20px 20px 0;
    border-radius: 20px;
    background-color: #eef;
  }
  .form-grid
  {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 5px;
  }
  .center-align
  {
    text-align: center;
  }
  .form-grid-label
  {
    width: 100%;
    font-size: 16px;
    text-align: right;
    padding: 5px 0;
  }
  .form-grid-field
  {
    width: 100%;
    font-size: 16px;
    border-bottom: 1px solid black;
    padding: 5px 0;
  }
  .form-grid-button
  {
    width: 100%;
    font-size: 16px;
    height: 40px;
    margin-top: 10px;
  }
```

Now let’s try to run the app.

```
c:\vibeprojects\lorem>dub
    Starting Performing "debug" build using C:\D\dmd2\windows\bin\dmd.exe for x86_64.
…
    Finished To force a rebuild of up-to-date targets, run again with --force
             Copying files for vibe-d:tls...
     Running lorem.exe
[main(----) INF] Listening for requests on http://[::1]:8080/
[main(----) INF] Listening for requests on http://127.0.0.1:8080/
```

Click on the ‘Add employee’ link and you should see this:

<figure><img src="https://3936448450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjGPCKHCWMHsDLNzX2hV8%2Fuploads%2FqmIJd6rXC3neEAzYzwva%2Fimage56.png?alt=media&#x26;token=46ff7878-942b-4d18-86e1-17d485cf9e3c" alt=""><figcaption></figcaption></figure>

But after you fill out the form and click **Submit**, you get this error:

<figure><img src="https://3936448450-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjGPCKHCWMHsDLNzX2hV8%2Fuploads%2FD9VBDesfMoR9iFXOwTim%2Fimage57.png?alt=media&#x26;token=b0c5d7b6-27e5-4350-9ea4-b0e266b72841" alt=""><figcaption></figcaption></figure>

That’s because we haven’t written the **postAddEmployee()** method yet. Take not that we wrote this in the **views\empadd.dt** form:

`form.form-grid(method=`**`"post"`**`, action="`**`add_employee`**`",enctype="multipart/form-data")`

which means the server will call the **postAddEmployee()** method, which we haven’t written yet. Let’s rectify that.