Auto Complete and Disabled
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
disabledin the<textarea>and<button>tags.
- add
<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 
).
demo codeThe 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
disabledin the<textarea>and<button>tags.
- add
<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 ).
