Issue #1174634 by ericduran, rupl, Dave Reid, jhedstrom, helior: Add new HTML5...

Issue #1174634 by ericduran, rupl, Dave Reid, jhedstrom, helior: Add new HTML5 FAPI element: telephone.

core/includes/common.inc

@@ -6872,6 +6872,9 @@ function drupal_common_theme() {
     'textfield' => array(
       'render element' => 'element',
     ),
+    'tel' => array(
+      'render element' => 'element',
+    ),
     'form' => array(
       'render element' => 'element',
     ),

core/includes/form.inc

@@ -3722,6 +3722,42 @@ function theme_textfield($variables) {
   return $output . $extra;
 }
 
+/**
+ * Returns HTML for a tel form element.
+ *
+ * @param $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #title, #value, #description, #size, #maxlength,
+ *     #placeholder, #required, #attributes, #autocomplete_path.
+ *
+ * @ingroup themeable
+ */
+function theme_tel($variables) {
+  $element = $variables['element'];
+  $element['#attributes']['type'] = 'tel';
+  element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength', 'placeholder'));
+  _form_set_class($element, array('form-tel'));
+
+  $extra = '';
+  if ($element['#autocomplete_path'] && drupal_valid_path($element['#autocomplete_path'])) {
+    drupal_add_library('system', 'drupal.autocomplete');
+    $element['#attributes']['class'][] = 'form-autocomplete';
+
+    $attributes = array();
+    $attributes['type'] = 'hidden';
+    $attributes['id'] = $element['#attributes']['id'] . '-autocomplete';
+    $attributes['value'] = url($element['#autocomplete_path'], array('absolute' => TRUE));
+    $attributes['disabled'] = 'disabled';
+    $attributes['class'][] = 'autocomplete';
+    $extra = '<input' . drupal_attributes($attributes) . ' />';
+  }
+
+  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
+
+  return $output . $extra;
+}
+
 /**
  * Returns HTML for a form.
  *

core/modules/simpletest/drupal_web_test_case.php

@@ -2235,6 +2235,7 @@ protected function handleForm(&$post, &$edit, &$upload, $submit, $form) {
       if (isset($edit[$name])) {
         switch ($type) {
           case 'text':
+          case 'tel':
           case 'textarea':
           case 'hidden':
           case 'password':

core/modules/simpletest/tests/form.test

@@ -37,6 +37,9 @@ class FormsTestCase extends DrupalWebTestCase {
     $elements['textfield']['element'] = array('#title' => $this->randomName(), '#type' => 'textfield');
     $elements['textfield']['empty_values'] = $empty_strings;
 
+    $elements['telephone']['element'] = array('#title' => $this->randomName(), '#type' => 'tel');
+    $elements['telephone']['empty_values'] = $empty_strings;
+
     $elements['password']['element'] = array('#title' => $this->randomName(), '#type' => 'password');
     $elements['password']['empty_values'] = $empty_strings;
 
@@ -258,7 +261,7 @@ class FormsTestCase extends DrupalWebTestCase {
 
     // All the elements should be marked as disabled, including the ones below
     // the disabled container.
-    $this->assertEqual(count($disabled_elements), 32, t('The correct elements have the disabled property in the HTML code.'));
+    $this->assertEqual(count($disabled_elements), 33, t('The correct elements have the disabled property in the HTML code.'));
 
     $this->drupalPost(NULL, $edit, t('Submit'));
     $returned_values['hijacked'] = drupal_json_decode($this->content);

core/modules/simpletest/tests/form_test.module

@@ -1027,7 +1027,7 @@ function form_test_select_submit($form, &$form_state) {
  * Builds a form to test the placeholder attribute.
  */
 function form_test_placeholder_test($form, &$form_state) {
-  foreach (array('textfield', 'textarea', 'password') as $type) {
+  foreach (array('textfield', 'textarea', 'password', 'tel') as $type) {
     $form[$type] = array(
       '#type' => $type,
       '#title' => $type,
@@ -1102,7 +1102,7 @@ function form_test_checkboxes_radios($form, &$form_state, $customize = FALSE) {
  */
 function _form_test_disabled_elements($form, &$form_state) {
   // Elements that take a simple default value.
-  foreach (array('textfield', 'textarea', 'hidden') as $type) {
+  foreach (array('textfield', 'textarea', 'tel', 'hidden') as $type) {
     $form[$type] = array(
       '#type' => $type,
       '#title' => $type,

core/modules/system/system.module

@@ -368,6 +368,15 @@ function system_element_info() {
     '#theme' => 'textfield',
     '#theme_wrappers' => array('form_element'),
   );
+  $types['tel'] = array(
+    '#input' => TRUE,
+    '#size' => 30,
+    '#maxlength' => 128,
+    '#autocomplete_path' => FALSE,
+    '#process' => array('ajax_process_form'),
+    '#theme' => 'tel',
+    '#theme_wrappers' => array('form_element'),
+  );
   $types['machine_name'] = array(
     '#input' => TRUE,
     '#default_value' => NULL,

core/themes/bartik/css/style.css

@@ -1217,6 +1217,7 @@ select.form-select {
   padding: 4px;
 }
 input.form-text,
+input.form-tel,
 textarea.form-textarea,
 select.form-select {
   border: 1px solid #ccc;

core/themes/seven/style.css

@@ -609,6 +609,7 @@ div.teaser-checkbox .form-item,
 }
 .form-disabled input.form-autocomplete,
 .form-disabled input.form-text,
+.form-disabled input.form-tel,
 .form-disabled input.form-file,
 .form-disabled textarea.form-textarea,
 .form-disabled select.form-select {
@@ -696,6 +697,7 @@ input.form-button-disabled:active {
 }
 input.form-autocomplete,
 input.form-text,
+input.form-tel,
 input.form-file,
 textarea.form-textarea,
 select.form-select {
@@ -709,6 +711,7 @@ select.form-select {
   transition: border linear 0.2s, box-shadow linear 0.2s;
 }
 input.form-text:focus,
+input.form-tel:focus,
 input.form-file:focus,
 textarea.form-textarea:focus,
 select.form-select:focus {