|

Create Form Elements Using Laravel and Bootstrap

Create Form Elements Using Laravel and Bootstrap

Forms and Submitting Forms are one of the most needed parts of working with html and Web Development. We need html forms to collect user input in an accurate and useful way. Bootstrap famously gives some beautiful looking forms in their demo markup, and while they look great, there is no information or direction on how to actually implement the form to collect and process the data. We can process the form with raw PHP just fine, but Larvel makes it about 150% easier. Let’s check out that version of how to do things now, since 150% sounds like a good deal to me.


Generate The Popular Bootstrap Form Elements With Blade

Here is the form that we will generate with Laravel, it’s Form Facade, and the blade template engine.

laravel bootstrap form processing

Make sure to enable the Form Facade by adding these snippets to your project using following these steps.

Add the requirement using composer.
vagrant@homestead:~/Code/laravel$ composer require laravelcollective/html

Populate the providers array with the entry for Illuminate HTML.

Configure the aliases array to allow for HTML and Form Facades.

Run composer dump.
vagrant@homestead:~/Code/laravel$ composer dump

No doubt you’ve seen this example form that includes at least one of all of the most common form items such as email input, password input, checkbox input, textarea input, radio button input, select with a default value, as well as the option for multiple select. Creating this in raw HTML with some bootstrap classes applied is fairly straightforward. We can accomplish the same thing when working in Laravel with the Blade template engine. This is how we can create the example form using blade.

Excellent. This is a good looking form. If you’re used to creating the form manually, the snippets here can be used for a quick reference for the various form elements you may need to create with blade.

The Master Layout

In the snippet above, we can see that it extends he master layout file. It makes sense to include assets that you’ll need on many pages in the master layout such as bootstrap or other related classes. This is the master layout we used for this example.

Fetching Form Input Data With Laravel

There are several ways to fetch the data from the forms in your view files into your controller or route file. My favorite way to do this is to simply fetch the entire collection of data into an array using Input::all(). By using something like $formdata = Input::all(); you can then access any piece of data that came from the form in one convenient variable. Here is an inspection of $formdata using the print_r function.

print_r form output

This is fantastic stuff, let’s go through each form element in turn to see how to create it, and how to fetch the data.


Form::open()

Laravel provides a convenient way to define a form in your views using Form::open() and Form::close(). This section deals with how to open a form, provide a route to which the form will be processed, and a class to style the form. In this case the style comes from twitter bootstrap.

How to create in the view


Form::email()

The first form element in our example is an email field. Here is the markup used to create the email form element.

How to create in the view

How to fetch in your controller

The email input can be fetched directly like so.


Form::password()

The password field is the second form element we created with Laravel in our example form.

How to create in the view

How to fetch in your controller

The password input can be fetched directly like so.


Form::checkbox()

The checkbox field can be useful for getting answers to a yes or no question from the user.

How to create in the view

How to fetch in your controller

The checkbox input can be fetched directly like so.


Form::textarea()

Your users can submit long form text with the textarea field. Here is how we do it in Laravel.

How to create in the view

How to fetch in your controller

The textarea input can be fetched directly like so.


Form::radio()

When there is a selection of choices, and the user needs to choose one option, the radio makes a good choice.

How to create in the view

How to fetch in your controller

The radio input can be fetched directly like so.


Form::select()

The drop down select element is in wide use across all kinds of applications today. This is great for choosing a category, or size as in this example.

How to create in the view

How to fetch in your controller

The select input can be fetched directly like so.

How To Create A Multi Select Form With Laravel

A variation on the select form element is a select which allows multiple selections. You may be familiar with this type of select field where you can hold down the ctrl button and click on several choices from a multiple selection drop down list. We can create this same thing with the Laravel Form::select(), but we need to make sure to include a few additional options.

Note: When creating a select with multiple options, you must use the format of name[] to tell PHP that this is a multiple selection. (note the square brackets) This way, PHP knows to use an array to store the information that comes from this input. In addition to this is the fact that the multiple attribute is set to multiple. This is also required for a multiple select form.

Multiple Select

How to fetch in your controller


Form::submit()

All of these form elements are not going to be of much value to us unless we are able to actually submit them for processing. This is how we accomplish that.

How to create in the view


Form::close()

Finally, we can easily close our form using Laravel’s Form::close() method.

More Resources

Conclusion

This was a fun post that highlights the specifics of creating, and processing data with forms in Laravel. We did not cover validation, but that is ok since there are other posts here and elsewhere that give great examples of how to do that. Instead, this episode can serve as a cheat sheet or quick reference so to speak for how to both create the element on the view side, and retrieve that data on the controller side.