Web Programming
03 Build Form using HTML
Dr. Mostafa Elgendy
2
Agenda
❖ Introduction
❖ Building Forms
❖ Summary
8-Mar-23
3
Introduction
8-Mar-23
4
Introduction
❖ An HTML form is used to collect user input.
❖ The user input is most often sent to a server for processing.
8-Mar-23
5
Introduction
❖ Handling forms is a multipart process.
❖ The creation of a form into which a user can enter the required details.
❖ Data is sent to the web server to be interpreted with some error checking.
❖ If there is any error, the form may be redisplayed with an error message.
❖ If the code is satisfied with the accuracy of the input, it takes some action:
❖ Saving data to a database, such as entering details about a purchase
8-Mar-23
6
Building forms
8-Mar-23
7
Building forms
❖ An opening <form> and closing </form> tag
❖ One or more input fields
❖ A submission type specifying either a GET or POST method
❖ The destination URL to which the form data is to be submitted
8-Mar-23
8
Building forms
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form method="post" action="formtest.php">
What is your name?
<input type="text" name="name">
<input type="submit">
</form>
</body>
</html>
HTML
8-Mar-23
9
Building forms
❖ You can make the same form using PHP code
<?php // formtest.php
echo <<<_END
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form method="post" action="formtest.php">
What is your name?
<input type="text" name="name">
<input type="submit">
</form>
</body> </html>
_END; ?> HTML
8-Mar-23
10
Input Types: Text
❖ You will use text box a lot.
❖ It accepts a wide range of alphanumeric text and other
characters in a single-line box.
❖ The general format of a text box input is as follows:
<input type= "text" name="name" size="size" maxlength="length" value="value" >
HTML
8-Mar-23
11
Input Types: Text
❖ Attributes:
❖ Name: an identifier attribute that’s used for sending data through the HTML form element
❖ Value: specifies an initial value for an input field
❖ Size: specifies the width of the box (in characters of the current font).
❖ Maxlength: specifies the maximum number of characters that a user is allowed to enter.
❖ Disabled: specifies that an input field should be disabled. A disabled input field is
unusable and un-clickable.
IS388 - Web Programming 8-Mar-23
12
Input Types: Text
<html>
<body>
<form method="post" action="calc.php">
<pre>
Loan Amount <input type="text" name="principal">
Number of Years <input type="text" name="years" value="15">
Interest Rate <input type="text" name="interest" value="3">
</pre>
</form>
</body>
</html>
HTML
8-Mar-23
13
Label element
❖ Defines a label for many form elements and useful for screen-
reader user.
❖ Help users who have difficulty clicking on very small regions such
as checkboxes
❖ When the user clicks the text within the <label> element, it toggles the
checkbox.
8-Mar-23
14
Label element
❖ Attributes:
❖ for: should be equal to the id attribute of the <input> element to bind them
together.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
HTML
8-Mar-23
15
Input Types: number
❖ Defines a numeric input field.
❖ You can also set restrictions on what numbers are accepted
using min and max attributes.
❖ The general format is:
<input type= "number" name="name" min="min" max="max" >
HTML
8-Mar-23
16
Input Types: number
<html>
<body>
<form method="post" action="login.php">
<label for="quantity">Quantity (between 1 and
5):</label><br>
<input type="number" id="quantity" name="quantity"
min="1" max="5" ><br>
</form>
</body>
</html>
HTML
8-Mar-23
17
Input Types: Password
❖ Defines a password field where characters are masked.
❖ The general format is:
<input type= "password" name="name" size="size" maxlength="length" >
HTML
8-Mar-23
18
Input Types: Password
<html>
<body>
<form method="post" action="login.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
HTML
8-Mar-23
19
Input Types: Email
❖ Used for input fields that should contain an e-mail address.
❖ Some smartphones recognize the email type and add ".com" to
the keyboard to match email input:
<input type= "email" name="name" size="size" maxlength="length" >
HTML
8-Mar-23
20
Input Types: Email
<html>
<body>
<form method="post" action="login.php">
<label for="email">Enter your email:</label><br>
<input type="email" id="email"
name="email"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
<input type="submit">
</form>
</body>
</html>
HTML
8-Mar-23
21
Input types: Checkbox
❖ When you want to offer number of options to a user, from which they
can select one or more items.
❖ If the user check the box, a value of "on" will be submitted.
❖ You can change it using the value attribute
❖ The general format is:
<input type="checkbox" name="name" value="value" checked="checked">
HTML
8-Mar-23
22
Input types: Checkbox
<form method="post" action="calc.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
HTML
8-Mar-23
23
Input types: Radio
❖ Let a user select ONLY ONE of a limited number of choices.
❖ All the buttons in a group must use the same name, so,
❖ A single value is returned.
❖ The general format is:
<input type="radio" name="name" value="value" checked="checked">
HTML
8-Mar-23
24
Input types: Radio
<form method="post" action="calc.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="Javascript">
<label for=" javascript ">JavaScript</label><br>
</form>
HTML
8-Mar-23
25
Input types: Date
❖ is used for input fields that should contain a date.
❖ Depending on browser support, a date picker can show up in the
input field.
❖ The general format is:
<input type="date" name="name">
HTML
8-Mar-23
26
Input types: Date
<form method="post" action="login.php">
<label for="birthday">Birthday</label><br>
<input type="date" id="birthday" name="birthday" >
</form>
HTML
8-Mar-23
27
Input types: Datetime-local
❖ Used to specify a date and time input field.
❖ The general format is:
<input type="datetime-local" name="name">
HTML
8-Mar-23
28
Input types: Datetime-local
<form method="post" action="login.php">
<label for="birthday">Birthdate</label><br>
<input type="datetime-local" id="birthday"
name="birthday" >
</form>
HTML
8-Mar-23
29
Input types: Month
❖ Allows the user to select a month and year.
❖ The general format is:
<input type="month" name="name">
HTML
8-Mar-23
30
Input types: Month
<form method="post" action="login.php">
<label for="birthmonth">Birthday (month and
year)</label><br>
<input type="month" id=" birthmonth " name="
birthmonth " >
</form>
HTML
8-Mar-23
31
Input types: time
❖ Allows the user to select a month and year.
❖ The general format is:
<input type="time" name="name">
HTML
8-Mar-23
32
Input types: time
<form method="post" action="login.php">
<label for="appt">Select a time:</label><br>
<input type="time" id="appt" name="appt" >
</form>
HTML
8-Mar-23
33
Input types: submit
❖ Defines a button for submitting form data to a form-handler.
❖ The form-handler is typically a PHP page with a script for
processing input data.
❖ The general format is:
<input type="submit" value="Submit">
HTML
8-Mar-23
34
Input types: submit
<form method="post" action="login.php">
<label for="fname"> First name: </label>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname"> Last name: </label>
<input type="text" id="lname" name="lname" value="Doe"><br>
<label for="pass"> Password: </label>
<input type="password" id="pass" name="pass" value="1234">
<br>
<input type="submit" value="Submit" >
</form> HTML
8-Mar-23
35
Form Handling
IS388 - Web Programming 8-Mar-23
36
Form Handling
❖ When you enter form data and click the submit button, the form
data is sent to the webserver for processing
❖ So now it’s time to add some PHP code to process the data
submitted by the form.
IS388 - Web Programming 8-Mar-23
37
Form Handling
❖ You have to declare which PHP file will
process you the data submitted by the <html>
<head>
form. <title>Form Test</title>
</head>
❖ In this form, we declare that <body>
<form method="post" action="formtest.php">
formtest.php will process our data
What is your name?
using action attribute. <input type="text" name="name">
<input type="submit">
❖ We have to declare which way we use </form>
</body>
to send our data using method </html>
attribute. HTML
IS388 - Web Programming 8-Mar-23
38
Form Handling methods
❖ When you enter form data and click the submit button, the form data is sent
to the webserver for processing using GET or POST methods
❖ Post: sends all contents of a form with basically hidden headers (not easily visible to
users)
❖ Get: sends all form input in the URL requested using name=value pairs separated by
ampersands (&)
❖ E.g. process.php?name=trevor&number=345
❖ Is visible in the URL shown in the browser
IS388 - Web Programming 8-Mar-23
39
Form Handling methods
❖ All form values are placed into an array
❖ Assume a form contains one input text called "txtName" and the
form is submitted using the post method, invoking process.php.
❖ process.php could access the form data using:
❖ $_POST["txtName"].
❖ $_GET["txtName"].
IS388 - Web Programming 8-Mar-23
40
Form Handling methods
❖ When to use GET?
❖ Information sent from a form with the GET method is visible to everyone
(all variable names and values are displayed in the URL).
❖ Has limits on the amount of information to send. The limitation is about
2000 characters.
❖ GET may be used for sending non-sensitive data.
IS388 - Web Programming 8-Mar-23
41
Form Handling methods
❖ When to use POST?
❖ Information sent from a form with the POST method is invisible to others
(all names/values are embedded within the body of the HTTP request)
❖ Has no limits on the amount of information to send.
❖ POST supports advanced functionality such as uploading files to server.
IS388 - Web Programming 8-Mar-23
42
Summary
❖ Introduction
❖ Building Forms
❖ Summary
8-Mar-23
Questions
