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

fre5h · 2019-12-15T18:50:05Z

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

`email` inputmode

`search` inputmode

fre5h · 2019-12-15T19:36:25Z

CI is failed because it is failed in master branch too. Tests for From component have passed.

javiereguiluz

Very nice! Thanks @fre5h.

nicolas-grekas · 2019-12-26T09:04:01Z

Could you please add a line about it in the changelog of the component?

fre5h · 2019-12-26T09:22:49Z

@nicolas-grekas Added

…orm types

nicolas-grekas · 2019-12-26T09:33:25Z

Thank you @fre5h.

…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

stfalcon · 2019-12-26T10:17:14Z

Nice job! @fre5h

MatTheCat · 2020-05-19T06:52:21Z

inputmode was specified in UrlType when the type cannot be url because of the default_protocol option. Is there any need to add it when it should be inferred from the input type?

From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

tel
Inputs that require a telephone number should typically use <input type="tel"> instead.

search
Inputs that require a search query should typically use <input type="search"> instead.

email
Inputs that require email addresses should typically use <input type="email"> instead.

xabbuh · 2020-05-19T07:18:32Z

@MatTheCat I am afraid I do not understand your question.

MatTheCat · 2020-05-19T07:29:18Z

inputmode seems to be useless when it can be inferred from the type attribute, which is the case for tel, search and email. So what is the point to add it on these?

xabbuh · 2020-05-19T08:39:46Z

If I don't miss anything, we don't make use of these specialised type attributes yet.

MatTheCat · 2020-05-19T08:54:18Z

Fortunately, we do:

symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

Lines 214 to 217 in b1c7383

    
           {%- block email_widget -%} 
        
               {%- set type = type|default('email') -%} 
        
               {{ block('form_widget_simple') }} 
        
           {%- endblock email_widget -%}

symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

Lines 262 to 265 in b1c7383

    
           {%- block tel_widget -%} 
        
               {%- set type = type|default('tel') -%} 
        
               {{ block('form_widget_simple') }} 
        
           {%- endblock tel_widget -%}

symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

Lines 194 to 197 in b1c7383

    
           {%- block search_widget -%} 
        
               {%- set type = type|default('search') -%} 
        
               {{ block('form_widget_simple') }} 
        
           {%- endblock search_widget -%}

…ype is the same (MatTheCat) This PR was submitted for the master branch but it was merged into the 5.1 branch instead. Discussion ---------- [Form] don't add the inputmode attribute on fields whose type is the same | Q | A | ------------- | --- | Branch? | 5.1 | Bug fix? | no | New feature? | no | Deprecations? | no | Tickets | Fix #34986 | License | MIT These is no need to add the `inputmode` attribute on fields whose `type` is the same. From https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode > When inputmode is unspecified (or is in a state not supported by the user agent), the user agent should determine the default virtual keyboard to be shown. Contextual information such as the input type or pattern attributes should be used to determine which type of virtual keyboard should be presented to the user. From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode > **tel** > Inputs that *require* a telephone number should typically use `<input type="tel">` instead. > **search** > Inputs that *require* a search query should typically use `<input type="search">` instead. > **email** > Inputs that *require* email addresses should typically use `<input type="email">` instead. As such there is no point in adding `inputmode` for those types. Symfony’s `UrlType` uses `inputmode` **only** when the `type` has to be `text` because the `default_protocol` option is set. Commits ------- d933fa1 Revert #34986

* 5.1: (33 commits) [Cache] $lifetime cannot be null [Serializer] minor cleanup fix merge Run PHP 8 as 7.4.99 Remove calls to deprecated ReflectionParameter::getClass(). [VarDumper] fix PHP 8 support Removed "services" prototype node from "custom_authenticator" Add php 8 to travis. [Cache] Accessing undefined constants raises an Error in php8 [Cache] allow DBAL v3 Skip Doctrine DBAL on php 8 until we have a compatible version. [DomCrawler] Catch expected ValueError. Made method signatures compatible with their corresponding traits. [ErrorHandler] Apply php8 fixes from Debug component. [DomCrawler] Catch expected ValueError. [Validator] Catch expected ValueError. [VarDumper] ReflectionFunction::isDisabled() is deprecated. [BrowserKit] Raw body with custom Content-Type header Revert #34986 Make ExpressionLanguageSyntax validator usable with annotation ...

* 5.1: (33 commits) [Cache] $lifetime cannot be null [Serializer] minor cleanup fix merge Run PHP 8 as 7.4.99 Remove calls to deprecated ReflectionParameter::getClass(). [VarDumper] fix PHP 8 support Removed "services" prototype node from "custom_authenticator" Add php 8 to travis. [Cache] Accessing undefined constants raises an Error in php8 [Cache] allow DBAL v3 Skip Doctrine DBAL on php 8 until we have a compatible version. [DomCrawler] Catch expected ValueError. Made method signatures compatible with their corresponding traits. [ErrorHandler] Apply php8 fixes from Debug component. [DomCrawler] Catch expected ValueError. [Validator] Catch expected ValueError. [VarDumper] ReflectionFunction::isDisabled() is deprecated. [BrowserKit] Raw body with custom Content-Type header Revert symfony/symfony#34986 Make ExpressionLanguageSyntax validator usable with annotation ...

* 5.1: (33 commits) [Cache] $lifetime cannot be null [Serializer] minor cleanup fix merge Run PHP 8 as 7.4.99 Remove calls to deprecated ReflectionParameter::getClass(). [VarDumper] fix PHP 8 support Removed "services" prototype node from "custom_authenticator" Add php 8 to travis. [Cache] Accessing undefined constants raises an Error in php8 [Cache] allow DBAL v3 Skip Doctrine DBAL on php 8 until we have a compatible version. [DomCrawler] Catch expected ValueError. Made method signatures compatible with their corresponding traits. [ErrorHandler] Apply php8 fixes from Debug component. [DomCrawler] Catch expected ValueError. [Validator] Catch expected ValueError. [VarDumper] ReflectionFunction::isDisabled() is deprecated. [Browser 9E88 Kit] Raw body with custom Content-Type header Revert symfony/symfony#34986 Make ExpressionLanguageSyntax validator usable with annotation ...

* 5.1: (33 commits) [Cache] $lifetime cannot be null [Serializer] minor cleanup fix merge Run PHP 8 as 7.4.99 Remove calls to deprecated ReflectionParameter::getClass(). [VarDumper] fix PHP 8 support Removed "services" prototype node from "custom_authenticator" Add php 8 to travis. [Cache] Accessing undefined constants raises an Error in php8 [Cache] allow DBAL v3 Skip Doctrine DBAL on php 8 until we have a compatible version. [DomCrawler] Catch expected ValueError. Made method signatures compatible with their corresponding traits. [ErrorHandler] Apply php8 fixes from Debug component. [DomCrawler] Catch expected ValueError. [Validator] Catch expected ValueError. [VarDumper] ReflectionFunction::isDisabled() is deprecated. [BrowserKit] Raw body with custom Content-Type header Revert symfony/symfony#34986 Make ExpressionLanguageSyntax validator usable with annotation ...

fre5h requested a review from xabbuh as a code owner December 15, 2019 18:50

carsonbot added Status: Needs Review Form Feature labels Dec 15, 2019

nicolas-grekas added this to the next milestone Dec 15, 2019

xabbuh approved these changes Dec 16, 2019

View reviewed changes

carsonbot added Status: Reviewed and removed Status: Needs Review labels Dec 16, 2019

javiereguiluz approved these changes Dec 20, 2019

View reviewed changes

yceruto approved these changes Dec 20, 2019

View reviewed changes

fre5h force-pushed the feature-inputmode branch from 081a28c to 6467f0d Compare December 26, 2019 09:24

[Form] Added default inputmode attribute to Search, Email and Tel f…

dbc500f

…orm types

nicolas-grekas force-pushed the feature-inputmode branch from 6467f0d to dbc500f Compare December 26, 2019 09:32

nicolas-grekas mentioned this pull request Dec 26, 2019

[Form] Added default inputmode attribute to Search, Email and Tel for… symfony/symfony-docs#12851

Closed

nicolas-grekas merged commit dbc500f into symfony:master Dec 26, 2019

fre5h deleted the feature-inputmode branch December 26, 2019 09:34

staabm mentioned this pull request Dec 29, 2019

Input modes verwenden redaxo/redaxo#3067

Closed

5 tasks

nicolas-grekas modified the milestones: next, 5.1 May 4, 2020

fabpot mentioned this pull request May 5, 2020

Release v5.1.0-BETA1 #36713

Merged

MatTheCat mentioned this pull request May 19, 2020

[Form] don't add the inputmode attribute on fields whose type is the same #36869

Merged

symfony-splitter pushed a commit to symfony/form that referenced this pull request May 22, 2020

Revert symfony/symfony#34986

4e5dd95

This was referenced Jan 21, 2022

[Form] Add inputmode=email/numeric/search/tel to form types #45099

Closed

[Form] Add inputmode attribute on NumberType #45101

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

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

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

Conversation

tel inputmode

email inputmode

search inputmode

Choose a reason for hiding this comment

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

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

`tel` inputmode

`email` inputmode

`search` inputmode