Try the HTML5 Course for Free!

HTML5 Forms- Tutorial and Instructions

/ / HTML, JavaScript, Latest

About HTML5 Forms: Video Lesson

            This video lesson, titled “About Forms,” shows how to create an HTML5 form. This video lesson is from our complete HTML5 tutorial, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.

About HTML5 Forms: Overview

           HTML5 forms are used to collect information from people who visit your website. For example, you can use HTML5 forms to find out details about your visitors through surveys and feedback, or engage in e-commerce by selling your goods and services to people.

            HTML5 forms are defined by the <form>…</form> tags and are made up of different elements used to collect data, such as text boxes and radio buttons. After a user inputs all of the form information, they submit the HTML5 form by using the “Submit” button you create within the form. What then happens with the data is a decision you will need to make. You can use a CGI script to manage the data, send the data to a database, or even receive the data via e-mail.

            Most HTML5 forms are processed using CGI scripts. CGI (Common Gateway Interface) is a script written in a language such as Java, or Perl, which runs on a Web server. Most Web servers accommodate the processing of CGI scripts, but you should check first with your web-hosting provider to make sure. In addition, you will want to find the location of the server’s CGI-bin within your web server. The CGI-bin is a directory where CGI scripting is stored, and is where you will need to store the CGI script you create or use within the HTML5 form. If you know a language such as Perl, you can write your own script. There are also hundreds of free scripts available online that you can use, such as the ones at sites like The CGI Resource Index (http://www.cgi.resourceindex.com) and JavaScript Kit (http://www.javascriptkit.com). You will need to make the necessary changes to the CGI script you use (such as changing script variables, path names, etc.) and then upload the CGI script to your web-hosting server.

            To begin creating an HTML5 form that uses a CGI script, start with the <form> tag, containing the command (method=“post”) and the ACTION attribute, with a value equal to the path and name of your CGI script.

Start Tag: <form>
End Tag: </form>
Attributes: method=“post” action=“?” Where “?” is the path and name of your CGI script for the form.
Example: <form method=“post” action=“/cgi-bin/contact.pl”>
Result: Creates the structure of the form.

About HTML5 Forms: Instructions

  1. To create an HTML5 form that uses a CGI script, type the first part of the start tag at the point in the HTML5 web page where you want to insert the form: <form
  2. Type a space and then the attributes: method=“post” action=“?”

            (where “?” is the path and name of you CGI script for the form.)

  1. Close the tag by typing: >
  2. On the next line, type the end tag: </form>

A picture of the "Mastering HTML5 and CSS3 Made Easy v.1.0" interface, showing the lesson on HTML5 forms titled "11.1- About Forms."

A picture of the “Mastering HTML5 and CSS3 Made Easy v.1.0” interface, showing the lesson on HTML5 forms titled “11.1- About Forms.”
TOP