From b478cae00643d6730746f2614792b35a7d3187ff Mon Sep 17 00:00:00 2001 From: lucasesposito Date: Fri, 19 Jul 2024 01:26:46 +0200 Subject: [PATCH] Fixed #35601 -- Added TelInput widget. --- AUTHORS | 1 + .../jinja2/django/forms/widgets/tel.html | 1 + .../templates/django/forms/widgets/tel.html | 1 + django/forms/widgets.py | 6 +++++ docs/ref/forms/widgets.txt | 22 +++++++++++++++++++ docs/releases/5.2.txt | 3 +++ .../forms_tests/widget_tests/test_telinput.py | 12 ++++++++++ 7 files changed, 46 insertions(+) create mode 100644 django/forms/jinja2/django/forms/widgets/tel.html create mode 100644 django/forms/templates/django/forms/widgets/tel.html create mode 100644 tests/forms_tests/widget_tests/test_telinput.py 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 Luan Pablo Lucas Connors + Lucas Esposito Luciano Ramalho Lucidiot Ludvig Ericson 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: ```` +``TelInput`` +~~~~~~~~~~~~~~ + +.. versionadded:: 5.2 + +.. class:: TelInput + + * ``input_type``: ``'tel'`` + * ``template_name``: ``'django/forms/widgets/tel.html'`` + * Renders as: ```` + + 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 ````. +* The new :class:`~django.forms.TelInput` form widget is for entering telephone + numbers and renders as ````. + 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='' + )