HTML forms
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>