Issue #1174628 by Dave Reid, Niklas Fiekas, ericduran, Jacine: Add new HTML5 FAPI element: search.

core/includes/common.inc

@@ -6984,6 +6984,9 @@ function drupal_common_theme() {
     'textarea' => array(
       'render element' => 'element',
     ),
+    'search' => array(
+      'render element' => 'element',
+    ),
     'password' => array(
       'render element' => 'element',
     ),

core/includes/form.inc

@@ -3930,6 +3930,42 @@ function theme_url($variables) {
   return $output . $extra;
 }
 
+/**
+ * Returns HTML for a search 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_search($variables) {
+  $element = $variables['element'];
+  $element['#attributes']['type'] = 'search';
+  element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength', 'placeholder'));
+  _form_set_class($element, array('form-search'));
+
+  $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;
+}
+
 /**
  * Form element validation handler for #type 'url'.
  *

core/modules/locale/locale.pages.inc

@@ -196,7 +196,7 @@ function locale_translation_filter_form() {
     // Special case for 'string' filter.
     if ($key == 'string') {
       $form['filters']['status']['string'] = array(
-        '#type' => 'textfield',
+        '#type' => 'search',
         '#title' => $filter['title'],
         '#description' => $filter['description'],
       );

core/modules/path/path.admin.inc

@@ -267,7 +267,7 @@ function path_admin_filter_form($form, &$form_state, $keys = '') {
     '#attributes' => array('class' => array('container-inline')),
   );
   $form['basic']['filter'] = array(
-    '#type' => 'textfield',
+    '#type' => 'search',
     '#title' => 'Path alias',
     '#title_display' => 'invisible',
     '#default_value' => $keys,

core/modules/search/search.module

@@ -991,7 +991,7 @@ function search_form($form, &$form_state, $action = '', $keys = '', $module = NU
   $form['module'] = array('#type' => 'value', '#value' => $module);
   $form['basic'] = array('#type' => 'container', '#attributes' => array('class' => array('container-inline')));
   $form['basic']['keys'] = array(
-    '#type' => 'textfield',
+    '#type' => 'search',
     '#title' => $prompt,
     '#default_value' => $keys,
     '#size' => $prompt ? 40 : 20,
@@ -1013,7 +1013,7 @@ function search_form($form, &$form_state, $action = '', $keys = '', $module = NU
  */
 function search_box($form, &$form_state, $form_id) {
   $form[$form_id] = array(
-    '#type' => 'textfield',
+    '#type' => 'search',
     '#title' => t('Search'),
     '#title_display' => 'invisible',
     '#size' => 15,

core/modules/simpletest/drupal_web_test_case.php

@@ -2266,6 +2266,7 @@ protected function handleForm(&$post, &$edit, &$upload, $submit, $form) {
           case 'hidden':
           case 'password':
           case 'email':
+          case 'search':
             $post[$name] = $edit[$name];
             unset($edit[$name]);
             break;

core/modules/simpletest/tests/form.test

@@ -53,6 +53,9 @@ class FormsTestCase extends DrupalWebTestCase {
     $elements['url']['element'] = array('#title' => $this->randomName(), '#type' => 'url');
     $elements['url']['empty_values'] = $empty_strings;
 
+    $elements['search']['element'] = array('#title' => $this->randomName(), '#type' => 'search');
+    $elements['search']['empty_values'] = $empty_strings;
+
     $elements['password']['element'] = array('#title' => $this->randomName(), '#type' => 'password');
     $elements['password']['empty_values'] = $empty_strings;
 
@@ -340,7 +343,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), 36, 'The correct elements have the disabled property in the HTML code.');
+    $this->assertEqual(count($disabled_elements), 37, '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

@@ -1092,7 +1092,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', 'url', 'password', 'tel', 'email') as $type) {
+  foreach (array('textfield', 'textarea', 'url', 'password', 'search', 'tel', 'email') as $type) {
     $form[$type] = array(
       '#type' => $type,
       '#title' => $type,
@@ -1233,7 +1233,7 @@ function form_test_url_submit($form, &$form_state) {
  */
 function _form_test_disabled_elements($form, &$form_state) {
   // Elements that take a simple default value.
-  foreach (array('textfield', 'textarea', 'tel', 'hidden') as $type) {
+  foreach (array('textfield', 'textarea', 'search', 'tel', 'hidden') as $type) {
     $form[$type] = array(
       '#type' => $type,
       '#title' => $type,

core/modules/system/system.module

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

core/themes/bartik/css/style.css

@@ -800,7 +800,7 @@ ul.links {
 #triptych-last #block-node-syndicate {
   text-align: right;
 }
-#triptych #block-search-form .form-type-textfield input {
+#triptych #block-search-form .form-type-search input {
   width: 185px;
 }
 #triptych-middle #block-system-powered-by {
@@ -1191,6 +1191,7 @@ input.form-text,
 input.form-tel,
 input.form-email,
 input.form-url,
+input.form-search,
 textarea.form-textarea,
 select.form-select {
   border: 1px solid #ccc;
@@ -1374,11 +1375,20 @@ div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane {
 #block-search-form .content {
   margin-top: 0;
 }
+#search-form input[type="search"],
+#block-search-form input[type="search"] {
+  box-sizing: border-box;
+  padding: 4px;
+  -webkit-appearance: textfield;
+}
+#search-form input[type="search"]::-webkit-search-decoration,
+#block-search-form input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
 #search-form input#edit-keys,
 #block-search-form .form-item-search-block-form input {
   float: left; /* LTR */
   font-size: 1em;
-  height: 1.143em;
   margin-right: 5px;
   width: 9em;
 }

core/themes/seven/style.css

@@ -604,6 +604,7 @@ div.teaser-checkbox .form-item,
 .form-disabled input.form-tel,
 .form-disabled input.form-email,
 .form-disabled input.form-url,
+.form-disabled input.form-search,
 .form-disabled input.form-file,
 .form-disabled textarea.form-textarea,
 .form-disabled select.form-select {
@@ -693,6 +694,7 @@ input.form-text,
 input.form-tel,
 input.form-email,
 input.form-url,
+input.form-search,
 input.form-file,
 textarea.form-textarea,
 select.form-select {
@@ -709,6 +711,7 @@ input.form-text:focus,
 input.form-tel:focus,
 input.form-email:focus,
 input.form-url:focus,
+input.form-search:focus,
 input.form-file:focus,
 textarea.form-textarea:focus,
 select.form-select:focus {