Fixed #19686 -- Added HTML5 number input type

Thanks Simon Charette for his help on the patch. Refs #16630.

3 files changed, 66 insertions, 35 deletions

diff --git a/tests/regressiontests/forms/tests/fields.py b/tests/regressiontests/forms/tests/fields.py
index fc7fc70da4..3fe2cd2ace 100644
--- a/tests/regressiontests/forms/tests/fields.py
+++ b/tests/regressiontests/forms/tests/fields.py
@@ -35,7 +35,6 @@ from decimal import Decimal
 from django.core.files.uploadedfile import SimpleUploadedFile
 from django.forms import *
 from django.test import SimpleTestCase
-from django.utils import formats
 from django.utils import six
 from django.utils._os import upath
 
@@ -131,6 +130,7 @@ class FieldsTests(SimpleTestCase):
 
     def test_integerfield_1(self):
         f = IntegerField()
+        self.assertWidgetRendersTo(f, '<input type="number" name="f" id="id_f" />')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, '')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, None)
         self.assertEqual(1, f.clean('1'))
@@ -165,6 +165,7 @@ class FieldsTests(SimpleTestCase):
 
     def test_integerfield_3(self):
         f = IntegerField(max_value=10)
+        self.assertWidgetRendersTo(f, '<input max="10" type="number" name="f" id="id_f" />')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, None)
         self.assertEqual(1, f.clean(1))
         self.assertEqual(10, f.clean(10))
@@ -176,6 +177,7 @@ class FieldsTests(SimpleTestCase):
 
     def test_integerfield_4(self):
         f = IntegerField(min_value=10)
+        self.assertWidgetRendersTo(f, '<input id="id_f" type="number" name="f" min="10" />')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, None)
         self.assertRaisesMessage(ValidationError, "'Ensure this value is greater than or equal to 10.'", f.clean, 1)
         self.assertEqual(10, f.clean(10))
@@ -187,6 +189,7 @@ class FieldsTests(SimpleTestCase):
 
     def test_integerfield_5(self):
         f = IntegerField(min_value=10, max_value=20)
+        self.assertWidgetRendersTo(f, '<input id="id_f" max="20" type="number" name="f" min="10" />')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, None)
         self.assertRaisesMessage(ValidationError, "'Ensure this value is greater than or equal to 10.'", f.clean, 1)
         self.assertEqual(10, f.clean(10))
@@ -198,10 +201,19 @@ class FieldsTests(SimpleTestCase):
         self.assertEqual(f.max_value, 20)
         self.assertEqual(f.min_value, 10)
 
+    def test_integerfield_localized(self):
+        """
+        Make sure localized IntegerField's widget renders to a text input with
+        no number input specific attributes.
+        """
+        f1 = IntegerField(localize=True)
+        self.assertWidgetRendersTo(f1, '<input id="id_f" name="f" type="text" />')
+
     # FloatField ##################################################################
 
     def test_floatfield_1(self):
         f = FloatField()
+        self.assertWidgetRendersTo(f, '<input step="any" type="number" name="f" id="id_f" />')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, '')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, None)
         self.assertEqual(1.0, f.clean('1'))
@@ -228,6 +240,7 @@ class FieldsTests(SimpleTestCase):
 
     def test_floatfield_3(self):
         f = FloatField(max_value=1.5, min_value=0.5)
+        self.assertWidgetRendersTo(f, '<input step="any" name="f" min="0.5" max="1.5" type="number" id="id_f" />')
         self.assertRaisesMessage(ValidationError, "'Ensure this value is less than or equal to 1.5.'", f.clean, '1.6')
         self.assertRaisesMessage(ValidationError, "'Ensure this value is greater than or equal to 0.5.'", f.clean, '0.4')
         self.assertEqual(1.5, f.clean('1.5'))
@@ -235,10 +248,19 @@ class FieldsTests(SimpleTestCase):
         self.assertEqual(f.max_value, 1.5)
         self.assertEqual(f.min_value, 0.5)
 
+    def test_floatfield_localized(self):
+        """
+        Make sure localized FloatField's widget renders to a text input with
+        no number input specific attributes.
+        """
+        f = FloatField(localize=True)
+        self.assertWidgetRendersTo(f, '<input id="id_f" name="f" type="text" />')
+
     # DecimalField ################################################################
 
     def test_decimalfield_1(self):
         f = DecimalField(max_digits=4, decimal_places=2)
+        self.assertWidgetRendersTo(f, '<input id="id_f" step="0.01" type="number" name="f" maxlength="6" />')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, '')
         self.assertRaisesMessage(ValidationError, "'This field is required.'", f.clean, None)
         self.assertEqual(f.clean('1'), Decimal("1"))
@@ -284,6 +306,7 @@ class FieldsTests(SimpleTestCase):
 
     def test_decimalfield_3(self):
         f = DecimalField(max_digits=4, decimal_places=2, max_value=Decimal('1.5'), min_value=Decimal('0.5'))
+        self.assertWidgetRendersTo(f, '<input step="0.01" name="f" min="0.5" max="1.5" maxlength="6" type="number" id="id_f" />')
         self.assertRaisesMessage(ValidationError, "'Ensure this value is less than or equal to 1.5.'", f.clean, '1.6')
         self.assertRaisesMessage(ValidationError, "'Ensure this value is greater than or equal to 0.5.'", f.clean, '0.4')
         self.assertEqual(f.clean('1.5'), Decimal("1.5"))
@@ -315,6 +338,14 @@ class FieldsTests(SimpleTestCase):
         self.assertEqual(f.clean('.01'), Decimal(".01"))
         self.assertRaisesMessage(ValidationError, "'Ensure that there are no more than 0 digits before the decimal point.'", f.clean, '1.1')
 
+    def test_decimalfield_localized(self):
+        """
+        Make sure localized DecimalField's widget renders to a text input with
+        no number input specific attributes.
+        """
+        f = DecimalField(localize=True)
+        self.assertWidgetRendersTo(f, '<input id="id_f" name="f" type="text" />')
+
     # DateField ###################################################################
 
     def test_datefield_1(self):
diff --git a/tests/regressiontests/forms/tests/forms.py b/tests/regressiontests/forms/tests/forms.py
index f2fa78e229..f856e30d33 100644
--- a/tests/regressiontests/forms/tests/forms.py
+++ b/tests/regressiontests/forms/tests/forms.py
@@ -1740,7 +1740,7 @@ class FormsTestCase(TestCase):
 <option value="3">No</option>
 </select></li>
 <li><label for="id_email">Email:</label> <input type="email" name="email" id="id_email" /></li>
-<li class="required error"><ul class="errorlist"><li>This field is required.</li></ul><label for="id_age">Age:</label> <input type="text" name="age" id="id_age" /></li>""")
+<li class="required error"><ul class="errorlist"><li>This field is required.</li></ul><label for="id_age">Age:</label> <input type="number" name="age" id="id_age" /></li>""")
 
         self.assertHTMLEqual(p.as_p(), """<ul class="errorlist"><li>This field is required.</li></ul>
 <p class="required error"><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" /></p>
@@ -1751,7 +1751,7 @@ class FormsTestCase(TestCase):
 </select></p>
 <p><label for="id_email">Email:</label> <input type="email" name="email" id="id_email" /></p>
 <ul class="errorlist"><li>This field is required.</li></ul>
-<p class="required error"><label for="id_age">Age:</label> <input type="text" name="age" id="id_age" /></p>""")
+<p class="required error"><label for="id_age">Age:</label> <input type="number" name="age" id="id_age" /></p>""")
 
         self.assertHTMLEqual(p.as_table(), """<tr class="required error"><th><label for="id_name">Name:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="name" id="id_name" /></td></tr>
 <tr class="required"><th><label for="id_is_cool">Is cool:</label></th><td><select name="is_cool" id="id_is_cool">
@@ -1760,7 +1760,7 @@ class FormsTestCase(TestCase):
 <option value="3">No</option>
 </select></td></tr>
 <tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" id="id_email" /></td></tr>
-<tr class="required error"><th><label for="id_age">Age:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="age" id="id_age" /></td></tr>""")
+<tr class="required error"><th><label for="id_age">Age:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="number" name="age" id="id_age" /></td></tr>""")
 
     def test_label_split_datetime_not_displayed(self):
         class EventForm(Form):
diff --git a/tests/regressiontests/forms/tests/formsets.py b/tests/regressiontests/forms/tests/formsets.py
index 573a8f6a6d..2bef0c5c33 100644
--- a/tests/regressiontests/forms/tests/formsets.py
+++ b/tests/regressiontests/forms/tests/formsets.py
@@ -53,7 +53,7 @@ class FormsFormsetTestCase(TestCase):
         formset = ChoiceFormSet(auto_id=False, prefix='choices')
         self.assertHTMLEqual(str(formset), """<input type="hidden" name="choices-TOTAL_FORMS" value="1" /><input type="hidden" name="choices-INITIAL_FORMS" value="0" /><input type="hidden" name="choices-MAX_NUM_FORMS" value="1000" />
 <tr><th>Choice:</th><td><input type="text" name="choices-0-choice" /></td></tr>
-<tr><th>Votes:</th><td><input type="text" name="choices-0-votes" /></td></tr>""")
+<tr><th>Votes:</th><td><input type="number" name="choices-0-votes" /></td></tr>""")
 
         # On thing to note is that there needs to be a special value in the data. This
         # value tells the FormSet how many forms were displayed so it can tell how
@@ -137,9 +137,9 @@ class FormsFormsetTestCase(TestCase):
             form_output.append(form.as_ul())
 
         self.assertHTMLEqual('\n'.join(form_output), """<li>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" value="100" /></li>
+<li>Votes: <input type="number" name="choices-0-votes" value="100" /></li>
 <li>Choice: <input type="text" name="choices-1-choice" /></li>
-<li>Votes: <input type="text" name="choices-1-votes" /></li>""")
+<li>Votes: <input type="number" name="choices-1-votes" /></li>""")
 
         # Let's simulate what would happen if we submitted this form.
 
@@ -210,11 +210,11 @@ class FormsFormsetTestCase(TestCase):
             form_output.append(form.as_ul())
 
         self.assertHTMLEqual('\n'.join(form_output), """<li>Choice: <input type="text" name="choices-0-choice" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" /></li>
+<li>Votes: <input type="number" name="choices-0-votes" /></li>
 <li>Choice: <input type="text" name="choices-1-choice" /></li>
-<li>Votes: <input type="text" name="choices-1-votes" /></li>
+<li>Votes: <input type="number" name="choices-1-votes" /></li>
 <li>Choice: <input type="text" name="choices-2-choice" /></li>
-<li>Votes: <input type="text" name="choices-2-votes" /></li>""")
+<li>Votes: <input type="number" name="choices-2-votes" /></li>""")
 
         # Since we displayed every form as blank, we will also accept them back as blank.
         # This may seem a little strange, but later we will show how to require a minimum
@@ -301,19 +301,19 @@ class FormsFormsetTestCase(TestCase):
             form_output.append(form.as_ul())
 
         self.assertHTMLEqual('\n'.join(form_output), """<li>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" value="100" /></li>
+<li>Votes: <input type="number" name="choices-0-votes" value="100" /></li>
 <li>Choice: <input type="text" name="choices-1-choice" /></li>
-<li>Votes: <input type="text" name="choices-1-votes" /></li>
+<li>Votes: <input type="number" name="choices-1-votes" /></li>
 <li>Choice: <input type="text" name="choices-2-choice" /></li>
-<li>Votes: <input type="text" name="choices-2-votes" /></li>
+<li>Votes: <input type="number" name="choices-2-votes" /></li>
 <li>Choice: <input type="text" name="choices-3-choice" /></li>
-<li>Votes: <input type="text" name="choices-3-votes" /></li>""")
+<li>Votes: <input type="number" name="choices-3-votes" /></li>""")
 
         # Make sure retrieving an empty form works, and it shows up in the form list
 
         self.assertTrue(formset.empty_form.empty_permitted)
         self.assertHTMLEqual(formset.empty_form.as_ul(), """<li>Choice: <input type="text" name="choices-__prefix__-choice" /></li>
-<li>Votes: <input type="text" name="choices-__prefix__-votes" /></li>""")
+<li>Votes: <input type="number" name="choices-__prefix__-votes" /></li>""")
 
     def test_formset_with_deletion(self):
         # FormSets with deletion ######################################################
@@ -331,13 +331,13 @@ class FormsFormsetTestCase(TestCase):
             form_output.append(form.as_ul())
 
         self.assertHTMLEqual('\n'.join(form_output), """<li>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" value="100" /></li>
+<li>Votes: <input type="number" name="choices-0-votes" value="100" /></li>
 <li>Delete: <input type="checkbox" name="choices-0-DELETE" /></li>
 <li>Choice: <input type="text" name="choices-1-choice" value="Fergie" /></li>
-<li>Votes: <input type="text" name="choices-1-votes" value="900" /></li>
+<li>Votes: <input type="number" name="choices-1-votes" value="900" /></li>
 <li>Delete: <input type="checkbox" name="choices-1-DELETE" /></li>
 <li>Choice: <input type="text" name="choices-2-choice" /></li>
-<li>Votes: <input type="text" name="choices-2-votes" /></li>
+<li>Votes: <input type="number" name="choices-2-votes" /></li>
 <li>Delete: <input type="checkbox" name="choices-2-DELETE" /></li>""")
 
         # To delete something, we just need to set that form's special delete field to
@@ -428,14 +428,14 @@ class FormsFormsetTestCase(TestCase):
             form_output.append(form.as_ul())
 
         self.assertHTMLEqual('\n'.join(form_output), """<li>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" value="100" /></li>
-<li>Order: <input type="text" name="choices-0-ORDER" value="1" /></li>
+<li>Votes: <input type="number" name="choices-0-votes" value="100" /></li>
+<li>Order: <input type="number" name="choices-0-ORDER" value="1" /></li>
 <li>Choice: <input type="text" name="choices-1-choice" value="Fergie" /></li>
-<li>Votes: <input type="text" name="choices-1-votes" value="900" /></li>
-<li>Order: <input type="text" name="choices-1-ORDER" value="2" /></li>
+<li>Votes: <input type="number" name="choices-1-votes" value="900" /></li>
+<li>Order: <input type="number" name="choices-1-ORDER" value="2" /></li>
 <li>Choice: <input type="text" name="choices-2-choice" /></li>
-<li>Votes: <input type="text" name="choices-2-votes" /></li>
-<li>Order: <input type="text" name="choices-2-ORDER" /></li>""")
+<li>Votes: <input type="number" name="choices-2-votes" /></li>
+<li>Order: <input type="number" name="choices-2-ORDER" /></li>""")
 
         data = {
             'choices-TOTAL_FORMS': '3', # the number of forms rendered
@@ -539,20 +539,20 @@ class FormsFormsetTestCase(TestCase):
             form_output.append(form.as_ul())
 
         self.assertHTMLEqual('\n'.join(form_output), """<li>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" value="100" /></li>
-<li>Order: <input type="text" name="choices-0-ORDER" value="1" /></li>
+<li>Votes: <input type="number" name="choices-0-votes" value="100" /></li>
+<li>Order: <input type="number" name="choices-0-ORDER" value="1" /></li>
 <li>Delete: <input type="checkbox" name="choices-0-DELETE" /></li>
 <li>Choice: <input type="text" name="choices-1-choice" value="Fergie" /></li>
-<li>Votes: <input type="text" name="choices-1-votes" value="900" /></li>
-<li>Order: <input type="text" name="choices-1-ORDER" value="2" /></li>
+<li>Votes: <input type="number" name="choices-1-votes" value="900" /></li>
+<li>Order: <input type="number" name="choices-1-ORDER" value="2" /></li>
 <li>Delete: <input type="checkbox" name="choices-1-DELETE" /></li>
 <li>Choice: <input type="text" name="choices-2-choice" value="The Decemberists" /></li>
-<li>Votes: <input type="text" name="choices-2-votes" value="500" /></li>
-<li>Order: <input type="text" name="choices-2-ORDER" value="3" /></li>
+<li>Votes: <input type="number" name="choices-2-votes" value="500" /></li>
+<li>Order: <input type="number" name="choices-2-ORDER" value="3" /></li>
 <li>Delete: <input type="checkbox" name="choices-2-DELETE" /></li>
 <li>Choice: <input type="text" name="choices-3-choice" /></li>
-<li>Votes: <input type="text" name="choices-3-votes" /></li>
-<li>Order: <input type="text" name="choices-3-ORDER" /></li>
+<li>Votes: <input type="number" name="choices-3-votes" /></li>
+<li>Order: <input type="number" name="choices-3-ORDER" /></li>
 <li>Delete: <input type="checkbox" name="choices-3-DELETE" /></li>""")
 
         # Let's delete Fergie, and put The Decemberists ahead of Calexico.
@@ -956,19 +956,19 @@ class FormsetAsFooTests(TestCase):
         formset = ChoiceFormSet(data, auto_id=False, prefix='choices')
         self.assertHTMLEqual(formset.as_table(),"""<input type="hidden" name="choices-TOTAL_FORMS" value="1" /><input type="hidden" name="choices-INITIAL_FORMS" value="0" /><input type="hidden" name="choices-MAX_NUM_FORMS" value="0" />
 <tr><th>Choice:</th><td><input type="text" name="choices-0-choice" value="Calexico" /></td></tr>
-<tr><th>Votes:</th><td><input type="text" name="choices-0-votes" value="100" /></td></tr>""")
+<tr><th>Votes:</th><td><input type="number" name="choices-0-votes" value="100" /></td></tr>""")
 
     def test_as_p(self):
         formset = ChoiceFormSet(data, auto_id=False, prefix='choices')
         self.assertHTMLEqual(formset.as_p(),"""<input type="hidden" name="choices-TOTAL_FORMS" value="1" /><input type="hidden" name="choices-INITIAL_FORMS" value="0" /><input type="hidden" name="choices-MAX_NUM_FORMS" value="0" />
 <p>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></p>
-<p>Votes: <input type="text" name="choices-0-votes" value="100" /></p>""")
+<p>Votes: <input type="number" name="choices-0-votes" value="100" /></p>""")
 
     def test_as_ul(self):
         formset = ChoiceFormSet(data, auto_id=False, prefix='choices')
         self.assertHTMLEqual(formset.as_ul(),"""<input type="hidden" name="choices-TOTAL_FORMS" value="1" /><input type="hidden" name="choices-INITIAL_FORMS" value="0" /><input type="hidden" name="choices-MAX_NUM_FORMS" value="0" />
 <li>Choice: <input type="text" name="choices-0-choice" value="Calexico" /></li>
-<li>Votes: <input type="text" name="choices-0-votes" value="100" /></li>""")
+<li>Votes: <input type="number" name="choices-0-votes" value="100" /></li>""")
 
 
 # Regression test for #11418 #################################################