class.html5form.php

The most complete html5 form generator and validator php class

An easy-to-use php class to display html5 forms with validation both in js (before sending) and php (after sending).

Available field types are:

Sample contact form (no data saved or used)

After sending the form, the fields get validated (again if javascript is enabled), and if there are errors, a list of the non-valid fields is returned (on this page they get displayed right below this text)

 

Location

Legal

Don't worry, this page, including the stylesheet (both style.scss and style.min.css) are included in the download ;-)

The entire code of this sample contact form: form-code

This package is hosted here: https://www.phpclasses.org/package/12634-PHP-Display-and-validate-an-html5-form.html

/**
* function addBicField()
*
* Adds a label and field for bank account BIC values
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addCheckbox()
*
* Ads a label and checkbox field with additional descriptive label
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $checked Is this element preselected
* @param bool $required Must this field be non empty
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $descriptiveLabel A descriptive label on the other side of the checkbox
* @param string $descriptiveLabelClass The class name of the descriptive label
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addCheckboxGroup()
*
* Ads a label and checkbox fields with additional descriptive labels
*
* @param string $label The label text to show
* @param array $values Array of checkbox data
* array(
* array(
* <input> The name of the input
* <value> The value of this checkbox
* <descriptiveLabel> A descriptive label on the side of the checkbox
* <checked> Is this checkbox checked
* <required> Must one radio be selected
* ), ...
* )
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $descriptiveLabelClass The class name of the descriptive label
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addColorField()
*
* Adds a label and field for bank account BIC values
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addCreditCardField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addDateField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param string|null $min The minimum allowed value
* @param string|null $max The maximum allowed value
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addEmailField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addFileField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param array $filters The file type filters
* Example: array('*.png', '*.jpg', '*.jpeg', '*.gif')
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addIbanField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addIpField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addNameField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed length
* @param int|null $max The maximum allowed length
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
* @param string $countryCode The 2 character (ISO 3366-1 alpha-2, https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code
*/
/**
* function addNumericField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param NumericFieldTypes $type The type name of the input (currency|float|integer)
* @param float|null $value The preset value of the input
* @param float|null $min The minimum allowed value
* @param float|null $max The maximum allowed value
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addPasswordField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed length
* @param int|null $max The maximum allowed length
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addRadio()
*
* Ads a label and radio field with additional descriptive label
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The value of the input
* @param bool $checked Is this element preselected
* @param bool $required Must this field be non empty
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $descriptiveLabel A descriptive label on the other side of the radio
* @param string $descriptiveLabelClass The class name of the descriptive label
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addRadioGroup()
*
* Ads a label and radio fields with additional descriptive labels
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param array $values Array of radio button data
* array(
* array(
* <value> The value of this radio
* <descriptiveLabel> A descriptive label on the side of the radio
* <checked> Is this radio checked (only one in the group)
* ), ...
* )
* @param bool $required Must one radio be selected
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $descriptiveLabelClass The class name of the descriptive label
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addRange()
*
* Adds a label and range input
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed value
* @param int|null $max The maximum allowed value
* @param int $step The step width
* @param bool $required Must this field be non empty
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $descriptiveLabelClass The class name of the descriptive label
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addSelect()
*
* Adds a label and select field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param array $options The options for the select (name [option|optgroup], value (optional), text)
* @param string|null $value The preset value of the input
* @param bool $multiple Is this a multi-select
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addTelField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed length
* @param int|null $max The maximum allowed length
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addTextField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed length
* @param int|null $max The maximum allowed length
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addTextarea()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed length
* @param int|null $max The maximum allowed length
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addTimeField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param string|null $min The minimum allowed value
* @param string|null $max The maximum allowed value
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addUrlField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param int|null $min The minimum allowed length
* @param int|null $max The maximum allowed length
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
*/
/**
* function addZipcodeField()
*
* Adds a label and field to the form
*
* @param string $label The label text to show
* @param string $input The name of the input
* @param string|null $value The preset value of the input
* @param bool $required Must this field be non empty
* @param string $placeholder Placeholder text
* @param array $restrictions Additional restrictions to be checked
* array(
* array('function' => <Function>, 'operator' => <Operator>, 'compare' => <Compare>),
* ...
* )
* 'function' can be one of [value|strlen|...]
* 'operator' can be one of [==|===|!=|!==|>|>=|<|<=]
* 'compare' must be the value to compare against
* Also non-associative allowed: array(array(<Function>, <Operator>, <Compare>), ...)
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
* @param string $className The name of the additional class
* @param string $additionalCss Additional CSS to the input
* @param string $countryCode The 2 character (ISO 3366-1 alpha-2, https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code
*/
/**
* function addCode()
*
* Adds html code in between of the fields defined before and after the code
*
* @param string $code The html code to insert
*/
/**
* function addButton()
*
* Adds a button to the form
*
* @param string $value The text to show on the button
* @param ButtonTypes $type The type of the button (submit|reset|button)
* @param string $name The name of the button
* @param string $id The id name of the button
* @param string $class The class name of the button
* @param string $additionalCss Additional CSS to the input
* @param string $label If set, adds a label for the buttons (only use on the first|last button)
* @param string $labelClass The name of the class to add to the label
* @param LabelPositions $labelPosition The position of the label relative to the input (before|after)
*/
<?php
include('src/classes/class.html5form.php');
if (isset($_POST['save'])) {
$ret = html5form::checkFormData($_POST);
if (is_array($ret)) {
echo '<pre>Errors = ' . print_r($ret, true) . '</pre>';
}
}
$oForm = new html5form('.');
$oForm->addCode('<div class="left halfWidth">');
$oForm->addNameField('Name *', 'name', $_POST['name'], null, null, true, 'full name, at least 2 words', array(array('function' => 'str_word_count', 'operator' => '>=', 'compare' => 2)));
$oForm->addCode('</div><div class="right halfWidth">');
$oForm->addTelField('Phone number *', 'phone', $_POST['phone'], null, null, true);
$oForm->addCode('</div><div class="clear"></div><div class="left halfWidth">');
$oForm->addEmailField('Email address *', 'email', $_POST['email'], true);
$oForm->addCode('</div><div class="right halfWidth">');
$oForm->addRadioGroup('Gender *', 'gender', array(array('male', 'Male', ($_POST['gender'] == 'male')), array('female', 'Female', ($_POST['gender'] == 'female'))), true, LabelPositions::before, 'description');
$oForm->addCode('</div><div class="clear"></div>');
$oForm->addTextarea('Request *', 'request', $_POST['request'], null, null, true, 'at least 10 words', array(array('function' => 'str_word_count', 'operator' => '>=', 'compare' => 10)), LabelPositions::before, 'high');
$oForm->addCode('<h3 style="margin: 8px 0 4px 0">Location</h3>');
$oForm->addCode('<div class="left halfWidth">');
$oForm->addNumericField('Latitude', 'lat', NumericFieldTypes::float, $_POST['lat']);
$oForm->addCode('</div><div class="right halfWidth">');
$oForm->addNumericField('Longitude', 'lon', NumericFieldTypes::float, $_POST['lon']);
$oForm->addCode('</div>');
$oForm->addCode('<script>
function position(pos) {
document.getElementsByName("lat")[0].value = pos.coords.latitude;
document.getElementsByName("lon")[0].value = pos.coords.longitude;
}
function positionError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
// alert("Permission denied");
break;
case error.POSITION_UNAVAILABLE:
// alert("Position unavailable");
break;
case error.TIMEOUT:
// alert("Timeout");
break;
case error.UNKNOWN_ERROR:
// alert("Unknown error");
break;
}
getIpLocation();
}
function getIpLocation() {
$.ajax({
url: "http://ip-api.com/json/",
method: "get",
cache: false,
contentType: "json",
processData: false,
success: function(data) {
var geo = $.parseJSON(data);
document.getElementsByName("lat")[0].value = pos.coords.latitude;
document.getElementsByName("lon")[0].value = pos.coords.longitude;
},
error: function() {
alert("Dein aktueller Standort konnte nicht ermittelt werden. Bitte gib ihn selbst so genau wie möglich ein.");
}
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position, positionError, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 10
});
} else {
getIpLocation();
}
</script>');
$oForm->addCode('<h3 style="margin: 8px 0 4px 0">Legal</h3>');
$oForm->addCheckbox('Privacy *', 'privacy', '1', false, true, LabelPositions, 'I know my data won\'t be used or saved, it will only be validated and returned to me', 'description');
$oForm->addButton('Send', ButtonTypes::submit, 'save', 'Save', '', '', ' ', 'desktop');
$oForm->addButton('Reset', ButtonTypes::reset, '', 'Cancel');
$oForm->display();
?>