sFire PHP Framework
To create form element, you may use the built-in form element to easily create a registration form with validation and auto filled values on form submit.
To create a form element you can use the @form syntax. In the example below we create a simple input field:
@form('text')
//Will output <input type="text">
@form('text') -> name('foo')
//Will output <input type="text" name="foo">
@form('text') -> attributes(['name' => 'foo'])
//Will also output <input type="text" name="foo">
By default, values will be filled in automatically on form submit. So if you post a value, that same value will be filled in as the value of the input field. This may not be desired with password fields. You can disable this by calling the filled method.
@form('text') -> filled(false)
@form('password') -> filled(false)
You can easily set new input attributes with the attributes method which accepts an array with key/value structure:
@form('text') -> attributes(['class' => 'btn', 'id' => 'bar'])
//Will output <input type="text" class="btn" id="bar">
Below is a list of the compatible input field you may use.
There are also other types like select boxes, ranges and (submit) buttons discussed below.
There are two ways to create a select box; simple select box and a option group select box.
To create a select box you can use the select option and add an Array with key/value structure to the options method:
@form('select') -> options(['a' => 'A', 'b' => 'B'])
Will ouput:
<select>
<option value="a">A</option>
<option value="b">B</option>
</select>
To group the options in a optgroup you may give multiple arrays in the options method:
@form('select') -> options(['Numbers' => [1 => 1, 2 => 2], 'Letters' => ['a' => 'A', 'b' => 'B']])
Will ouput:
<select>
<optgroup label="Numbers">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="Letters">
<option value="a">A</option>
<option value="b">B</option>
</optgroup>
</select>
sFire lets you easily create a select box with a range with the range method.
@form('selectrange') -> range(1, 3)
@form('selectrange') -> range(3, 1)
Will output:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
You can also use the third argument as the amount of steps it should make and the last parameter as a way of rounding the numbers.
@form('selectrange') -> range(0, 1, 0.5)
@form('selectrange') -> range(0, 1, 0.5, 2)
Will ouput:
<select>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
<select>
<option value="0">0.00</option>
<option value="0.5">0.50</option>
<option value="1">1.00</option>
</select>
To create (submit) buttons you can do:
@form('submit') -> value('foo')
//Will output <input type="submit" value="foo">
@form('button') -> value('foo')
//Will output <input type="button" value="foo">
@form('button') -> value('foo') -> text('bar') -> attributes(['type' => 'submit'])
//Will output <button value="foo" type="submit">bar</button>
As you can see, if you don't set the text of the button type, it will create an <input> element instead of an <button> element.
if you use sFire Validator, you can set error messages automatically when there is an error for a specific input field.
@form('text') -> name('foo') -> onerror(['data-tooltip' => @validator('foo')])
//Will output similar to: <input type="text" name="foo" data-tooltip="Invalid input">
The behavior of the onerror method, is exactly the same as the attributes method and will overwrite all the attributes set with this method when the validation has fails for the input field.
@form('text') -> name('foo') -> attributes('class' => 'success input') -> onerror(['class' => 'error'])
//Will output (on failure): <input type="text" name="foo" class="error">
The "class" attribute with value "success input" will be displayed when there is no error, but, will be replaced with "error" when the validation fails.