A form should feel easy to use. The visitor sees a question, gives an answer, and needs to know what will happen next.
What You Need to Know
This example uses the browser’s built-in button control, so you do not have to create a picker from scratch.
In this example: create a JS-controlled preview action.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<button type="button" id="tip-button">Show a tip</button>
<p id="tip-text" hidden>Use a clear label for every form field.</p>
<script>
const tipButton = document.querySelector("#tip-button");
const tipText = document.querySelector("#tip-text");
tipButton.addEventListener("click", () => {
tipText.hidden = false;
});
</script>Let’s Read the Code
- <button>: The button offers an action; its type or command determines what happens.
- <script>: Script contains JavaScript, data, or other browser-understood script formats depending on type.
- type: Type changes what sort of control or resource the browser uses.
- id: An id uniquely identifies an element on this page.
What the example shows: The control has no built-in action until you attach JavaScript.
What Happens in the Browser?
The HTML controls work in the browser, but saving an answer requires the example action path to be handled by a real server.
Keep the form understandable. Put each label next to the right control, group related questions, and make the submit action clear. A good form is more than a collection of inputs.
Your Turn
Change the tip and try removing the script to see what HTML alone does.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- For submitting a form, use type=submit instead.
Key Takeaways
- A control needs a clear label and, when submitted, a meaningful name and value.
- <button>: The button offers an action; its type or command determines what happens.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.