HTML Forms

Initial User Interaction - Forms

We have discussed some of the basic ways in which to present information, but what about capturing information from the user? In this lecture we will use forms as a method for allowing basic interaction with the user. Forms can be used to send information back to a server that can handle CGI and interactive scripts, and they can be used for local interaction in the browser via JavaScript. Below we will focus on how forms are built, their syntax, and the basics on how to send information back to a server. Later in the course we will learn how to process the information received on the server.

From the example above, you can get a quick view into a very basic form. A form is defined by the <form> tag, with two primary attributes that you need to work with.

method - The form method should be either GET or POST. Note that when using GET, the request can be automatically re-submitted by the browser without notifying the user, the variables will be visible on the URL bar, and there are limitations of the amount of data that can be sent via GET (these limitations do not exist with POST)
action - The form action specifies the script that should be invoked on the server when the user submits the form, in this example it is calling a sample script submit.cgi. Note: if you do not provide this value, the page will submit back to itself.

All of the various inputs within the <form></form> tags are part of this specific form and action. You can have many forms on a single page. For each input element, the main attributes you need to specify are

type - This determines the properties of the input element, including how it is rendered on the page
name - This specifies the name used to identify this input once the form is submitted. If a name for the input element is not specified, the value is not submitted.

In this example we are also using the <label> to associate a text content with an input element. The label tag changes nothing in the rendering but can be useful later when working with mouse input (e.g. clicking on the label acts as if clicking on the input field). The for attribute links it to the input element with id="nameid".

Some inputs that can be used within a form

<form method="post" action="../tools/FormChecker/submit.cgi"> <p> <label> Text <input type="text" name="textex" placeholder="text" required> </label></p> <p> <label> TextArea <textarea name="textareaex" rows="3" cols="25">Some paragraph here</textarea></label> </p> <fieldset> <legend> Single and multiple choice</legend> <p> Radio: <label> Opt1 <input type="radio" name="radioex" value="one" checked></label> or <label> Opt2 <input type="radio" name="radioex" value="two"></label></p> <p> Checkbox: <br> <label> <input type="checkbox" name="checkex" value="one">Checkbox1</label> <br> <label> <input type = "checkbox" name="checkex" value = "two"> Checkbox2 </label></p> <p> <label> Select <select name="selectex"> <option value="One">Opt1</option> <option value="Two">Opt2</option> <option value="Three">Opt3</option> </select> </label> </p> </fieldset> <fieldset> <legend> Newer types - not fully supported</legend> <p> <label> Color <input type="color" name="colorex"></label></p> <p> <label> Date <input type="date" name="dateex"></label></p> <p> <label> Time <input type="time" name="timeex" min ="08:00" max = "16:00" step ="300"></label></p> </fieldset> <p> <label> Email <input type="email" name="emailex"></label> </p> <p> <label>Number (1-10): <input type = "number" name = "mynumber" min="1" max="10" step = "2" value = "5"> </label></p> <p> <label>Range (0-20): <input type = "range" name = "myrange" min = "0" max = "20" value = "4"></label> </p> <p> <label> Datalist <input type = "text" name="dlex" list="sections"> <datalist id = "sections"> <option value="3321" label="Section 3321"> <option value="3329" label="Section 3329"> <option value="5521" label="Section 5521"> </datalist> </label> </p> <p> <input type="submit" value="Submit Form"> <input type="reset" value="Clear Form"></p> </form>

Information received from the form

For demonstration purposes, fill in one of the forms on this page and submit it. Review the output produced. The output shows the method used by the form to submit the data (POST or GET), the query string sent to the server, and the individual fields and values sent.

Passwords

There is one input we have neglected and that is <input type="password">. This input type is useful for gathering information from the user that will be masked as they enter it. Note that you should consider how secure this type of input actually is. Is there a difference between using GET or POST? What about using http or https? Which is the most secure combination?

<form method="post" action="../tools/FormChecker/submit.cgi"> <label for="formname">Name: <input type="text" name="name" size="25" id="formname" maxlength="30" placeholder="John Doe"> </label> <label for="formpassword">Password: <input type="password" name="passwordexample"> </label> <input type="submit" value="Submit Form"> </form>

Thoughts on organizing a form

You may look at the forms we are making and think "these are ugly". In the future we will have lots of options t organize the forms using CSS, so don't worry too much about the layout yet. Using tables to help with the layout is an old practice, but it is not recommended.

Practice Problems

Build the HTML to build the form shown:
Build the HTML to build the form shown: