Text Inputs =========== Our first basic web form included two simple text inputs. The fields allowed us to enter whatever we wanted, and they displayed everything we typed on the keyboard. Inside the ``input`` tag, the ``type="text"`` attribute set up this behavior. We also saw how to use ``type="password"`` to set up a field that hides what the user enters. Besides ``text`` and ``password``, there are other options we can assign to the ``type`` attribute. Each one changes how the input field acts on the screen. The table below summarizes several common ``type`` options. Try out each field in the *Demo* column to see how it behaves. .. admonition:: Note Form inputs will NOT look exactly the same in all browsers. However, the inputs should function the same way. Use ``_, if you ever need to answer a question about browser support for a certain feature. .. role:: raw-html(raw) :format: html .. list-table:: Different Text Input Types :header-rows: 1 * - Type - Syntax - Description - Demo * - text - ```` - A single line text field. - :raw-html:`` * - password - ```` - The field hides the text typed by the user. - :raw-html:`` * - number - ```` - Provides an *increase/decrease* option in the field. Also, creates an error message if the user tries to submit a non-numerical entry. Optional ``min`` and ``max`` attributes restrict the range. - :raw-html:`` * - email - ```` - Requires the user to enter an email address with the format ``text@server``. The browser displays an error message if the user tries to submit an invalid address. - :raw-html:`` * - date - ```` - The browser checks that the entered value has a valid date format. Some browsers provide a *date picker* when the input field is clicked. - :raw-html:`` * - time - ```` - The browser checks that the field contains a valid time format. Some browsers provide a *time picker*. - :raw-html:`` Try It! ------- .. _client-side-validation: Return to your ``index.html`` form. #. Save and commit the changes you made from the previous page. #. Change one input type to ``number``. Use the ``max`` and ``min`` attributes to set the allowed range between ``1`` and ``5``. #. Save the change, then refresh the page in your browser. Try to submit the form with invalid entries in the field (e.g. ``abc``, ``-38``, or ``3.33``). What happens? #. Change a different input type to ``email``. Try submitting an entry without the ``@`` symbol. When ``@`` is included, does text have to appear on both sides of the symbol? .. index:: ! client-side validation single: form; client-side validation By choosing different HTML input types, we can add **client-side validation** to our forms. This means that the browser will prevent form submission if any of the input fields contain invalid data. .. figure:: figures/number-validation.png :alt: Form showing an error message for an invalid number input. The user tried to submit a number outside of the allowed range. A Larger Text Input Field ------------------------- Sometimes, we need a larger text box to accept multi-line user input. In these cases, we use the ``textarea`` HTML element instead of ``input``. It functions exactly the same way as the input type ``text``, and it has its own set of useful attributes. On a webpage, the field also includes a resizing tab in the lower-right corner. Unlike ``input``, the ``textarea`` element does require a closing tag: .. sourcecode:: html .. admonition:: Try It! In the editor below, experiment with the ``textarea`` element: #. Enter some text in the field. What happens when you reach the end of a line? What happens when you tap *Enter*? #. Use the resizing tab to expand or shrink the field. #. What happens when you add text between the two ``