11 March 2014
In fact, Laravel supports a bunch of handy methods that can handle form creation with ease. We are going to explore these methods.
Before creating form fields, We need to create two routes. One for our form view and another for form submittion and validation.
Route::get('form', function(){
//render app/views/form.blade.php
return View::make('form');
});
Route::post('form-submit', array('before'=>'csrf',function(){
//form validation come here
}));
Then let’s create our form, Just create new file app/views/form.blade.php and write the following.
<!--app/views/form.blade.php-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Laravel
</title>
</head>
<body>
</body>
</html>
Well. Let’s explore resulting source file.
<!--app/views/form.blade.php-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Laravel
</title>
</head>
<body>
<form method="POST" action="http://localhost/<laravel dir>/public/form-submit" accept-charset="UTF-8">
<input name="_token" type="hidden" value="h7xNdTaJXwLz5v0lkBolVPelpxldoiDR5gcKWkku">
</form>
</body>
</html>
Perhaps you don’t like laravel defaults so let’s provide our options.
Now we are ready to submit fields to our form.
Text inputs used to collect string data, Here’s how to create text inputs.
<!-- text input field -->
Similar to text inputs except that we will use textarea() method. Here’s an example.
<!-- textarea field -->
You know, Password inputs used to hide data and here’s how to create them.
<!-- password inputs -->
Actually it’s similar to text inputs except that modern browser (typically which support HTML5) will validate user inputs.
<!-- email input -->
We can use select() method to create selectboxes. This method take optional parameter which is the key of the value that appear as selected. Here’s an example.
<!-- select box -->
Radio buttons can be created with radio() method like that.
<!-- radio buttons -->
Enabled
Disabled
Checkboxes can be created with checkbox() method like that.
<!-- checkbox -->
Enabled
Sometimes we need to submit extra data with our forms. Hidden inputs are perfect for this mission.
<!-- hidden field -->
Let’s take a look at the buttons that laravel provides.
<!-- submit buttons -->
<!-- reset buttons -->
<!-- normal buttons -->
Well. I summarized all inputs that we created through article in the following snippet and then source file result.
<!--app/views/form.blade.php-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Laravel
</title>
</head>
<body>
<!-- text input field -->
<!-- textarea field -->
<!-- password inputs -->
<!-- email input -->
<!-- select box -->
<!-- radio buttons -->
Enabled
Disabled
<!-- checkbox -->
Enabled
<!-- hidden field -->
<!-- submit buttons -->
<!-- reset buttons -->
<!-- normal buttons -->
</body>
</html>
<!--app/views/form.blade.php-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Laravel
</title>
</head>
<body>
<form method="POST" action="http://localhost/<laravel dir>/public/form-submit" accept-charset="UTF-8">
<input name="_token" type="hidden" value="h7xNdTaJXwLz5v0lkBolVPelpxldoiDR5gcKWkku">
<!-- text input field -->
<label for="username" id="" class="">Username</label>
<input id="" class="" name="username" type="text" value="clivern">
<!-- textarea field -->
<label for="biog" id="" class="">Biog.</label>
<textarea id="" class="" name="biog" cols="50" rows="10">biog here</textarea>
<!-- password inputs -->
<label for="password" id="" class="">Password</label>
<input name="password" type="password" value="" id="password">
<!-- email input -->
<label for="email" id="" class="">Email</label>
<input id="" class="" name="email" type="email" value="[email protected]">
<!-- select box -->
<label for="status" id="" class="">Status</label>
<select id="status" name="status">
<option value="enabled" selected="selected">Enabled</option>
<option value="disabled">Disabled</option>
</select>
<!-- radio buttons -->
<label for="status" id="" class="">Status</label>
<input checked="checked" name="status" type="radio" value="enabled" id="status"> Enabled
<input name="status" type="radio" value="disabled" id="status"> Disabled
<!-- checkbox -->
<label for="status" id="" class="">Status</label>
<input checked="checked" name="status" type="checkbox" value="1" id="status"> Enabled
<!-- hidden field -->
<input name="record_to_update" type="hidden" value="1">
<!-- submit buttons -->
<input type="submit" value="Save">
<!-- reset buttons -->
<input type="reset" value="Reset">
<!-- normal buttons -->
<button type="button">Normal</button>
</form>
</body>
</html>