Fixed #35601 -- Added TelInput widget.

AUTHORS

@@ -624,6 +624,7 @@ answer newbie questions, and generally made Django that much better:
     Lowe Thiderman <[email protected]>
     Luan Pablo <[email protected]>
     Lucas Connors <https://www.revolutiontech.ca/>
+    Lucas Esposito <[email protected]>
     Luciano Ramalho
     Lucidiot <[email protected]>
     Ludvig Ericson <[email protected]>

django/forms/jinja2/django/forms/widgets/tel.html

@@ -0,0 +1 @@
+{% include "django/forms/widgets/input.html" %}

django/forms/templates/django/forms/widgets/tel.html

@@ -0,0 +1 @@
+{% include "django/forms/widgets/input.html" %}

django/forms/widgets.py

@@ -32,6 +32,7 @@
     "URLInput",
     "ColorInput",
     "SearchInput",
+    "TelInput",
     "PasswordInput",
     "HiddenInput",
     "MultipleHiddenInput",
@@ -365,6 +366,11 @@ class SearchInput(Input):
     template_name = "django/forms/widgets/search.html"
 
 
+class TelInput(Input):
+    input_type = "tel"
+    template_name = "django/forms/widgets/tel.html"
+
+
 class PasswordInput(Input):
     input_type = "password"
     template_name = "django/forms/widgets/password.html"

docs/ref/forms/widgets.txt

@@ -580,6 +580,28 @@ These widgets make use of the HTML elements ``input`` and ``textarea``.
     * ``template_name``: ``'django/forms/widgets/search.html'``
     * Renders as: ``<input type="search" ...>``
 
+``TelInput``
+~~~~~~~~~~~~~~
+
+.. versionadded:: 5.2
+
+.. class:: TelInput
+
+    * ``input_type``: ``'tel'``
+    * ``template_name``: ``'django/forms/widgets/tel.html'``
+    * Renders as: ``<input type="tel" ...>``
+
+    Browsers perform no client-side validation by default because telephone
+    number formats vary so much around the world. You can add some by setting
+    ``pattern``, ``minlength``, or ``maxlength`` in the :attr:`Widget.attrs`
+    argument.
+
+    Additionally, you can add server-side validation to your form field with a
+    validator like :class:`~django.core.validators.RegexValidator` or via
+    third-party packages, such as `django-phonenumber-field`_.
+
+.. _django-phonenumber-field: https://django-phonenumber-field.readthedocs.io/en/latest/index.html
+
 ``PasswordInput``
 ~~~~~~~~~~~~~~~~~
 

docs/releases/5.2.txt

@@ -173,6 +173,9 @@ Forms
 * The new :class:`~django.forms.SearchInput` form widget is for entering search
   queries and renders as ``<input type="search" ...>``.
 
+* The new :class:`~django.forms.TelInput` form widget is for entering telephone
+  numbers and renders as ``<input type="tel" ...>``.
+
 Generic Views
 ~~~~~~~~~~~~~
 

tests/forms_tests/widget_tests/test_telinput.py

@@ -0,0 +1,12 @@
+from django.forms import TelInput
+
+from .base import WidgetTest
+
+
+class TelInputTest(WidgetTest):
+    widget = TelInput()
+
+    def test_render(self):
+        self.check_html(
+            self.widget, "telephone", "", html='<input type="tel" name="telephone">'
+        )