URL element
HTML5 adds support for an URL input field. This helps browsers (specifically mobile browsers) provide special keyboard buttons (like
http://
and
.com
) for the user when typing in this field. Older browsers will fall back to use a normal text field if url is unsupported.
This form element will perform validation on the value by using the valid_url() function. Therefore this field should not be used for relative paths, but only for fully-qualified URLs.
Example:
$form['url'] = array(
'#type' => 'url',
'#title' => t('Your website'),
'#placeholder' => 'http://www.example.com/',
);
E-mail element
HTML5 adds support for an e-mail input field. This helps browsers (specifically mobile browsers) provide special characters (like
@
) for the user when typing in this field. Older browsers will fall back to use a normal text field if email is unsupported.
This form element will perform validation on the value by using the valid_email_address() function.
Example:
$form['mail'] = array(
'#type' => 'email',
'#title' => t('Your e-mail address'),
'#placeholder' => 'john.doe@example.com',
);
Telephone element
HTML5 adds support for a telephone number input field. This helps browsers (specifically mobile browsers) provide numeric input for the user when typing in this field. Older browsers will fall back to use a normal text field if tel is unsupported.
Example:
$form['phone'] = array(
'#type' => 'tel',
'#title' => t('Your telephone number'),
'#placeholder' => '+0 (000) 000-0000',
);
Search element
HTML5 adds support for a search input field type. It gives the input field that otherwise looks like a textfield a semantic meaning. Some browsers provide a way to clear the field with one click.
Example:
$form['keyword'] = array(
'#type' => 'search',
'#title' => t('Search'),
'#placeholder' => t('Enter a term to look up'),
);
Number element
HTML5 adds support for a number input field type. It can have a step, a minimum and a maximum. The browser can provide up-down-arrows or a number keyboard, which is especially useful on mobile devices. For browsers that do not support the new input type, the fallback is a simple textfield with just the server side validation.
Example:
$form['integer'] = array(
'#type' => 'number',
'#title' => t('This will allow only integers greater or equal to 41'),
'#min' => 41,
);
$form['float'] = array(
'#type' => 'number',
'#title' => t('This will allow any floating point number smaller or equal to 100'),
'#max' => 100,
'#step' => 'any',
);
$form['stepped_float'] = array(
'#type' => 'number',
'#title' => t('This will allow the floating point numbers 2, 2.5, 3 and 3.5'),
'#min' => 2,
'#step' => 0.5,
'#max' => 3.5,
);
Color element
HTML5 adds support for a color input field type. Modern browsers might display a colorpicker widget. The input is automatically validated/sanitized to be a lowercase simple color, e.g. #ff0000. The input can't be empty - there is always a value selected. Default is black.
Example:
$form['background_color'] = array(
'#type' => 'color',
'#title' => t('Pick a background color'),
);
Placeholder
HTML5 introduces the placeholder attribute, which provides a short prompt or example text to be displayed in an input field. This can be used with multiple types of input fields: text, textarea, email, telephone, and password.
Example:
$form['password'] = array(
'#type' => 'password',
'#title' => t('Password'),
'#placeholder' => t('Enter password'),
);
