Explain HTML code

What this HTML sample shows

forms

required and type="email" make the browser check the field before anything is sent. With the field empty, or holding ana@, Subscribe sends nothing: the browser moves focus to the field and shows a message such as Please fill out this field.

accessibility

<label for="email"> ties the word Email to the input whose id is email. That makes Email the field's accessible name, the one a screen reader announces, and clicking the word puts the cursor in the field. aria-describedby makes the hint below the field's description.

semantics

<fieldset> and <legend> group the two radio buttons under the name Format, so a screen reader can say which question Full and Plain text answer. Wrapping each radio in its own <label> names it without a for or an id, and makes the words clickable too.

Good to know

• Only fields with a name are sent. Submitting ana@example.com posts email=ana%40example.com&format=html to /subscribe. The buttons have no name, so they add nothing.
• A <button> inside a form submits it unless its type says otherwise. Preview an issue has type="button", so clicking it sends nothing until a script gives it a job.
• Pressing Enter in the email field submits the form too, through the same check. Real <button> elements also work from the keyboard with no script: Tab to Subscribe and press Enter or Space.
• The radio group is one Tab stop, on the checked option, and the arrow keys move between the options. Both share name="format", so checking Plain text unchecks Full.

Watch out: The browser only checks the format, and only when a person submits. ana@example passes even without a dot, and a script that calls form.submit() sends the form with the field empty. Check the address again on the server.