BUW3213 Dynamic

Web System
Development

Dr. Vee Voon Yee

Introduction
HTML Form
Form Elements BUW3213 Dynamic Web System Development
Issues Related to
Forms Chapter 4: Forms
Summary and
Readings

Dr. Vee Voon Yee

University Malaysia of Computer Science & Engineering

Semester: September 2021

1/30
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

1 Introduction
Introduction
HTML Form
Form Elements
Issues Related to
Forms
2 HTML Form
Summary and
Readings

3 Form Elements

4 Issues Related to Forms

5 Summary and Readings

2/30
 HTML Form

BUW3213 Dynamic
Web System
Development A form structure is a practical method for collecting info from the
Dr. Vee Voon Yee
user
Introduction
Forms are set up using a combination of
HTML Form
Form Elements HTML form tag elements
Issues Related to
Forms
scripts written in PHP, ASP, Perl, python or other script languages
Summary and
Readings
Front-end HTML markup is what users see:
Form Controls: buttons, input fields, drop-downs, radio buttons
Scripts are commonly called CGI
Common Gateway Interface
run on the web server (we will get to this later)
relates to form’s action attributes
Together with server-side scripts we can:
store data from the form
email it
verify input
return appropriate responses to users

3/30
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

1 Introduction
Introduction
HTML Form
Form Elements
Issues Related to
Forms
2 HTML Form
Summary and
Readings

3 Form Elements

4 Issues Related to Forms

5 Summary and Readings

4/30
 Form Tag

BUW3213 Dynamic
Web System
Development The <form> element includes properties that control
Dr. Vee Voon Yee
how the form is processed (action)
Introduction information on which script is used (form elements)
HTML Form
how data is transferred to the script (method)
Form Elements
<form name="my-form" action="script-name" method="method-name">
Issues Related to
Forms ... form elements
</form>
Summary and
Readings

No nested forms
name specifies the name of the form
should not contain spaces
multiple forms per page ok, but each should have a unique name
attribute value

5/30
 Action Attribute
BUW3213 Dynamic
Web System
Development The action attribute for form specifies where (usually the name of
Dr. Vee Voon Yee a server script) to send the form-data when a formed is submitted
Introduction Normally when the form’s submit button is clicked
HTML Form
<form name="loginform" action="scripts/login.php">
Form Elements ...
Issues Related to </form>
Forms
Summary and May also set to invoke a local JavaScript function
Readings
Requires the browser to support the "javascript:" scheme
Not required in HTML5, but supported by many browsers
<form name="loginform" action="javascript:processFormLocally()">
...
</form>

If not specified or the script does not exist, nothing will happen when
submit is clicked

Can a HTML5 form prevent users from hitting submit twice?

Not possible with only HTML5
Possible with some JavaScript code

6/30
 Method Attribute
BUW3213 Dynamic
Web System
Development The method attribute for form controls how data is sent to the web
Dr. Vee Voon Yee server
Introduction Get method: Default
HTML Form
Sends the form data as a complete text appended to the URL. All the
Form Elements
form data are encoded in the URL separated by ampersands.
Issues Related to
Forms E.g., https://www.example.com/cgi/pdf_viewer_4.cgi?
Summary and range=0&language=0&memo=&answer=1&x=99&y=12
Readings
Requests can be cached, can be bookmarked, remain in browser
history, have length restrictions
Post method
Sends the form data in a separate data stream and is more flexible
Requests are never cached, cannot be bookmarked, do not remain in
browser history, have no restrictions on data length

7/30
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

1 Introduction
Introduction
HTML Form
Form Elements
Issues Related to
Forms
2 HTML Form
Summary and
Readings

3 Form Elements

4 Issues Related to Forms

5 Summary and Readings

8/30
 HTML Form Elements

BUW3213 Dynamic
Web System
Development Form controls must be defined inside the <form> elements
Dr. Vee Voon Yee
Field: Form element in which the user can enter information
Introduction
HTML Form Field value or value: Information entered into a field
Form Elements
Issues Related to
The <form> element can contain one or more of the following form
Forms elements:
Summary and
Readings <input>, <label>, <select>, <textarea>, <button>,
<fieldset>, <legend>, <datalist>, <output>, <option>,
<optgroup>

9/30
 HTML Form Elements

BUW3213 Dynamic
Web System
Development HTML Form Controls (Form Elements) have attributes
Dr. Vee Voon Yee
name: Associate the form control’s current data when it is sent to the
Introduction server (variable name – should be simple and descriptive)
HTML Form
(Optional) id: Uniquely identify a form control in the DOM and
Form Elements
Issues Related to
associate a label
Forms
(Optional) value: Provide an initial value to a form control
Summary and
Readings <form action="/action_page.php" method="post">
<label for="name">Name:</label><br>
<input id="name" name="name" type="text"><br>
<label for="email">Email:</label><br>
<input id="email" name="email" type="email" value="user@example.com"><br>
<label for="password">Password:</label><br>
<input id="password" name="password" type="password"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message">Default Text</textarea><br>
<label for="colour">Favourite Colours:</label><br>
<input id="colour" name="colour" type="color"><br>
</form>

10/30
 Input Form Element
BUW3213 Dynamic
Web System
Development <input> is a void element
Dr. Vee Voon Yee
Used for single-line text, checkboxes, radio buttons, passwords, . . .
Introduction
HTML Form Attributes:
Form Elements
type: Type of information is being input
Issues Related to
Forms name: Name of the data field
Summary and
Readings
size: Visible width in characters (default is 20)
maxlength: Maximum number of characters allowed
value: Value of the element
Used differently for different input types
placeholder: Short hint that describes the expected data
title: (Global attribute) Provides tooltip text
Reference:
https://www.w3schools.com/html/html_form_input_types.asp
https://www.w3schools.com/html/html_form_attributes.asp

11/30
 Input Types
BUW3213 Dynamic
Web System
Development text
Dr. Vee Voon Yee
Single-line text field
Introduction
HTML Form
password
Form Elements User’s typed characters are shown as ****
Issues Related to
Forms
NOTE: Does NOT encrypt data sent to server! Instead, server script
Summary and should normally encrypt the password!
Readings

12/30
 Input Types
BUW3213 Dynamic
Web System
Development radio
Dr. Vee Voon Yee
Select only one of a limited number of choices
Introduction Optional boolean attribute checked pre-selected (checked) the radio
HTML Form
button
Form Elements
Issues Related to
Radio buttons within the same group must share the same name
Forms
Summary and
checkbox
Readings
Select zero of more options of a limited number of choices
Optional boolean attribute checked pre-selected (checked) the
checkbox
To make the server-side PHP scripts work easier, choices within the
same grouped can share the same name with trailing "[]"
E.g., name="hobbies[]"
PHP will group selected checkboxes into an array (more on this when
we talk about PHP)

13/30
 Input Types
BUW3213 Dynamic
Web System
Development hidden
Dr. Vee Voon Yee Hidden (not displayed) and not shown on the page rendered
Introduction You hide just because the user doesn’t need to see it.
HTML Form
Common usages:
Form Elements
Issues Related to
Keep track of the ID of the database record
Forms Keep track of security tokens or secrets to stop Cross Site Request
Summary and
Readings
Forgery (CSRF) attack
NOTE: While invisible to normal user, it can become visible using any
browser’s developer tools or "View Source" functionality. DO NOT
use hidden inputs as a form of security!
Some badly-implemented web pages use hidden fields to include
sensitive information including plain text password! Don’t repeat the
mistake.

14/30
 Input Types
BUW3213 Dynamic
Web System
Development reset
Dr. Vee Voon Yee
displays a push button with the preset function of clearing all the data
Introduction in the form back to its original state
HTML Form
value attribute can be used to show text in the reset button
Form Elements
Issues Related to
name and value attributes are optional unless there is more than
Forms
one reset button
Summary and
Readings Tip: Avoid reset buttons in your forms! It is frustrating for users if they
click them by mistake.
Any better way?
submit
displays a push button with the preset function of sending the
entered data in the form to the server for processing
value attribute defines what text to show in the button
name and value attributes optional unless there is more than one
submit button

15/30
 Input Types
BUW3213 Dynamic
Web System
Development file
Dr. Vee Voon Yee
For uploading a file to the web browser
Introduction
HTML Form
date
Form Elements For entering a date either with a text box or a date picker
Issues Related to
Forms
Doesn’t work in all browsers
Summary and
Readings
range
For entering a numeric value whose exact value is not considered
important
Typically represented using a slider or dial control
Value ranges from min (default is 0) to max (default is 100) at a
multiple of step (default is 1)

16/30
 Input Types
BUW3213 Dynamic
Web System
Development color (not colour! Why?)
Dr. Vee Voon Yee
For specifying a color
Introduction Typically by either using a visual color picker interface or entering the
HTML Form
color into a text field in #rrggbb hexadecimal format
Form Elements
Issues Related to <input type="color">
Forms
Summary and More!
Readings
button, datetime-local, email, image, month, number,
search, tel, time, url, week
May not have been supported by all browsers, however features
degrade nicely (e.g., some become regular text boxes)
Reference:

https://developer.mozilla.org/en- US/docs/Web/HTML/Element/input

17/30
 More Input Attributes

BUW3213 Dynamic
Web System
Development autofocus: The field should automatically get focus when the
Dr. Vee Voon Yee
page loads
Introduction
HTML Form
required: Input field must be filled out before submitting the form
Form Elements pattern: A regular expression that the input field’s value is
Issues Related to
Forms checked against when the form is submitted
Summary and
Readings \d: Indicates a single number 0–9 (same as [0-9])
\d{3}: Indicates exactly three digits
\d{4,7}: Indicates four to seven digits
Hint: Use placeholder or title to let users know how they should
input
autocomplete: Whether a form or an input field should have
autocomplete on or off (e.g., off for credit card information)

18/30
 Textarea Form Control
BUW3213 Dynamic
Web System
Development textarea
Dr. Vee Voon Yee
For entering multiple lines of text
Introduction
Attributes
HTML Form
Form Elements name: required
Issues Related to
Forms
maxlength: limit of the number of characters that can be entered
Summary and into the field
Readings
cols: visible width (default is 20)
rows: visible number of lines (default is 2)
wrap:
soft: text is not wrapped when submitted in a form
hard: text is wrapped (with CR+LF pair) when submitted in a form
<form name="myForm" ... >
<textarea name="comments" rows="4" cols="20" placeholder="Some hints.">Default text
here. Will show placeholder text if user deletes this.</textarea>
</form>

19/30
 Select Form Element
BUW3213 Dynamic
Web System
Development Drop-down list with options
Dr. Vee Voon Yee
Consists of two parts:
Introduction
HTML Form
<select> tag
Form Elements
<option> tag
Issues Related to nested within the <select> tag
Forms
Summary and Attributes of select:
Readings
size: number of visible options
multiple: Boolean attribute that specifies that multiple options can
be selected at once
Attributes of option:
selected: Boolean attribute that specifies that the option should be
pre-selected
value: Value to be sent to a server

20/30
 Select Form Element
BUW3213 Dynamic
Web System
Development Items can optionally be grouped into a separate submenu with
Dr. Vee Voon Yee
optgroup
Introduction
HTML Form
Form Elements <label for="subject">Choose a subject:</label>
<select name="subject" id="subject">
Issues Related to <optgroup label="Programming">
Forms
<option value="c">C</option>
Summary and <option value="cpp">C++</option>
Readings <option value="java">Java</option>
</optgroup>
<optgroup label="Science">
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="biology">Biology</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">

21/30
 Button Element
BUW3213 Dynamic
Web System
Development <button> represents a clickable button
Dr. Vee Voon Yee
For submitting form with standard button functionality
Introduction Presented in a style resembling the platform the user agent runs on,
HTML Form
but appearance can be changed with CSS
Form Elements
Issues Related to <button onclick="script/something">A Button!</button>
Forms
Summary and
Readings
<button> seems to be very similar to <input type="button">.
Any difference?

22/30
 Organizing Form Elements

BUW3213 Dynamic
Web System
Development Related form components can be group into a fieldset
Dr. Vee Voon Yee
Easier for visitors to understand the form and fill it out properly
Introduction
HTML Form The legend tag can be used to define a caption for the fieldset
Form Elements
element
Issues Related to
Forms
Summary and
Readings <fieldset>
<legend>Personal Information</legend>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>

23/30
 Form Label

BUW3213 Dynamic
Web System
Development <label> tag defines a label for many types of form controls
Dr. Vee Voon Yee
To associate a label with a form control element, let the for
Introduction
HTML Form
attribute of the <label> to be equal to the id attribute of the
Form Elements control element.
Issues Related to <label for="username">User Name:</label><br>
Forms <input id="name" name="name" type="text"><br>
Summary and <label for="password">Password:</label><br>
Readings <input id="password" name="password" type="password"><br>

Benefit of associating a <label> with <input>:

User can click the associated label to focus/activate the associated
input control
Screen reader users: Label will be read out loud when the element is
focused

24/30
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

1 Introduction
Introduction
HTML Form
Form Elements
Issues Related to
Forms
2 HTML Form
Summary and
Readings

3 Form Elements

4 Issues Related to Forms

5 Summary and Readings

25/30
 Use Spellcheck Attribute

BUW3213 Dynamic
Web System
Development Text fields (including some <input> elements and <textarea>)
Dr. Vee Voon Yee can be spelled check by using the spellcheck global attribute
Introduction Language used is based on the lang attribute in <html>
HTML Form
Set it to true or false according to the nature of the text
Form Elements
Issues Related to
E.g., on for comments, off for person’s full name
Forms
<html lang="en">
Summary and ...
Readings
<textarea spellcheck="true">...</textarea>
...
<input name="name" type="text" spellcheck="false">
...
</html>

Reference:
https://developer.mozilla.org/en- US/docs/Web/HTML/Global_attributes/spellcheck

26/30
 Demo Codes

BUW3213 Dynamic
Web System
Development Demo codes for HTML form
Dr. Vee Voon Yee Align the labels and the fields properly with CSS
Introduction With float or table
HTML Form
Input elements
Form Elements
Issues Related to
Various types of select
Forms Some attributes including readonly, spellcheck
Summary and
Readings Decorate form elements with CSS
required, invalid
Miscellaneous
Show submitted form content with a PHP script

27/30
 Some Form Design Guidelines

BUW3213 Dynamic
Web System
Development Label input boxes with clear instructions
Dr. Vee Voon Yee
Group related form items into a fieldset
Introduction
HTML Form Control user’s entries with radio buttons, checkboxes and selection
Form Elements
lists when possible
Issues Related to
Forms
Let users know the correct format to enter date fields:
Summary and
Readings yyyy/mm/dd, dd/mm/yyyy, mm/dd/yyyy, dd-MMM-yyyy?
Consider using radio buttons for five or fewer options
Consider using selection lists for many possible options

28/30
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

1 Introduction
Introduction
HTML Form
Form Elements
Issues Related to
Forms
2 HTML Form
Summary and
Readings

3 Form Elements

4 Issues Related to Forms

5 Summary and Readings

29/30
 Readings

BUW3213 Dynamic
Web System
Development Readings: w3schools Forms
Dr. Vee Voon Yee
Readings: MDN HTML Forms
Introduction
HTML Form Readings: Regular Expressions
Form Elements
Issues Related to
Resource: W3C Web Validation
Forms
Summary and
Readings

30/30