Fields with names
A form collects what a visitor types and sends it to a server. The <form> element wraps the fields, and its action attribute, /order, says where the answers go. The form itself draws nothing: only its fields appear.
<label> is the name a field shows. Its for="drink" matches the id of the input on line 3, which links the two: click the word Drink and the cursor jumps into the box. A screen reader says Drink when the box has focus.
<input> draws a box to type in. Its name, drink, is the key the answer is sent under; a field without a name is not sent at all. required means the form will not send while this box is empty.
Lines 4 and 5 make a second pair: label Cups, input cups. type="number" tells the browser to expect a number. It will not keep letters as the value, and mobile browsers show a keyboard for numbers.
A <button> inside a form is a submit button unless it says type="button". Clicking it sends the form. In most browsers, pressing Enter in a text box does the same.
Checking and sending
Click Order while Drink is empty. Because of required, the browser stops, points at the box with a message, and sends nothing. No script needed. A server must still check again: anyone can send a request without your page.
Now type Flat white and 2. Each control holds its own value, right there in the page. Nothing has been sent yet: the values wait until the form is submitted.
Click Order again. Every field passes, so the browser pairs each name with its value, joined by &: drink=Flat+white&cups=2 (a space becomes +). With the default method, GET, they ride in the address after a ?.
The program at /order reads each value by its name. In Python, urllib.parse.parse_qs turns the query into {'drink': ['Flat white'], 'cups': ['2']}. Every value arrives as text, even the 2.
Method and meaning
Add method="post" and the same pairs travel in the body of the request instead of the address, so they stay out of the address bar and history. Placing an order changes something, so a real order form should use POST.
A screen reader announces the focused box by its label, Drink, and says it is required. Without the label, the box would have no name at all. That meaning comes from the HTML alone, not from how it looks.
What happens
;; step 1/11 · form line 1 <form action="/order"> line 7 </form> form groups the fields between them action "/order": the address the answers go to method none given, so the default: GET drawn nothing (a form has no box of its own)
The seven lines are a working page: save them as menu.html and open it. A full page would also start with <!DOCTYPE html> and have html, head and body tags, which the browser adds when they are missing. After a real submit the browser loads whatever page the server sends back, such as "Thanks for your order". The figure keeps the form in view so you can see the parts.