HTML Elements: Forms and
Controls
Chapter 9
B. Ramamurthy
Images, Tables, Forms, …
• You want to include images in your page?
• Images and img tag we used in very nicely covered in Chapter 7
• You want to display information in a tabular form?
• Table, th(heading), tr(row), td(data cell) are discussed with examples in
Chapter 8
• We introduced forms that are discussed in detail in Chapter 9.
• When we shift from web site to an application HTML5 provides forms
and controls and attributes.
• We will discuss forms in detail today.
Parts of a HTML form
• The first part is the form that you see on the page itself that is created
using HTML markup.
• Forms are made up
• buttons,
• input fields, and
• drop-down menus
• collectively known as form controls used to collect information from the
user.
• The other component of a web form is an application or script on the
server that processes the information collected by the form and returns an
appropriate response. It’s what makes the form work.
HTML Controls
• This is the fun part—playing with the markup that adds form controls to
the page.
• Text entry controls
• Specialized text entry controls
• Submit and reset buttons
• Radio and checkbox buttons
• Pull-down and scrolling menus
• File selection and upload control
• Hidden controls
• Dates and times (HTML5)
• Numerical controls (HTML5)
• Color picker control (HTML5)
Understanding Hangman Web Application
• Two parts:
• HTML controls or tags describing user interface/interaction (UI/UEX)
• Javascript variables and function to process the request from the user
and respond with answer (Request and Response)
HTML UI
• Dividers creating divisions in the layout using <div> </div>
• You can provide various attributes such as width, height, backgroundcolor, align (left, right, center) etc.
• Inside a div you have a form, text input, buttons, img etc.
• HTML elements onclick call a javascript function and pass the
information users entered
Putting all together
.html file
image
and
audio
files
.css
file
.js
file
Web browser
Firefox/ Safari
application
interprets
displays
Prepare/edit files
5/28/2016
7
JS functions
• Javascript “script” consists of functions.
• A function consists of function followed by the name of the function
• The statement that make up the function go next within curly
brackets
• Example:
function saySomething() {
alert(“ We are learning basics of JS”);
}
5/28/2016
8
Javascript Function
• It has variables and functions
• Variables define storage and name for the data user inputs
• Functions can have parameters or arguments from HTML UI
• Functions process the data and send the results (or responses) to the
UI
• Processing statements include: if statement, for statement, random
number generator
• Results are sent back to HTML using
document.getElementById("menu1").innerHTML = ("<img src='hangman"+i+".gif' />")
document.forms[0].word1[t].value = " ";
Form: Text Entry Control
• Single line text field
<li><label>City <input type="text" name="city" id="form-city“
value="Your Hometown" maxlength="50"></label></li>
• Multiple-line text field
<p><label>Official contest entry: <br>
<em>Tell us why you love the band. Five winners will get backstage passes!</em><br>
<textarea name="contest_entry" rows="5" cols="50">The band is totally
awesome!</textarea></label></p>
<p>Official contest entry:<br>
<em>Tell us why you love the band. Five winners will get backstage passes!</em><br>
<textarea name="contest_entry" placeholder="50 words or less"> </textarea></p>
Other types of Input
• <input type="search">
Search field
• <input type="email">
Email address
• <input type="tel">
Telephone number
• <input type="url">
Location (URL)
Password Input
<li><label for="form-pswd">Log in:</label><br>
<input type="password" name="pswd" maxlength="8" id="formpswd"></li>
Data List (pre-defined options)
• A datalist creates a pop-up menu of suggested values for a text entry
field.
<p>Education completed: <input type="text"
list="edulevel" name="education">
<datalist id="edulevel">
<option value="High School">
<option value="Bachelors Degree">
<option value="Masters Degree">
<option value="PhD">
</datalist>
Submit and Reset button
<p><input type="submit"> <input type="reset" value="Start over"></p>