select, textarea & buttons

<select> creates a dropdown whose choices are <option> children. The name attribute on the <select> is the submission key; the value attribute on each <option> is the submitted value. If an <option> has no value attribute, its text content is submitted instead. <optgroup label="..."> wraps related options under a non-selectable heading. Adding multiple and size turns the dropdown into a visible list box where the user can select more than one option.

<datalist> is often confused with <select> but works differently: it provides a suggestion list for a free-text input, not a constrained picker. Link an <input> to a <datalist> by matching the input's list attribute to the datalist's id. The user can pick from the suggestions or type any value they like. <select> forces a choice from the list; <datalist> merely hints.

<textarea> is the multi-line equivalent of <input type="text">. It is not a void element: it has an opening and closing tag, and the default value is whatever text sits between them (not a value attribute). The rows and cols attributes give it an initial size, but CSS is usually a better tool for sizing. The CSS resize property controls whether the user can drag the corner to resize it.

Choosing between <select> and <datalist> changes the contract with the user. <select> is appropriate when the valid choices are a closed set that the server needs to validate against. <datalist> is appropriate when suggestions are helpful but the server accepts any value, such as a city field that pre-populates common names but also accepts cities not in the list. Using <select> where the user needs freedom creates friction; using <datalist> where only specific values are valid creates work for the server.

The <button> type default is the single most surprising form behaviour for developers new to HTML. A <button> inside a <form> with no type attribute behaves as type="submit" and submits the form on click. This causes accidental submissions when a button intended for JavaScript interaction (a "show more" toggle, a step counter) is placed inside a form without type="button". Always set the type explicitly.

For <select>, put the name on the select element and a meaningful value on each option. Use <optgroup label="Group name"> to wrap related options: the label becomes a non-selectable separator in the dropdown. Add a first <option value="" disabled selected> to create a placeholder that forces the user to make a choice. Pair with required to prevent submission without a selection.

For <datalist>, give it a unique id and set the list attribute on the paired <input> to that id. Each <option> inside the datalist needs a value attribute (the string suggested). The <option> content between tags can also carry a human-readable label in some browsers, but the value is what fills the input. The input still has its own name, type, and validation attributes.

For buttons, the three type values map to three behaviours: submit submits the enclosing form (default); button does nothing by default and is used with JavaScript event listeners; reset returns every field in the form to its default value (rarely desirable, since users accidentally hit it). A <button> can contain any inline content, making it preferable to <input type="submit"> when the button needs an icon alongside text.