A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore sensitive form data and https transport using a short example that you can inspect and change.
The Idea in Plain English
Browsers can offer password managers appropriate autocomplete tokens. Send sensitive forms using HTTPS and POST, never place passwords into query strings or log them unnecessarily.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<form action="/login" method="post">
<label for="username">Username</label>
<input id="username" name="username" autocomplete="username" required>
<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required>
<button type="submit">Log in</button>
</form>What Each Part Does
- The form collects and submits named fields to the destination specified by action.
- The label tells visitors and assistive tools what a control is for.
- The input creates a field; its type changes the editing controls and the name identifies submitted data.
- for connects a visible label to the control with the same ID.
- action sets the URL that receives a submitted form.
- method chooses GET or POST for form submission.
Password managers may recognize the login field; the server still has to verify credentials securely.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Sensitive Form Data and HTTPS Transport, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Using GET for a password form or relying on client-side checks for authentication.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Browsers can offer password managers appropriate autocomplete tokens. Send sensitive forms using HTTPS and POST, never place passwords into query strings or log them unnecessarily.
- Password managers may recognize the login field; the server still has to verify credentials securely.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.