Presentation of HTML Forms

1. Higher
HTML Forms and Validation

2. What is a form?
The HTML <form> element creates a form that is used to collect user input. It is
often used along side PHP and can be used for:
 Emailing and contact forms,
 Login and Registration,
 Searching bars,
 Inputting data into an online system
 Updating information on a database

3. The Form Tag
To create a form in HTML the following tag is used:
<form>
Form elements
</form>

4. Form Elements
Text
Single line text input
<input type=“text”>

5. Form Elements
Number
Number input like for example age. This can be limited to a range and will prevent
the user from entering anything other than a number.
<input type=“number”>

6. Form Elements
Textarea
Used when a paragraph may need to be submitted. Like for example a comment box.
<textarea> Enter text here...</textarea>

7. Form Elements
Radio Buttons
Used when there is multiple options for the user. For example choice of Gender or
whether they are a student or a teacher.
<input type="radio" > Male
<input type="radio" >Female
<input type="radio" > Other

8. Form Elements
Select - Drop Down Menu
Used then there is a list of items to choose from.
Select your year:
<Select name=“year”>
<option value=“S4”> S4 </option>
<option value=“S5”> S5 </option>
<option value=“S6”> S6 </option>
</select>

9. Form Elements
Select – Drop down Menu with Size Attribute
Select element that will offer a number of options and if it is larger than what is stated then a
scroll bar will be given.
Select your car:
<select size="3“>
<option value="volvo">Volvo</option>
<option value="nissan">Nissan</option>
<option value="ford">Ford</option>
<option value="audi">Audi</option>
</select>

10. Form Elements
Select – Drop down Menu with Size Attribute with multiple choice
Select element that will offer a number of options and if it is larger than what is stated
then a scroll bar will be given.
Select your car:
<select size="3“ multiple>
<option value="volvo">Volvo</option>
<option value="nissan">Nissan</option>
<option value="ford">Ford</option>
<option value="audi">Audi</option>
</select>

11. Form Elements
Submit Button
When the submit button is pressed the form is submitted and the browser will show
any errors to correct or send the details of the form to the server.
<input type="submit" value="Submit">

12. Javascript Submit Alerts
Javascript can be used to inform a user that they have enter by using the onclick
function.
<input type="submit" onclick ="alert ('Form Entered')" value="Submit">

13. Pre populated input
Form elements can be pre populated to help the user understand what is to be inputted. This can be left
unchanged, deleted or even edited by the user.
Username: <input type="text" Value="Enter your Username">
<textarea name="comment" > Enter text here... </textarea>
<input type="radio" name="gender" value="male" checked> Male

14. Form Validation
Length Check
Prevents the user from entering more that what is required.
<textarea name="comment" maxlength="6">Enter text here...</textarea>
The above will prevent the user from entering anything more than 6 characters.

15. Form Validation
Presence Check
Ensures that the user has entered something in an important field before submitting to the server.
Username: <input type="text" Value="Enter your Username" required>

16. Form Validation
Range Check
Ensures that the user has entered a number that is between a set of numbers
<input type="number" name="quantity" min="1" max="5">