大象传媒

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.

an HTML input box with an input box for first name and another for last name.

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=鈥漷ext鈥 鈥 identifies what input type the form element is expecting
  • name=鈥漟irstname鈥 鈥 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=鈥漬umber鈥 鈥 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.

an HTML input box with text reading: "please enter any dietary requirements"

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.

A sentence that reads: "Choose your booking time", followed by three HTML radio button options with different time slots.

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 鈥渢ime鈥 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.

an HTML input form that includes four input boxes and a three-option radio button, followed by a submit button and a pop up message that confirms submission.

As we can see above, our submit button generates a message saying 鈥淔orm 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>