FormsBootstrap

A Laravel library to generate forms based on Laravel Collective Forms & HTML, Boostrap 5 CSS Framework, RichText editor, and Icons provided by FontAwesome. Current version: 3.2.0. Project on GitHub. Project on Packagist. Manages also results inputs of packages DateRangePickerHelper, Uploader, and Tags input. Includes form management and validation. This demosite sources available here.

Text input


This field is required
A number is required
A number is required

Please enter a number between 0 and 10



Results




Implementation


{!! Form::bsText([
  'id' => 'text1', //field name and id
  'labeltext' => 'Text 1' // field label
]); !!}
{!! Form::bsText([
  'id' => 'text2',
  'labeltext' => 'Text 2',
  'required' => true // mandatory field
]); !!}
{!! Form::bsNumber([
  'id' => 'number',
  'labeltext' => 'Number',
  'required' => true
]); !!}
{!! Form::bsNumber([
  'id' => 'number2',
  'labeltext' => 'Number 2',
  'value'=> 5, // init value
  'attributes' => ['min' => 0, 'max' => 10], // array of additional field attributes
  'helptext' => 'Please enter a number between 0 and 10', // help text displayed below field
  'required' => true
]); !!}

Output:
<div class="mb-3" id="fg-text1">
<label for="text1" class="form-label">Text 1</label>
<input type="text" name="text1" value="" id="text1" class="form-control resettext" />
</div>

<div class="mb-3" id="fg-text2">
<label for="text2" class="form-label">Text 2</label>
<input type="text" name="text2" value="" id="text2" class="form-control verify resettext" />
<div class="invalid-feedback">This field is required</div>
</div>

<div class="mb-3" id="fg-number">
<label for="number" class="form-label">Number</label>
<input type="number" name="number" value="" id="number" class="form-control verify resettext" />
<div class="invalid-feedback">A number is required</div>
</div>

<div class="mb-3" id="fg-number2">
<label for="number2" class="form-label">Number 2</label>
<input type="number" name="number2" value="5" id="number2" class="form-control verify resettext" min="0" max="10" placeholder="5" />
<div class="invalid-feedback">A number is required</div>
<p class="help-block">Please enter a number between 0 and 10</p>
</div>