����ý

The <form> element allows user input to be collected in a form:

<form>

...

</form>

We can use client-side validation on forms using HTML 5, without the need for JavaScript. The elements of a <form> at Higher level are:

• text
• number
• textarea
• radio
• submit

Text input example

The following example implements two text input boxes, including a length and presence check.

Code for the above form below:

<form>

First name:<br>

<input type="text" name="firstname" size="30" maxlength="15"
required><br>

Last name:<br>

<input type="text" name="lastname" size="30" maxlength="15"

required>

</form>

The above code has elements including:

• type=”text” – identifies what input type the form element is expecting
• name=”firstname” – when a form is processed, the name attribute is required
• size = “30” – width of the input box (in number of characters)
• maxlength = “15” – length check which limits input to 15 characters
• required – presence check has been set on the input.

Number input example

The following example implements a number input with a range check.

Code for the above form below:

<form>

Number of Seats Required (between 1 and 10):

<input type="number" name="seats" min="1" max="10">

</form>

The above code has elements including:

• type=”number” – Identifies what input type the form element is expecting.
• min = “1” max = “10” – Range check has been set to ensure values are >=1 and <=10.

Textarea example

The following example implements a textarea, this area is a larger text box that can be used for extended text input.

Code for the above form below:

<form>

Please enter any dietary requirements:

<textarea name="dietary_requirements" rows="5" cols="40"> </textarea>

</form>

The above code has elements including:

• rows = “5” – this will set the rows of the textarea (rows manage the height of the textarea)
• cols =”40” – this will set the columns of the textarea (columns manage the width of the textarea)

Radio button example

The following example implements radio buttons.

Radio buttons are used to submit a specific choice in a form. So in our example, there will be a set of booking times.

Code below:

<form>

Choose your booking time:<br>

<input type="radio" name="time" value="09:00 to 13:00"> 09:00-13:00

<br>

<input type="radio" name="time" value="13:00 to 17:00"> 13:00-17:00

<br>

<input type="radio" name="time" value="17:00 to 22:00"> 17:00-22:00

</form>

</form>

If these radio buttons were submitted in a form, then the name attribute “time” and one of the listed values: “09:00 to 13:00”, “13:00 to 17:00” or “17:00 to 22:00” would be sent with the form.

At Higher level it is not required to know forms are submitted to a server but it is useful to understand how form submission would work.

Combined example with submit button

The following example implements all the previous elements and also adds a submit button. A submit button is used to send data entered in the form. Our submit button will generate a message.

As we can see above, our submit button generates a message saying “Form Submitted, Thank You!”. This message is generated using an onclick event.

Code below:

<form>

First name:<br>

<input type="text" name="firstname" size="30" maxlength="15"
required><br>

Last name:<br>

<input type="text" name="lastname" size="30" maxlength="15"
required>

<br><br><br>

Number of Seats Required (between 1 and 10):

<input type="number" name="seats" min="1" max="10">

<br><br><br>

Please enter any dietary requirements: <br>

<textarea name="dietary_requirements" rows="5" cols="40"> </textarea>
<br><br><br>

Choose your booking time:<br>

<input type="radio" name="time" value="09:00 to 13:00"> 09:00-13:00
<br>

<input type="radio" name="time" value="13:00 to 17:00"> 13:00-17:00
<br>

<input type="radio" name="time" value="17:00 to 22:00"> 17:00-22:00
<br><br>

<input type="submit" onclick="alert('Form Submitted, Thank You!')" value="Submit">

</form>