More Input Attributes
=====================

We practiced using just a few of the available attributes for the ``input``
element: ``type``, ``value``, ``name``, ``id``, ``selected``, and ``disabled``.
However, there are many more. For a complete list and descriptions of the
``input`` attributes, check out
`W3Schools <https://www.w3schools.com/tags/tag_input.asp>`__.

Let's look at a few more possibilities.

Placeholder Text
----------------

The ``label`` element for a text input should clearly tell a user what
information needs to go inside the field. An extra hint can be given by
including a ``value`` attribute inside the ``<input>`` tag. This puts some
default text in the field when the page first loads.

One problem with using default text occurs when a user clicks *Submit* without
changing the value in the box. When this happens, the default information is
sent to the server as the user's entry. It would be nice if we could include
some helpful text inside an input box, but prevent that text from getting sent
to the server.

As expected, we can do that! The ``placeholder`` attribute lets us show some
temporary text inside an input field. Once the user starts typing, the
placeholder is immediately replaced by their entry. If the user clicks *Submit*
without typing anything at all, then the empty string is sent to the server.

.. admonition:: Try It!

   Compare the behavior of the ``value`` and ``placeholder`` attributes.

   .. raw:: html

      <iframe src="https://trinket.io/embed/html/15f7093b7b" width="100%" height="450" frameborder="1" marginwidth="0" marginheight="0" allowfullscreen></iframe>

   #. Type a response into each of the fields in the top half of the form. How
      does the default text behave?
   #. Type a response into each of the bottom two fields. How does the behavior
      of ``placeholder`` text differ from ``value`` text?
   #. Return to your ``index.html`` form. Save and commit your work, then
      switch back to the ``main`` branch.
   #. Update the form to include an input that uses ``value`` to add some
      default text. Also include another input field that uses the
      ``placeholder`` attribute instead.
   #. Save the changes, then open ``index.html`` in your browser. Submit the
      form to the parrot server. Do this once with and once without changing
      the text inside the input fields. Note how the key/value pairs get
      assigned in each case.

Resetting a Form
----------------

Sometimes it's necessary for a user to completely clear their work from a form
and start over. Rather than refresh the entire webpage, we can include a
*Reset* button to help with this. Clicking the button clears all of the input
fields and returns them to their original state.

A reset button is another ``type`` we can include inside the ``<input>`` tag.
the syntax is:

.. sourcecode:: html

   <input type="reset"/>

No other attributes are required. However, if we want the button to say
something other than ``Reset``, we can include a ``value`` attribute.

.. admonition:: Example

   Type some data into the form below, then clear your entries with the
   button.

   .. sourcecode:: html
      :linenos:

      <form method="POST">
         <label>Username:
            <input type="text" name="user" placeholder="Enter your username."/>
         </label><br>
         <label>Password:
            <input type="password" name="pass" placeholder="Enter your password"/>
         </label><br>
         <input type="reset" value="Clear Form"/>
      </form>
   
   .. raw:: html

      <form method="POST">
         <label>Username:
            <input type="text" name="user" placeholder="Enter your username."/>
         </label><br>
         <label>Password:
            <input type="password" name="pass" placeholder="Enter your password"/>
         </label><br>
         <input type="reset" value="Clear Form"/>
      </form>

Reset buttons only clear the inputs within the same form. If we have two
or more ``form`` elements on a page, each one needs its own button.

The ``reset`` type also works on radio buttons and select inputs! This gives us
another way to help the users avoid getting stuck with an unwanted selection.

.. admonition:: Try It!

   #. Return to the ``checkbox``, ``radio``, and ``select`` branches in your
      repository.
   #. In each form, add a ``reset`` input.
   #. Save the changes, then open ``index.html`` in your browser to try out the
      buttons!

   .. raw:: html

      <form method="POST">
         <table>
            <tr>
               <td style="padding:10px">
                  <label><input type="checkbox" value="red" name="colors"/> Red</label><br>
                  <label><input type="checkbox" value="green" name="colors"/> Green</label><br>
                  <label><input type="checkbox" value="blue" name="colors"/> Blue</label>
               </td>
               <td style="padding:10px">
                  <label><input type="radio" value="red" name="color"/> Red</label><br>
                  <label><input type="radio" value="green" name="color"/> Green</label><br>
                  <label><input type="radio" value="blue" name="color"/> Blue</label>
               </td>
               <td style="padding:10px">
                  <select name="menu-color">
                     <option value="" disabled selected>Select a color:</option>
                     <option value="red">Red</option>
                     <option value="green">Green</option>
                     <option value="blue">Blue</option>
                  </select>
               </td>
            </tr>
         </table>
         <input type="reset"/>
      </form>

Enable/Disable Input Fields
---------------------------

By default, every ``input`` element is in an active state. Users can click on
the elements and interact with them. However, adding the ``disabled`` attribute
inside the ``<input>`` tag will prevent it from being used.

.. sourcecode:: html

   <input type="..." name="..." disabled/>

The ``disabled`` tag works with any type of input, including buttons.

.. admonition:: Example

   Try clicking on each active vs. disabled input field.

   .. raw:: html

      <form method="POST">
         <label>Active text input: <input type="text" value="Active"/></label><br>
         <label>Disabled text input: <input type="text" value="Disabled" disabled/></label><br>
         <label><input type="checkbox" name="color"/> Red (active)</label><br>
         <label><input type="checkbox" name="color" disabled/> Green (disabled)</label><br>
         <input type="reset" value="Clear (active)"/>
         <input type="reset" value="Clear (disabled)" disabled/>
      </form>

Default Selections
^^^^^^^^^^^^^^^^^^

With checkboxes, radio buttons, and select menus, we can automatically select
one of the items from the list of choices.

For ``checkbox`` and ``radio`` inputs, include the ``checked`` attribute inside
the ``<input>`` tag. For drop-down menus, include the ``selected`` attribute
inside the ``<option>`` tag.

.. sourcecode:: html

   <input type="checkbox" name="..." value="..." checked/>
   <input type="radio" name="..." value="..." checked/>
   <option value="..." selected/>...</option>

.. admonition:: Tip

   For radio groups and select menus, it's a good idea to set a default
   option when the page first loads.

Try It!
^^^^^^^

#. Return to your ``index.html`` form. Experiment with disabling some of the
   input fields, the *Submit* button, or the *Reset* button.
#. Use the ``checked`` attribute to pre-select one option in your checkbox and
   radio forms.
#. Try adding ``checked`` to multiple options in the checkbox group.
#. What happens if you add ``checked`` to more than one radio input in a
   group?