The autocomplete attribute and disabled attribute are attributes frequently used for forms. The autocomplete attribute is used for setting the autocomplete functionality. The disabled attribute is used for disabling user input for the form component.

Autocomplete

The default value of the autocomplete attribute is "on". If you don't want to have the autocomplete functionality for a specific form, add autocomplete="off" in the <input> tag.

Disabled attribute

You may want to prevent a user from submitting a form until the user completes all actions required. Or, you may want to prohibit a user to select one of the listed options. For these cases, you can use the disabled attribute. To implement this, what you need to do is just add the "disabled" keyword in the tags you want to disable.

Practice

Objective:
Turn off autocomplete for input fields and disable some form components

1. Add new code in the body section of the HTML document

Open chapter6.html with VS Code (the file used in the previous practice).
Copy the code for input fields, text area and submit button created earlier in this chapter.
Paste the code before the </body> tag and adjust the code:
- add autocomplete="off" in the <input> tags, and
- add disabled in the <textarea> and <button> tags.

chapter6.html

<h3>5. Auto Complete and Disabled</h3>
<form>
  <input type="text" placeholder="username" name="username" autocomplete="off">
  <input type="email" placeholder="email" name="email" autocomplete="off">
  <textarea placeholder="comment" name="comment" disabled></textarea>
  <button type="submit" disabled>Send</button>
</form>

After editing the file, make sure that you save it (⌘ + S for Mac, Ctrl + S for Windows).

2. Check the result with a browser

Open chapter6.html with a browser.
Now you can see that the autocomplete functionality is not working for the input fields; the text area and submit button are disabled.

You can also check the sample result here (Demo Site).

HTML & CSS Introduction

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

HTML & CSS Introduction

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

test