> For the complete documentation index, see [llms.txt](https://reyvaleza.gitbook.io/vibe.d-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reyvaleza.gitbook.io/vibe.d-tutorial/a-form-for-adding-a-new-employee.md).
# 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:
But after you fill out the form and click **Submit**, you get this error:
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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://reyvaleza.gitbook.io/vibe.d-tutorial/a-form-for-adding-a-new-employee.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.