Fixed #35601 -- Added TelInput widget.

7 files changed, 46 insertions, 0 deletions

diff --git a/AUTHORS b/AUTHORS
index 11ba2c89a4..31f1b96313 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -624,6 +624,7 @@ answer newbie questions, and generally made Django that much better:
     Lowe Thiderman <lowe.thiderman@gmail.com>
     Luan Pablo <luanpab@gmail.com>
     Lucas Connors <https://www.revolutiontech.ca/>
+    Lucas Esposito <espositolucas95@gmail.com>
     Luciano Ramalho
     Lucidiot <lucidiot@brainshit.fr>
     Ludvig Ericson <ludvig.ericson@gmail.com>
diff --git a/django/forms/jinja2/django/forms/widgets/tel.html b/django/forms/jinja2/django/forms/widgets/tel.html
new file mode 100644
index 0000000000..08b1e61c0b
--- /dev/null
+++ b/django/forms/jinja2/django/forms/widgets/tel.html
@@ -0,0 +1 @@
+{% include "django/forms/widgets/input.html" %}
diff --git a/django/forms/templates/django/forms/widgets/tel.html b/django/forms/templates/django/forms/widgets/tel.html
new file mode 100644
index 0000000000..08b1e61c0b
--- /dev/null
+++ b/django/forms/templates/django/forms/widgets/tel.html
@@ -0,0 +1 @@
+{% include "django/forms/widgets/input.html" %}
diff --git a/django/forms/widgets.py b/django/forms/widgets.py
index f1e233865c..ca5f2724db 100644
--- a/django/forms/widgets.py
+++ b/django/forms/widgets.py
@@ -32,6 +32,7 @@ __all__ = (
     "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"
diff --git a/docs/ref/forms/widgets.txt b/docs/ref/forms/widgets.txt
index bd970f1517..0a7a415583 100644
--- a/docs/ref/forms/widgets.txt
+++ b/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``
 ~~~~~~~~~~~~~~~~~
 
diff --git a/docs/releases/5.2.txt b/docs/releases/5.2.txt
index cb57b9255c..60794ac8ed 100644
--- a/docs/releases/5.2.txt
+++ b/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
 ~~~~~~~~~~~~~
 
diff --git a/tests/forms_tests/widget_tests/test_telinput.py b/tests/forms_tests/widget_tests/test_telinput.py
new file mode 100644
index 0000000000..1477f153d1
--- /dev/null
+++ b/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">'
+        )