Scribd
Upload
12 views

01 - Build Form Using HTML

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

01 - Build Form Using HTML

Uploaded by

mohamednoamann54
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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