Higher HTML forms

Why use HTML forms?
Different Form Elements
Text Box
Radio Buttons
Submit Button
Text Area
Number Picker
Drop Down Menus/Combo Boxes
Text Input Example
Number Input Example
Range Check Example
Text Area Example
Radio Buttons Example
Submit Button
Drop down menus
Setting the size of a drop down box
Drop down + multiple attributes
Pre-populating input
Pre-populating text boxes
Pre-populating text areas
Placeholder Values
Pre-populating numeric values
Preselecting Option buttons

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. 

The above text example demonstrates the structure of a text field. There are properties to set the name, width and height. There is also a length check as well as a presence check coded. 

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"> 

HTML5 will validate the input to see if meets the minimum and maximum values. 

A larger text box, for use with extended text input, can be implemented using the text area 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. 

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:

<input type="submit" onclick="alert('Form Entered')" value="Submit"> 

The output produced from the above code. 

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.