Web Programming I — Week 4

Mikheil Rukhaia

International Black Sea University,

Tbilisi, Georgia

September 17, 2018

Forms Form Controls Laboratory Work

Outline

1 Forms

2 Form Controls

3 Laboratory Work

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 2 / 49
Forms Form Controls Laboratory Work

Forms

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 3 / 49
Forms Form Controls Laboratory Work

Introducing forms

I Forms in HTML are analogous to the paper forms, where you

have some fields to fill in, boxes to check and the like.

I HTML can create forms, but what happens with the form data is
a job of server-side scripting languages, like PHP.

I Forms are created using <form> element.

I Forms can contain any HTML elements used before, but not
<form> element again (i.e. forms cannot be nested).

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 4 / 49
Forms Form Controls Laboratory Work

Introducing forms (ctd.)

I Every form must contain the submit button (actual text on the
button can be different).

I After clicking the submit button (or the enter key) data is sent to
the server in name/value pairs.

I Name is the name of the control.

I Value is the value user filled in.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 5 / 49
Forms Form Controls Laboratory Work

Simple form

I Example:
<form action="search.php" method="get">
Search:
<input type="text" name="txtSearch" />
<input type="submit" value="Search" />
</form>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 6 / 49
Forms Form Controls Laboratory Work

Attributes of <form>

I action specifies the URL of server-side script (mandatory).

I method specifies HTML method how data can be sent

(mandatory).

I There are two methods get and post.

I Get method sends data as part of the URL (directly visible, can
be bookmarked).

I Post method hides data in the HTTP headers (cannot be

bookmarked, but still not secured, unless HTTPS is used).

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 7 / 49
Forms Form Controls Laboratory Work

Attributes of <form> (ctd.)

I onsubmit runs a script in the browser before actually sending a

data.

I Its value must be a script function defined inside the document.

I Example: onsubmit="validateForm();"

I onreset is similar to onsubmit and runs a script when user

clicks on the reset button.

I Usually it is used to warn the user before clearing the form.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 8 / 49
Forms Form Controls Laboratory Work

Attributes of <form> (ctd.)

I enctype specifies the encoding type for the post method.

I Its default value is

application/x-www-form-urlencoded
(replaces some characters that cannot be sent to the web server).

I multipart/form-data allows the data to be sent in parts,

where each consecutive part corresponds to a form control.

I The later must be used if user needs to upload files or uses

non-ASCII character.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 9 / 49
Forms Form Controls Laboratory Work

Attributes of <form> (ctd.)

I target specifies a window or frame where the requested page

should open (similar to the <a> element).

I <form> element creates extra white spaces around it.

I Use CSS and style attribute to override this behavior.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 10 / 49
Forms Form Controls Laboratory Work

Attributes of <form> (ctd.)

I There are two new attributes of the <form> element in HTML5.

I novalidate specifies that browser should not validate the

form prior submission.

I autocomplete indicates whether or not the browser should

auto-fill form values (default is on).

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 11 / 49
Forms Form Controls Laboratory Work

Form Controls

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 12 / 49
Forms Form Controls Laboratory Work

HTML5 forms

I Forms in HTML5 are more advanced having dozens of new

features.

I The problem is that not all features work in all browsers.

I Good news is that if a form control is not recognized by a

browser, then it is displayed as a text input, so user can still enter
some information.

I You should always test an HTML5 form in several recent

browsers.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 13 / 49
Forms Form Controls Laboratory Work

Backward compatibility

I A list of supported elements ad attributes can be found here:

http://wufoo.com/html5/

I Polyfills are small libraries, usually written in JavaScript to

provide support for new features in older browsers.

I There are many available polyfills for a variety of HTML5

features.

I The Modernizr project keeps a list at its project site:

https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyfills

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 14 / 49
Forms Form Controls Laboratory Work

Main controls

I Text input controls.

I Buttons.

I Checkboxes and radio buttons.

I Select boxes (drop-down menus) and list boxes.

I File select boxes.

I Hidden controls.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 15 / 49
Forms Form Controls Laboratory Work

Text inputs

I Single-line text input: item that requires only one line of user
input (search boxes, e-mail addresses, etc.) and is created using
the <input> element.

I Password input: the same as the single-line text input, but masks
the characters (usually via *) so that they cannot be seen on the
screen.

I Multi-line text input: item that may be longer than a single

sentence and is created with the <textarea> element.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 16 / 49
Forms Form Controls Laboratory Work

Single-line text input

I Use <input type="text" /> to create a single-line text

input.

Attribute Description
name the name part of the name/value pair that is
sent to the server (it is a good practice to start
names of the text-input control with txt).
value an initial value that the user will see when the
form loads.
size the width of the text-input control in terms of
characters (does not affect how many charac-
ters users can enter).
maxlength the maximum number of characters a user can
enter.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 17 / 49
Forms Form Controls Laboratory Work

Common attributes of <input>

I autocomplete exists for each element in the form.

I autofocus indicates that the element should have focus when

the page loads.

I min and max specify the minimum and maximum value.

I pattern specifies a regular expression that the element value is

checked against.

I placeholder displays a short hint as the initial value in the

input field.

I required indicates whether the input is a required element.

I step specifies the legal number intervals.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 18 / 49
Forms Form Controls Laboratory Work

Common attributes of <input> (ctd.)

I list refers to a <datalist> element that contains

pre-defined options for the element.

I Example:
<input type="text" list="browsers" />

<datalist id="browsers">
<option value="Internet Explorer" />
<option value="Firefox" />
<option value="Chrome" />
<option value="Opera" />
<option value="Safari" />
</datalist>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 19 / 49
Forms Form Controls Laboratory Work

Password input

I Use <input type="password" /> to create a password

input.

I It has the same attributes as single-line text input.

I It is a good practice to start names of password input controls

with pwd.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 20 / 49
Forms Form Controls Laboratory Work

Multi-line text input

I Use <textarea> element to create a multi-line text input.

I Text written inside this element preserves formatting (like

<pre>).

I rows and cols can be used to specify number of rows and

columns respectively, which means to specify height and width
of the element.

I Example:
<textarea name="txtArea" rows="20" cols="50">
This text is shown inside the form.
</textarea>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 21 / 49
Forms Form Controls Laboratory Work

Multi-line text input (ctd.)

I <textarea> has wrap attribute with the following values:

I soft (default) indicates that text is send to the server as it is

typed.

I hard indicates that wherever the text wraps, it is transmitted to

the server as a new line.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 22 / 49
Forms Form Controls Laboratory Work

Buttons

I Buttons can be created using <input> or <button> elements.

I There are three types of buttons:

submit automatically submits a form.
reset automatically resets form controls to their initial values.
button triggers a client-side script.

I Example:
<input type="reset" value="Reset" />
<input type="button" value="Cancel"
onclick="cancel()" />
<input type="submit" value="Submit" />

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 23 / 49
Forms Form Controls Laboratory Work

Buttons (ctd.)

I It is possible to use image as a button via image type input

element.

I Two additional attributes src and alt must be specified.

I Drawback: only a submit button.

I Example:
<input type="image" src="submit.gif"
alt="Submit" />

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 24 / 49
Forms Form Controls Laboratory Work

Buttons (ctd.)

I More recent way of creating buttons is <button> element.

I Any text formatting or image elements can be used inside this

element.

I Example:
<button type="reset">Reset</button>
<button type="button" onclick="cancel()">
<img src="cancel.gif" alt="Cancel" />
</button>
<button type="submit"><b>Submit</b></button>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 25 / 49
Forms Form Controls Laboratory Work

Checkboxes

I Use <input type="checkbox" /> to create a checkbox.

I Default value for value is on if not specified.

I Checkboxes can appear individually or as a group sharing

control name (to select several values).

I If get is used to send data, then each selected checkbox from

the group will be a part of URL.

I If post is used to send data, then selected checkboxes from the

group are sent as an array.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 26 / 49
Forms Form Controls Laboratory Work

Checkboxes (ctd.)

I Example:
<input type="checkbox" name="chk"
value="xml" /> XML <br />
<input type="checkbox" name="chk"
value="html" /> HTML <br />
<input type="checkbox" name="chk"
value="css" /> CSS <br />
<input type="checkbox" name="chk"
value="js" /> JavaScript <br />
<input type="checkbox" name="chk"
value="php" /> PHP <br />

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 27 / 49
Forms Form Controls Laboratory Work

Radio buttons

I Radio buttons are similar to checkboxes, but there are key

differences.

I Singleton radio button when selected, cannot be deselected

without resetting the form (or some special script).

I When there is a group of radio buttons, only one of them can be

selected.

I Use <input type="radio" /> to create a radio button.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 28 / 49
Forms Form Controls Laboratory Work

Radio buttons (ctd.)

I Example:
<input type="radio" name="rad"
value="xml" /> XML <br />
<input type="radio" name="rad"
value="html" /> HTML <br />
<input type="radio" name="rad"
value="css" /> CSS <br />
<input type="radio" name="rad"
value="js" /> JavaScript <br />
<input type="radio" name="rad"
value="php" /> PHP <br />

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 29 / 49
Forms Form Controls Laboratory Work

Select boxes

I Select boxes (drop-down lists) do the same job as radio buttons,

but take much less space.

I They can be alternative to single-line text inputs, if you want to

limit options that a user can enter.

I Select boxes are created using <select> element, where each

option is written inside <option> element.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 30 / 49
Forms Form Controls Laboratory Work

Select boxes (ctd.)

I Example:
<select name="sel">
<option value=""> --- </option>
<option value="xml"> XML </option>
<option value="html"> HTML </option>
<option value="css"> CSS </option>
<option value="js"> JavaScript </option>
<option value="php"> PHP </option>
</select>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 31 / 49
Forms Form Controls Laboratory Work

Select boxes (ctd.)

I <select> element can have the attributes size and

multiple.

I size specifies number of rows shown in the list (creates

scrolling select box).

I multiple="multiple" allows user to select multiple

options from the list (changes the look).

I If the list is too long it is possible to group items inside

<optgroup> element and its label attribute.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 32 / 49
Forms Form Controls Laboratory Work

Select boxes (ctd.)

I Example:
<select name="sel">
<option value=""> --- </option>
<optgroup label="Markup">
<option value="xml"> XML </option>
<option value="html"> HTML </option>
</optgroup>
<optgroup label="Style">
<option value="css"> CSS </option>
</optgroup>
<optgroup label="Scripting">
<option value="js"> JavaScript </option>
<option value="php"> PHP </option>
</optgroup>
</select>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 33 / 49
Forms Form Controls Laboratory Work

File select boxes

I Use <input type="file" /> to create file upload box.

I Keep in mind: to use file upload box, <form> element must

have the following attribute/values
method="post" enctype="multipart/form-data".

I Example:
<form action="upload.php" name="upForm"
method="post"
enctype="multipart/form-data">
<input type="file" name="fileUpload"
accept="image/*" />
<br /><br />
<input type="submit" value="Submit" />
</form>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 34 / 49
Forms Form Controls Laboratory Work

Hidden controls

I Used to pass data between pages without the user seeing it (still
visible in source code).

I Typical usage is for the forms spanned on several pages.

I Example:
<input type="hidden" name="hidItem"
value="hidValue" />

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 35 / 49
Forms Form Controls Laboratory Work

Other types for <input>

I color for choosing a color by using a color wheel.

I date for entering a calendar date.

I datetime for entering a date and time with the time zone.

I datetime-local for entering a local date and time.

I email for entering either a single email address or a

comma-separated list of email addresses.

I month for entering a year and month.

I week for entering a year and week number (2013-W01).

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 36 / 49
Forms Form Controls Laboratory Work

Other types for <input> (ctd.)

I number for numerical input.

I range a slider that enables the user to choose a value from a

range of numerical values.

I search for entering search terms.

I tel for entering telephone numbers.

I time for entering a time consisting of hours, minutes, seconds,

and fractional seconds.

I url for entering website URLs.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 37 / 49
Forms Form Controls Laboratory Work

Fancy elements

I <label> is used to place a label for the element.

I <progress> represents the progress through a task.

I <meter> is used to display a gauge (e.g. disk usage and the

like).

I <keygen> provides a secure way to authenticate users.

I <output> represents the result of a calculation.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 38 / 49
Forms Form Controls Laboratory Work

The <progress> element

I The closing tag is required.

I Should have value and max attribute in determinate mode.

I Rendering of indeterminate mode is different in that it cycles

through the possible values.

I Example:
<progress value="14" max="20"></progress>
<progress name="indeterminate"></progress>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 39 / 49
Forms Form Controls Laboratory Work

The <meter> element

I <meter> is similar to <process> but has more flexibility.

I It is possible to specify min, max values and low, high bounds

of the range.

I If the value is beyond the bound, then display changes color.

I Example:
<meter min="0" value="95" high="90" max="100">
</meter>
<meter min="0" value="50" high="90" max="100">
</meter>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 40 / 49
Forms Form Controls Laboratory Work

The <keygen> element

I <keygen> generates private and public keys (2048 or 1024 bit).

I Private key is stored locally, and public key is sent to the server.

I Public key could be used to generate a client certificate to

authenticate the user in the future.

I Example:
<keygen name="certificate" />

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 41 / 49
Forms Form Controls Laboratory Work

The <output> element

I <output> is a place to display result of computation from a

script.

I Its value is not sent to the server, when form is submitted.

I Example:
0
<input type="range" name="a" value="50"
onchange="x.value=parseInt(a.value)+
parseInt(b.value)" />
100 +
<input type="number" name="b" value="50" />
=
<output name="x" for="a b"></output>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 42 / 49
Forms Form Controls Laboratory Work

Fancy forms

I To group together related form controls use <fieldset> and

<legend> elements.

I <fieldset> creates a border around the group of form

controls to show that they are related.

I <legend> specifies a caption for the group and should be

always the first child element of <fieldset>.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 43 / 49
Forms Form Controls Laboratory Work

Fancy forms (ctd.)

I Example:
<fieldset>
<legend>We learned</legend>
<input type="checkbox" name="chk"
value="xml" /> XML <br />
<input type="checkbox" name="chk"
value="html" /> HTML <br />
<input type="checkbox" name="chk"
value="css" /> CSS <br />
<input type="checkbox" name="chk"
value="js" /> JavaScript <br />
<input type="checkbox" name="chk"
value="php" /> PHP <br />
</fieldset>

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 44 / 49
Forms Form Controls Laboratory Work

Common attributes

I All form controls can have tabindex and accesskey

attributes.

I All form controls can be disabled by adding attribute/value

disabled="disabled"

I Password, single- and multi-line text input controls, as well as

file upload boxes can become readonly by adding attribute/value
readonly="readonly"

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 45 / 49
Forms Form Controls Laboratory Work

Readonly vs. Disabled

readonly disabled
Can be modified by script, not by user by script, not by user
Will be sent to server yes not while disabled
Will receive focus yes no
Included in tabbing order yes no

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 46 / 49
Forms Form Controls Laboratory Work

Laboratory Work

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 47 / 49
Forms Form Controls Laboratory Work

Exercises

I Create an HTML page containing a student registration form

with HTML validation. The form should contain:
Single-line text boxes for name, surname, birth date, address,
phone, email.

Radio buttons for gender (male or female).

A file upload box and a select box to choose purpose of the file
(CV, picture, certificate, transcripts).

A text area for some additional comments.

Checkboxes to select the way to be contacted (the snail post,

phone, and/or email).

Buttons to reset, cancel or submit the form.

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 48 / 49
Forms Form Controls Laboratory Work

Discussion?!

Web Programming I — Week 4 M. Rukhaia International Black Sea University September 17, 2018 49 / 49