20.7. 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.

Let’s look at a few more possibilities.

20.7.1. 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.

Try It!

Compare the behavior of the value and placeholder attributes.

1. Type a response into each of the fields in the top half of the form. How does the default text behave?

2. Type a response into each of the bottom two fields. How does the behavior of placeholder text differ from value text?

3. Return to your index.html form. Save and commit your work, then switch back to the main branch.

4. 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.

5. 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.

20.7.2. 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:

<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.

Example

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

<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>

Username:
Password:

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.

Try It!

1. Return to the checkbox, radio, and select branches in your repository.

2. In each form, add a reset input.

3. Save the changes, then open index.html in your browser to try out the buttons!

Red Green Blue

Red Green Blue

Select a color: Red Green Blue

20.7.3. 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.

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

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

Example

Try clicking on each active vs. disabled input field.

Active text input:
Disabled text input:
Red (active)
Green (disabled)

20.7.3.1. 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.

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

Tip

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

20.7.3.2. Try It!

1. Return to your index.html form. Experiment with disabling some of the input fields, the Submit button, or the Reset button.

2. Use the checked attribute to pre-select one option in your checkbox and radio forms.

3. Try adding checked to multiple options in the checkbox group.

4. What happens if you add checked to more than one radio input in a group?