Semantic UI form builder, for Laravel.
Via Composer
$ composer require laravolt/semantic-form
Laravolt\SemanticForm\ServiceProvider::class,
'SemanticForm' => Laravolt\SemanticForm\Facade::class,
SemanticForm::open('search'); // action="search"
SemanticForm::open()->get();
SemanticForm::open()->post();
SemanticForm::open()->put();
SemanticForm::open()->patch();
SemanticForm::open()->delete();
SemanticForm::open(); // default to method="GET"
SemanticForm::open()->action('search');
SemanticForm::open()->url('search'); // alias for action()
SemanticForm::open()->route('route.name');
SemanticForm::open()->post()->action(route('comment.store'));
SemanticForm::open('search'); // action="search" method=POST
SemanticForm::get('search'); // action="search" method=GET
SemanticForm::post('search'); // action="search" method=POST
SemanticForm::put('search'); // action="search" method=POST _method=PUT
SemanticForm::patch('search'); // action="search" method=POST _method=PATCH
SemanticForm::delete('search'); // action="search" method=POST _method=DELETE
SemanticForm::text($name, $value)->label('Username');
SemanticForm::password($name)->label('Password');
SemanticForm::email($name, $value)->label('Email Address');
SemanticForm::textarea($name, $value)->label('Note');
SemanticForm::select($name, $options)->label('Choose Country');
SemanticForm::select($name, $options, $selected)->label('Choose Country');
SemanticForm::select($name, $options)->placeholder('--Select--');
SemanticForm::select($name, $options)->appendOption($key, $label);
SemanticForm::select($name, $options)->prependOption($key, $label);
SemanticForm::selectDate('myDate', $startYear, $endYear)->label('Birth Date');
SemanticForm::selectDateTime('myDate', $startYear, $endYear, $intervalInMinute)->label('Schedule');
By default, selectDate and selectDateTime will post request as _myDate
with ['date'=>4, 'month'=>5, 'year'=>2016]
for example.
To get 2016-5-4
format, you need to register middleware and use it in the routes.
protected $routeMiddleware = [
'selectdate' => \Laravolt\SemanticForm\Middleware\SelectDateMiddleware::class,
'selectdatetime' => \Laravolt\SemanticForm\Middleware\SelectDateTimeMiddleware::class
];
Route::post('myForm', ['middleware' => ['web', 'selectdate:myDate'], function (\Illuminate\Http\Request $request) {
dd($request->input('myDate')); // Will output 2016-5-4
}]);
SemanticForm::selectRange($name, $begin, $end)->label('Number of child');
SemanticForm::selectMonth($name, $format = '%B')->label('Month');
$checked = true;
SemanticForm::radio($name, $value, $checked)->label('Item Label');
$values = ['apple' => 'Apple', 'banana' => 'Banana'];
$checkedValue = 'banana';
SemanticForm::radioGroup($name, $values, $checkedValue)->label('Select Fruit');
SemanticForm::checkbox($name, $value, $checked)->label('Remember Me');
$values = ['apple' => 'Apple', 'banana' => 'Banana'];
$checkedValue = 'banana';
SemanticForm::checkboxGroup($name, $values, $checkedValue)->label('Select Fruit');
SemanticForm::file($name);
SemanticForm::input($name, $defaultvalue);
SemanticForm::input($name, $defaultvalue)->appendIcon('search');
SemanticForm::input($name, $defaultvalue)->prependIcon('users');
SemanticForm::input($name, $defaultvalue)->appendLabel($label);
SemanticForm::input($name, $defaultvalue)->prependLabel($label);
SemanticForm::input($name, $defaultvalue)->type("password");
Reference: http://semantic-ui.com/elements/input.html
SemanticForm::image($name);
// somewhere in view
SemanticForm::datepicker($name, $value, $format);
// don't forget to put this somewhere on your view
@include('semantic-form::scripts.calendar')
// Valid $format are:
// DD -> two digit date
// MM -> two digit month number
// MMMM -> month name (localized)
// YY -> two digit year
// YYYY -> full year
// To convert localized format to standard (SQL) datetime format, you can use Jenssegers\Date\Date library (already included):
// Jenssegers\Date\Date::createFromFormat('d F Y', '12 februari 2000')->startOfDay()->toDateTimeString();
// Jenssegers\Date\Date::createFromFormat('d F Y', '12 februari 2000')->startOfDay()->toDateString();
See Semantic-Org/Semantic-UI#3256 for further discussion. Remember, you must include calendar.js and calendar.css on your own.
SemanticForm::redactor($name, $value)->label('Post Body');
Hidden
SemanticForm::hidden($name, $value);
SemanticForm::button($value);
SemanticForm::submit($value);
SemanticForm::bind($model);
For every form element, you can call and chaining following methods:
- id($string)
- addClass($string)
- removeClass($string)
- attribute($name, $value)
- data($name, $value)
- hint($text) (Since 1.10.0)
- hint($text, $class = "hint") (Since 1.10.2)
// Put this on every request, e.g. in AppServiceProvider
Laravolt\SemanticForm\Elements\Hint::$defaultClass = 'custom-class';
SemanticForm::text($name, $value)->label('Username')->id('username')->addClass('foo');
SemanticForm::text($name, $value)->label('Username')->data('url', 'http://id-laravel.com');
SemanticForm::password($name, $value)->label('Password')->hint('Minimum 6 characters');
SemanticForm::password($name, $value)->label('Password')->hint('Minimum 6 characters', 'my-custom-css-class');
- \Laravolt\SemanticForm\Middleware\SelectDateMiddleware
- \Laravolt\SemanticForm\Middleware\SelectDateTimeMiddleware
SemanticForm inspired by AdamWathan\Form.