HTML Forms

HTML forms are used to capture some input from a user and then process it in some way. 

Such as the example below for the SQA calendar builder.

There are various form controls you may see:

• Text Boxes 

• Radio Buttons

• Drop Down Menus (Combo Boxes)

• Number Pickers

• Submit Buttons

These are primarily used to allow a user to input smaller pieces of text.

These look similar to a text box except from the fact that it wont allow alphabetic data and there are up and down arrows (in some browsers) that will allow you to increment and decrement the values. You can also set minimum and maximum values.

The code below will force the value to be between 1 and 3, the min and max attributes set these values. 

<input type="number" name="tickets" min="1" max="3">

A larger text box, for use with extended text input, can be implemented using the textarea form element. You can set the usual presence and length check but in addition you can change the height and width of the text box.

Radio inputs can be implemented using multiple input elements of type radio (only one option can be selected from a group). The checked property will set the default option.

Choose your age:<br>

<input type="radio" name="age" value="12 to 14" checked> 12-14

<br>

<input type="radio" name="age" value="15 or 16"> 15,16

<br>

<input type="radio" name="age" value="17 or over"> over 16

When submitted, the above form would return the named attribute “age” along with one of the listed values: 12 to 14, 15 or 16, 17 or over. Although not required at Higher, it is good practice to include both the name and value attributes.

• If the <br> elements are omitted from the form, the radio buttons align horizontally.

When a form is submitted, the browser shows any validation errors (check browser versions, as this is browser dependent). To allow some visual acknowledgement that an action is performed when the submit button is clicked, a JavaScript onclick event can be applied to the form as shown below:

<form action="" onsubmit="alert ('Form Entered')" >

The select element is used to create a list of possible inputs in the form of a drop-down menu. Input choices are placed inside option elements.

To aid user input, form elements can be given values that are displayed when the web page loads.  These can be left unchanged, deleted or edited by the user, when they are completing the form.

To pre-populate a textarea element, the text is included between the start and end elements as can be seem below:

To aid user input, form elements can be given placeholder suggestions that are displayed when the web page loads. These placeholders are replaced as soon as the user enters any new data.

<input type="number" name="tickets" min = "1" max="3" value = "2">

To pre-select an option button, you can select one value to be set as checked.