Forms and Form Controls

All in one: every form control and form attribute, side by side

What this example compares

The form's journey: method="get" vs method="post" vs enctype="multipart/form-data" vs a <form> with nothing set (with action)
Three attributes, three jobs: name vs id vs value, and placeholder, which is only a hint
Sent or not: a normal box vs readonly vs disabled
Tick boxes: checked vs unticked vs no value (sends on) vs a type="radio" group
Labels: <label for> + id vs a wrapped <label> vs no label vs a placeholder only
One line or many: <input type="text"> (and "date") vs <textarea rows cols>, and the two textarea mistakes
Dropdowns: <option value> vs selected vs <optgroup label> vs multiple size
Buttons: <button type="submit">, no type, "reset", "button" (+ onclick), the three <input> buttons and an <a href> link
Grouping: <fieldset> + <legend> vs <div> + <p> vs a wrong <caption>
Suggest or restrict: <input list> + <datalist> vs <select> vs a list that matches no id
Showing a number: <output> vs <progress> vs <meter> (with low, high, optimum)
All together: the registration form of 16.6, with required, type="email", type="file" accept, type="hidden" and a fieldset inside a fieldset

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see twelve panels, with panels 2 and 3, and panels 9 and 10, side by side. In panel 1 the green lines read GET /search?q=html&page=2, POST /register with body: name=Rahul&email=r%40lpu.in, POST /upload with body (in parts): photo=, and GET (this page)?user=asha&pass=secret: the password is in the address. The box with no name, the disabled box and the unticked checkbox all send (nothing), while the readonly box still sends course=CSE326 and the ticked box with no value sends hostel=on. The meters are green, yellow and red for 90, 35 and 10, and the last green line is the chapter's trace, ending hostel=yes&photo=&about=&source=web. The Console prints the same green line for every form, one per line and named by the form's id (f1-1 = panel 1, card 1), and adds a SUBMITTED line each time you press a submit button.

Quick check: in panel 3, you want the course code to stay locked but still reach the server. Which word goes on the input, and what would the other one do?

readonly: the user cannot change it, but it is sent (course=CSE326). disabled also locks it, but greys it out and leaves it out of the submission completely, so the green line says (nothing).