In addition to the supported field types, Meta Box also supports all HTML5 input types, such as
tel. You can start using them without writing any extra code.
What is HTML5 input types?
HTML5 input types are types for the text input that are added to the HTML5 and are supported by all browsers. They act similar to
text input, but for other data types, such as URL, email or date. Using HTML5 input types have some benefits:
- You have built-in UI like the arrow up/down for
numberor a picker for date/time/week. The UI is various in different browsers, but it works. And it also supports mobile devices.
- You have built-in validation. If users enter invalid data (for
- Finally, you have a semantic markup
Here are the list of HTML5 input types that you can use:
||Search input field|
|Email input field, which has validation for email|
||URL input field, which has validation for URL (e.g. must starts with
||Telephone input field|
||Number input field, which has up/down arrows to increase/decrease the number.|
||Range input field, which allows you select a number by dragging a control.|
||Month input field, which has the built-in UI for picking a month|
||Week input field, which has the built-in UI for picking a week|
||Datetime input field, which has the built-in UI for picking a date and time with the local timezone|
Please note that some types such as
color are already implemented with different UI. So they’re not available as the custom HTML5 input types anymore.
Using HTML5 input types with Meta Box
Using HTML5 input types with Meta Box is as simple as
text field. All you need to do is set the
type attribute of the field to the corresponding HTML 5 input type.
For example, the code below creates a
[ 'id' => 'field_id', 'type' => 'tel', // New HTML 5 input type 'name' => 'Telephone', ]
In order to customize the field, you might want to add some custom attributes to the input such as
pattern. Even without custom attributes, the field work just fine and you’ll benefit from all things that HTML5 provide.