Scribd
Upload
8 views

01 - Build Form Using HTML

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

01 - Build Form Using HTML

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

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

You might also like