When building frontend apps, Grind has a handy HTML provider that provides
form builder objects to your views.
- Opening a Form
- Form Model Binding
- Text, Text Area, Password & Hidden Fields
- Checkboxes and Radio Buttons
- File Input
- Drop-Down Lists
First, add the
grind-html package via your preferred package manager:
npm install --save grind-html
Next, you’ll need to add
HtmlProvider to your app providers in
const app =appproviders
By default, a
POST method will be assumed however, you are free to specify another method:
Since HTML forms only support
DELETEmethods will be spoofed by automatically adding a
_methodhidden field to your form.You may also open forms that point to named routes:
You may pass in route parameters as well:
If your form is going to accept file uploads, add a
files option to your array:
Often, you will want to populate a form based on the contents of a model. To do so, use the
Now, when you generate a form element, like a text input, the model’s value matching the field’s name will automatically be set as the field value. So, for example, for a text input named
- Session Flash Data (Old Input)
- Explicitly Passed Value
- Model Attribute Data
This allows you to quickly build forms that not only bind to model values, but easily re-populate if there is a validation error on the server!
form.model, be sure to close your form with
After creating a label, any form element you create with a name matching the label name will automatically receive an ID matching the label name as well.
The form must have been opened with the
filesoption set to
Need to create a button element? Try the button method. It has the same signature as submit.