Module 4
JavaScript
Forms Creation
● HTML5 provides a mechanism, called a form, for collecting data from a
user.
● Data that users enter on a web page is normally sent to a web server that
provides access to a site’s resources
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>form</title></head>
<body>
<h1>Feedback Form</h1><br>
<p>Please fill out this form to help us improve our site</p>
<form>
<label for="fname">First Name:</label> Label
<input type="text" name="firstname" value=""><br><br> Text box
Last Name:<input type="text" name="lastname" value=""><br><br>
Comments:<br>
<textarea cols="40" rows="5" name="address"></textarea><br><br> Text area
E-Mail address:<input type="text" name="email" value=""><br><br> Text box
Things you liked:<br>
<input type="checkbox" name="checkbox1" value="site design"
checked="checked">site design
<input type="checkbox" name="checkbox2" value="links">links Check box
<input type="checkbox" name="checkbox3" value="ease of use">ease off use
<input type="checkbox" name="checkbox4" value="images">Images
<input type="checkbox" name="checkbox5" value="source code">Source
code<br><br>
How did you get to our site:<br>
<input type="radio" name="radio" value="search engine"
checked="checked"> search engine
Radio button
<input type="radio" name="radio" value="Links from another
site">Links from another site
<input type="radio" name="radio" value="[Link] website"> website
<input type="radio" name="radio" value="Reference in a
book">Reference in a book
<input type="radio" name="radio" value="other">other<br><br>
Rate our website:
<select>
<option selected>Amazing</option>
<option>5</option>
Menus
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select><br><br>
<input type="submit" value="submit">
Button
<input type="reset" value="clear">
</form>
</body>
</html>
Hidden field
● The <input type="hidden"> defines a hidden input field.
● A hidden field let web developers include data that cannot be seen or
modified by users when a form is submitted.
● A hidden field often stores what database record that needs to be updated
when the form is submitted.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>form</title>
</head>
<body>
<h1>A Hidden Field</h1>
<form method = "post" action = "[Link]
<label>Name:</label>
<input type="text" name="fname" value=""><br><br>
<label>Password</label>
<input type="password"name="p1" value="">
<input type="hidden" name = "recipient" value = "deitel@[Link]"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="clear">
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>form</title>
</head>
<body>
<h1>A Hidden Field</h1>
<form method = "get" action = "[Link]
<label>Name:</label>
<input type="text" name="fname" value=""><br><br>
<label>Password</label>
<input type="password"name="p1" value="">
<input type="hidden" name = "recipient" value = "deitel@[Link]"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="clear">
</form>
</body>
HTML 5 Form elements
<!DOCTYPE html>
<html>
<body>
<form>
select color:<input type = "color"><br>
select date:<input type = "date"><br>
enter email:<input type = "email" placeholder = "name@[Link]" required><br>
select month:<input type = "month"/> <br>
select number:<input type = "number" min = "0" max = "7" step = "1" value="0"/> <br>
select range:<input type = "range" min = "0" max = "20" value = "10"/><br>
search:<input type = "search" placeholder = "search query" /><br>
select time:<input type = "time" /> <br> select
week: <input type = "week" /><br>
</form>
</body>
</html>