Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
7 changed files
with
143 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
src/Symfony/Component/Form/Tests/Extension/Core/Type/EmailTypeTest.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, ''); | ||
} | ||
} |
36 changes: 36 additions & 0 deletions
36
src/Symfony/Component/Form/Tests/Extension/Core/Type/SearchTypeTest.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, ''); | ||
} | ||
} |
36 changes: 36 additions & 0 deletions
36
src/Symfony/Component/Form/Tests/Extension/Core/Type/TelTypeTest.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, ''); | ||
} | ||
} |