HTML5 Forms Tutorial — Input Fields, Buttons & Validation

Introduction

Forms are very useful in collecting data from users and then send it to a web server for further processing.

The form element creates an area for data input elements and designates the URL to which any collected data will be transmitted.

The element form defined an HTML5 form.

The attribute method indicates how the data is sent to the server which is either get or post

GET (default): Simple
Advantage: Users can access server-side programs that uses GET for testing and debugging without creating a form, simply by using a URL with the proper data appended.
Disadvantage: URL size is restricted on some browsers.
The data is displayed, and this is inappropriate for sensitive data
POST: opposite of GET

The atribute action specifies the URL of the web server that will process the FORM data. Server-side programming will be discussed later in this course.

Or an e-mail address which the form data will be sent (e.g., mailto:audit@irs.gov)

Rmq: When mailto is used, POST method is prefered.

input specifies data that will be processed by the script program (form handler).

Input's type can be either nonvisual (hidden) or visual.
visual items such as clickable button
hidden items are used to store data including links and email addresses.

The element text input helps the user to input data

The element label specfies information about the text input element, the attribute size specifies the number of charcters in the text field, and the optional attribute maxlength limits the number of characters inputted.

The elements reset and submit input are used to reset all form element to default values and to submit form's data to web server respectively. The attribute value assigns what to be shown on the button

Other elements that help to collect feedback from users including textarea specifies a multiline text area with number of rows (attribute rows ) and number of columns (attribute cols).

The password input allows users to send sensitive data to the server but gets displayed like asterisks on the form

The element checkbox allows users to select one or multiple answers.

The element radio button allows users to select only one option.

The element select allows users to pick an option from a dropdwon list. It is identified by the attribute name and items are added to it through the element option.

The element fieldset helps to group related elements in a form.

The element datalist is a predfined option for an <input> element and it is similar to select element. It allows users to select an option from a drop-down list of predefined options for an <input> element.

An HTML5 example about forms is shown:

<!DOCTYPE html>

<html>
<head>
<title> Forms example </title>
</head>
<body>
<h1> Here is an example of a feedback form </h1>
<form method="post" action="http://www.google.com">
<p>
<label> First Name
<input type="text" name="fname" required >
</label>
</p>
<p>
<label> Last Name
<input type="text" name="lname" required >
</label>
</p>
<p>
<label> Email Address
<input type="password" name="email_address" size="30" >
</label>
</p>
<fieldset>
<legend> Which IT course type do you require? </legend>
<p> <label> <input type="radio" name="course" required value="html"> HMTL5 </label> </p>
<p> <label> <input type="radio" name="course" required value="c#"> C# </label> </p>
<p> <label> <input type="radio" name="course" required value="multimedia"> Multimedia </label> </p>
<p> <label> <input type="radio" name="course" required value="networking"> Networking </label> </p>
</fieldset>
<fieldset>
<legend> Extras </legend>
<p> <label> <input type="checkbox" name="extras" required value="examples"> Examples </label> </p>
<p> <label> <input type="checkbox" name="extras" required value="hw"> Homework Assignments </label> </p>
<p> <label> <input type="checkbox" name="extras" required value="quizzes"> Online Quizzez </label> </p>
</fieldset>
<p> <strong> How did you reach this site?: </strong>
<label>Search engine
<input name = "how to reach " type = "radio" value = "search engine" checked> </label>
<label>Links from another website
<input name = "how to reach" type = "radio" value = "link" </label>
<label>Google.com website
<input name = " how to reach" type = "radio" value = "google.com" </label>
<label>Reference in a online article
<input name = "how to reach" type = "radio" value = "article" </label>
<label>Other
<input name = "how to reach" type = "radio" value = "other" </label>
</p>
<p> <label>Rate this site:
<select name="rate"
<option selected> 5 </option>
<option selected> 4 </option>
<option selected> 3 </option>
<option selected> 2 </option>
<option selected> 1 </option>
</select>
</label>
</p>
<p> <label> <Special Instructions: <br>
<textarea name = "comments" rows = "5" cols = "50" > Please enter your feedback here. </textarea >
</label>
</p>
<p> <label> Additionl comments, if any
<textarea name="comments" maxlength="500" > </textarea>
</label>
</p>
<p> <input type = "submit" value = "Submit" >
<input type = "reset" value = "Reset" >
</p>
</form >
</body>
</html>

internal links

Frequently Asked Questions

Q: What is an HTML5 form?

A: An HTML5 form is an element that creates an area on a web page for collecting input from users, such as names, email addresses, and selections.
The data collected is sent to a web server for processing using either the GET or POST method.

Q: What is the difference between GET and POST in an HTML form?

A: GET appends form data to the URL and is simple and easy to test, but unsuitable for sensitive data and limited in size.
POST sends data in the request body, making it more secure and appropriate for passwords, personal information, and large amounts of data.

Q: What does the action attribute do in an HTML form?

A: The action attribute specifies the URL of the server-side script that will receive and process the form's data when it is submitted.

What is the difference between a checkbox and a radio button in HTML5?

A: A checkbox allows users to select one or more options simultaneously. A radio button only allows one selection from a group — choosing one automatically deselects the others.

Q: What does the required attribute do in HTML5 forms?

A: The required attribute prevents a form from being submitted if that input field is left empty.
It is a simple built-in validation method in HTML5 that does not require JavaScript.

Q: What is a fieldset in HTML5?

A: A fieldset element groups related form elements together visually and semantically.
It is typically paired with a legend element that provides a caption for the group.

For more details, please contact me here.

Smooth Introduction to Forms in HTML5