In this part we are going to discuss about the rest of elements it is possible to have in a form. What elements are we going to be focused on? Here they are:
Button
This element is used to execute an action when clicked.
Example:
<form method="GET" action="./form_handler.php">
<button type="button" onclick="alert('Thanks for reading! 🙂')">Click Me!</button>
<form>In this case the action consists in a popping up window with a message. This action is defined through JavaScript code.
It’s suggested to not neglect the type attribute because, as different browsers might set different default types for this element, the behavior might be different too.
Datalist
This element provides a list of pre-defined options that pops up in the form of a drop-down list as the user inserts data (if the chars typed are included in one or more of the options).
Example:
<form method="GET" action="./form_handler.php">
<input list="authors" placeholder="Author">
<datalist id="authors">
<option value="Austen, Jane">
<option value="Dostoyevsky, Fyodor">
<option value="Goethe, Johann Wolfgang von">
<option value="Nietzsche, Friedrich Wilhelm">
<option value="Tolstoy, Lev Nikolayevich">
<option value="Wilde, Oscar">
</datalist>
</form>As you can notice this element needs an input associated with it. For the latter the type is not specified but it has, instead, a list attribute which value must correspond to the datalist id.
The <option> tag is used for each item to include in the list.
Note that the list attribute of the input element must refer to the id of the datalist.
Fieldset
The fieldset element is used to gather several elements belonging to the same group:
<form method="GET" action="./form_handler.php">
<fieldset>
<legend>Car properties</legend><br>
<label for="make">Make</label>
<input id="make" name="make" type="text">
<label for="model">Model</label>
<input id="model" name="model" type="text">
<label for="engine">Engine (cc)</label>
<input id="engine" name="engine" type="text">
<label for="reg-year">Registration Year</label>
<input id="reg-year" name="reg-year" type="text">
<input type="submit" value="Search">
</fieldset>
</form>As you can see the fieldset appears like a box around its related elements. The name associated to the fieldset is defined by the legend element.
Select
This element is used to create a drop-down list. As well as the datalist, available items are included using the <option> tag:
<label for="fruits">Favorite fruit</label>
<select id="fruits" name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="blackberry">Blackberry</option>
<option value="grape">Grape</option>
<option value="kiwi">Kiwi</option>
<option value="orange">Orange</option>
<option value="peach">Peach</option>
<option value="plum">Plum</option>
<option value="raspberry">Raspberry</option>
</select> In some cases it might be more immediate for the user to make a choice among all the options (especially if these are numerous) if the latter are classified by categories.
In this case we use the <optgroup> tags along with the <option> tags:
<label for="food" style="margin-right: 5px;">Favorite food</label>
<select id="food" name="food">
<optgroup label="Cereals">
<option value="barley">Barley</option>
<option value="corn">Corn</option>
<option value="millet">Millet</option>
<option value="oat">Oat</option>
<option value="rice">Rice</option>
<option value="rye">Rye</option>
<option value="wheat">Wheat</option>
</optgroup>
<optgroup label="Legumes">
<option value="chickpeas">Chickpeas</option>
<option value="lentils">Lentils</option>
<option value="peas">Peas</option>
<option value="peanuts">Peanuts</option>
<option value="soya">Soya</option>
</optgroup>
<optgroup label="Vegetables">
<option value="artichoke">Artichoke</option>
<option value="broccoli">Broccoli</option>
<option value="cabbage">Cabbage</option>
<option value="carrot">Carrot</option>
<option value="cauliflower">Cauliflower</option>
<option value="celery">Celery</option>
<option value="lettuce">Lettuce</option>
<option value="onion">Onion</option>
<option value="potato">Potato</option>
<option value="spinach">Spinach</option>
<option value="tomato">Tomato</option>
</optgroup>
</select>The label attribute indicate the name of the options group.
Textarea
This element is used to create a multi-line text input control.
Usually used in forms to collect user comments or reviews, it can hold an unlimited number of characters, and the text renders in a fixed-width font.
Here an example:
<form action="form_handler.php">
<label for="comment">Leave a comment</label><br>
<textarea id="comment" name="comment" rows="6" cols="30"></textarea><br><br>
<input type="submit" value="Submit">
</form>As usual the element’s id has to correspond to the label’s for attribute and the name attribute is needed in order that the input gets afterwards processed.
Text area dimensions are specified by the cols and rows attributes, but the user can modify them through their mouse.
Output
This element is used to represent the provide the result of a calculation:
<form oninput="y.value=parseInt(x1.value)*parseInt(x2.value)">
<input type="number" id="x1" value="0"> x
<input type="number" id="x2" value="0"> =
<output name="y" for="x1 x2"></output>
</form> Multiplication
Here the form’s elements section ends up. In the next part we are going be discussing about other elements useful for creating the structure of a website.
