feature #34986 [Form] Added default `inputmode` attribute to Search, …

…Email and Tel form types (fre5h)

This PR was squashed before being merged into the 5.1-dev branch.

Discussion
----------

[Form] Added default `inputmode` attribute to Search, Email and Tel form types

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Tickets       | no
| License       | MIT
| Doc PR        | no

There is an HTML5 attribute `inputmode`. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode It is supported by most of mobile browsers.
There are such supported values for `inputmode`:
* `none`
* `text` (default value)
* `decimal`
* `numeric `
* `tel`
* `search`
* `email`
* `url`

The `url` inputmode is already implemented in UrlType https://github.com/symfony/symfony/blob/master/src/Symfony/Component/Form/Extension/Core/Type/UrlType.php#L39

I propose to add `tel`, `search`, `email` as default form view attribute to the relevant form types. Why only these three? `url` is already implemented, `none` makes no sense as default value for any form type, `text` is a default input type for any browser.

`decimal` and `numeric` has different behaviour on iOS. iOS doesn't show `-` (minus) sign on keyboard for these input modes. Of course in cases, when only positive numbers are expected, it is normal. But it is not suitable as default value in Symfony form type. Developers can add this attribute manually in their forms, if they need only positive numbers.

But `search`, `tel` and `email` input modes don't have problems and can be added as default attributes to Symfony form types. This will improve user experience, while using web-sites developed on Symfony on mobile devices. I add it into the *Type classes inside `buildView` method, so it will be possible to override this parameter if needed.

If you are interested in how it looks like in mobile browsers, you can open this link https://inputmodes.com/ on you mobile device.

Here are screenshots, how mobile keyboard looks like on Android and iOS with using `inputmode` attribute.

## `tel` inputmode
![image](https://user-images.githubusercontent.com/815865/70866507-45256480-1f73-11ea-9e82-320ef0b978ab.png)

## `email` inputmode
![image](https://user-images.githubusercontent.com/815865/70866502-3a6acf80-1f73-11ea-8f4c-3e7faca47f54.png)

## `search` inputmode
![image](https://user-images.githubusercontent.com/815865/70866498-2cb54a00-1f73-11ea-9fdc-2bb8abed107d.png)

Commits
-------

dbc500f [Form] Added default `inputmode` attribute to Search, Email and Tel form types

src/Symfony/Component/Form/CHANGELOG.md

@@ -1,6 +1,11 @@
 CHANGELOG
 =========
 
+5.1.0
+-----
+
+ * Added default `inputmode` attribute to Search, Email and Tel form types.
+
 5.0.0
 -----
 

src/Symfony/Component/Form/Extension/Core/Type/EmailType.php

@@ -12,6 +12,8 @@
 namespace Symfony\Component\Form\Extension\Core\Type;
 
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
 
 class EmailType extends AbstractType
 {
@@ -23,6 +25,14 @@ public function getParent()
         return TextType::class;
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['attr']['inputmode'] = $options['attr']['inputmode'] ?? 'email';
+    }
+
     /**
      * {@inheritdoc}
      */

src/Symfony/Component/Form/Extension/Core/Type/SearchType.php

@@ -12,6 +12,8 @@
 namespace Symfony\Component\Form\Extension\Core\Type;
 
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
 
 class SearchType extends AbstractType
 {
@@ -23,6 +25,14 @@ public function getParent()
         return TextType::class;
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['attr']['inputmode'] = $options['attr']['inputmode'] ?? 'search';
+    }
+
     /**
      * {@inheritdoc}
      */

src/Symfony/Component/Form/Extension/Core/Type/TelType.php

@@ -12,6 +12,8 @@
 namespace Symfony\Component\Form\Extension\Core\Type;
 
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
 
 class TelType extends AbstractType
 {
@@ -23,6 +25,14 @@ public function getParent()
         return TextType::class;
     }
 
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['attr']['inputmode'] = $options['attr']['inputmode'] ?? 'tel';
+    }
+
     /**
      * {@inheritdoc}
      */

src/Symfony/Component/Form/Tests/Extension/Core/Type/EmailTypeTest.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\Component\Form\Tests\Extension\Core\Type;
+
+class EmailTypeTest extends BaseTypeTest
+{
+    const TESTED_TYPE = 'Symfony\Component\Form\Extension\Core\Type\EmailType';
+
+    public function testDefaultInputmode()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE);
+
+        $this->assertSame('email', $form->createView()->vars['attr']['inputmode']);
+    }
+
+    public function testOverwrittenInputmode()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE, null, ['attr' => ['inputmode' => 'text']]);
+
+        $this->assertSame('text', $form->createView()->vars['attr']['inputmode']);
+    }
+
+    public function testSubmitNull($expected = null, $norm = null, $view = null)
+    {
+        parent::testSubmitNull($expected, $norm, '');
+    }
+}

src/Symfony/Component/Form/Tests/Extension/Core/Type/SearchTypeTest.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\Component\Form\Tests\Extension\Core\Type;
+
+class SearchTypeTest extends BaseTypeTest
+{
+    const TESTED_TYPE = 'Symfony\Component\Form\Extension\Core\Type\SearchType';
+
+    public function testDefaultInputmode()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE);
+
+        $this->assertSame('search', $form->createView()->vars['attr']['inputmode']);
+    }
+
+    public function testOverwrittenInputmode()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE, null, ['attr' => ['inputmode' => 'text']]);
+
+        $this->assertSame('text', $form->createView()->vars['attr']['inputmode']);
+    }
+
+    public function testSubmitNull($expected = null, $norm = null, $view = null)
+    {
+        parent::testSubmitNull($expected, $norm, '');
+    }
+}

src/Symfony/Component/Form/Tests/Extension/Core/Type/TelTypeTest.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\Component\Form\Tests\Extension\Core\Type;
+
+class TelTypeTest extends BaseTypeTest
+{
+    const TESTED_TYPE = 'Symfony\Component\Form\Extension\Core\Type\TelType';
+
+    public function testDefaultInputmode()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE);
+
+        $this->assertSame('tel', $form->createView()->vars['attr']['inputmode']);
+    }
+
+    public function testOverwrittenInputmode()
+    {
+        $form = $this->factory->create(static::TESTED_TYPE, null, ['attr' => ['inputmode' => 'text']]);
+
+        $this->assertSame('text', $form->createView()->vars['attr']['inputmode']);
+    }
+
+    public function testSubmitNull($expected = null, $norm = null, $view = null)
+    {
+        parent::testSubmitNull($expected, $norm, '');
+    }
+}