Semester I

DCC THEORY2: WEB DESIGN

(Unit-3)-Part2
Harshita Mathur
Department of Computer Science
Email : [email protected]

1
HTML Forms

30-Sep-23
 Introduction
 A Form is an area that can contain Form
Control/Elements.

 Each piece of information for a form is stored in a Field.

 The value itself is called Field Value.

3
 Parts of a Web Form
 Users enter or select a field using Form
Control/ Elements.

 Form/Control elements include: buttons, checkboxes, text fields, radio

buttons, drop-down menus, etc

 A form usually contains a Submit button to send the information in the form
elements to the server

4
 Control Elements
 Input Boxes – for text and numerical entries

 Option Buttons, also called Radio Buttons – for selecting a single option from a
predefined list
 Selection Lists – for long lists of options, usually appearing in a Drop-Down
List Box
 Check Boxes – for specifying yes or no

 Text Areas – for extended entries that can include several lines of text

5
 HTML Forms
 The basic construction of a HTML form is this...
<form> - begin a form
<input> - ask for information in one of several different ways
<input> - there can be as many input areas as you wish
</form> - end a form HTML form

6
 Forms and Server-Based Programs
 Forms are used to collect information.

 The information is then sent back to the server.

 Information is stored and analyzed using a program on the server.

 By giving users access to programs that react to user input, the Web became a
more dynamic environment where companies and users could interact.

7
 Forms and Server-Based Programs
 Server-Based programs provide:

 Online databases containing customer information

 Online catalogs for ordering and purchasing merchandise

 Dynamic Web sites with content that is constantly modified and updated

 Message boards for hosting online discussion forums

8
 Forms and Server-Based Programs
 Because these programs run on Web servers, rather than locally, users might not
have permission to create or edit them. Instead, users will receive information
about how to interact with the programs on the server.

 Several reason to restrict direct access:

 When you run a server-based program, you are interacting directly with the
server
 Security risks (computer hackers)
 Drain on system resources caused by large number of programs running
simultaneously

9
 Forms and Server-Based Programs
 Server-Based Programs
 Common Gateway Interface (CGI) Scripts
 Most common
 ASP
 Cold Fusion
 C/C++
 PHP
 VBScript
 The Web server determines which language your Web form will use.

10
 Getting Started
 The first step in creating a form is to specify the name and location of the CGI
script that will be used to process the form data. To do this, type the following
code within your HTML file, and note that there are no spaces:

 <form METHOD="Post" ACTION=http://www.temple.edu/cgi-

in/[email protected]>

 For example, if your e-mail address is [email protected], you would enter:

 <form METHOD="Post" ACTION="http://www.temple.edu/cgi-

bin/[email protected]">

11
 Text Input (type=“text”)
 A Text Field:
 used to create one line fields that viewers can type text. The default width
is 20 characters, and you can create fields of other sizes by the value in the
size option. You can limit the number of characters by the value of the
MAXLENGTH option. Text input fields will be empty when the page
loads, unless you provide an initial text string for its VALUE option

 <input type="text" name="textfield" size=“value”

value="with an initial value">

12
 Text Input (type=“text”)
 Example 1: A text field named "text1" that is 30 characters wide.
 <input type="text" name="text1" size="30">

 Example 2: A text field named "text2" that is 30 characters wide but

will only accept 20 characters.
 <input type="text" name="text2" size="30" maxlength="20">

 Example 3: A text field named "text3" that is 40 characters wide

with default value.
 <input type="text" name="text3" size="40" value="We are not
alone">

13
 Password Input (type=“password”)
 are exactly the same as text input elements, except that when the viewer types in,
they see "bullet" characters rather then the letter they are typing. Password text is
scrambled during transmission and then unscramble when the form data is received
at the server end.

 Example 4: A password field named "pass1" that is 30 characters wide

 <input type="password" name="pass1" size="30">

 Example 5: A password field named "pass2" that is 30 characters wide

but will only accept 20 characters
 <input type="password" name="pass2" size="30" maxlength="20">

14
 Text Input (type=“textarea”)
 Text fields that have more than one line and can scroll as the viewer enters more
text. The tag options define the size of the field by the number of rows and
character columns. By adding the option WRAP=VIRTUAL, the text entered
will automatically wrap at the right hand side of the field.You can also include
default text to appear in the field

 Example 6: A textarea field named "comments" that is 45 characters

wide and 6 lines high
 <textarea name="comments" rows="6" cols="45"
wrap="virtual">
The first time I ever saw a web page, I thought.... (continue)
</textarea>

15
 Adding Control Buttons
 A form must include at least one control button for submitting the information
once it is filled out. In addition, forms often include a button for resetting all
the entries if a person wants to start over.

 When a person presses the submit button, he or she will receive confirmation
that the form results were sent to your e-mail address.You will then see an e-
mail message in your Inbox with the subject FORM results.

16
 Adding Control Buttons
 A submit button:
<input type="submit" name="Submit" value="Submit">
 A reset button:
<input type="reset" name="Submit2" value="Reset">

 submit: send data

 reset: restore all form elements to their

initial state

• Note that the type is input, not “button”

17
 Radio buttons (type=“radio”)
 Are sets of controls that are linked so that only one radio button among each set
is selected at a time

 If you click one radio button, the others in the set are automatically de-selected

 A set of radio buttons is defined by providing them the same name

 The value sent in the web form is the value of the radio button that was last
selected

 Adding the option CHECKED to one of the buttons in a set will make that
button highlighted when the page loads

 Radio buttons do not contain any text

18
 Radio buttons (type=“radio”)
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female

19
 Checkboxes (type=“checkbox”)
 Are similar to radio buttons, but are not affected by other buttons, so you can
have more than one in a group checked at a time

 Note that every checkbox has a unique name. If there is no check in the box,
clicking it will place an X or a check mark there

 If the box is checked, clicking it again will remove the mark. The value sent in
the web form is the value of the checkbox if it was selected; otherwise the value
will be empty

 Adding the option CHECKED to a checkbox will make that checkbox

highlighted when the page loads.

20
 Checkboxes (type=“checkbox”)
 A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>

 type: “checkbox”
 name: used to reference this form element from JavaScript
 value: value to be returned when element is checked
 Note that there is no text associated with the checkbox—you have to supply text
in the surrounding HTML

21
 Drop-down menu or list
 A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value=“blue">blue</option>
</select>

 Additional arguments:
 size: the number of items visible in the list (default is "1")
 multiple: if set to "true", any number of items may be selected (default is
"false")

22
 Practice Exercise

23
 A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>

24
  HTML <fieldset> element:
 The <fieldset> element in HTML is used to group the related information of a
form. This element is used with <legend> element which provide caption for
the grouped elements.

25
  Example:
 <form>
 <fieldset>
 <legend>User Information:</legend>
 <label for="name">Enter name</label><br>
 <input type="text" id="name" name="name"><br>
 <label for="pass">Enter Password</label><br>
 <input type="Password" id="pass" name="pass"><br>
 <input type="submit" value="submit">
 </fieldset>
 </form>

26
 Form Attributes
 Method attribute
 The method attribute is used to specify the HTTP method that should be used
to submit the form data. There are two possible values for this attribute:
 GET: This method appends the form data to the URL of the action attribute,
and sends the data as query parameters in the URL. This is useful for forms that
retrieve data from the server, as it allows the user to bookmark or share the
URL to retrieve the same data later.
 POST: This method sends the form data in the body of the HTTP request,
which is more secure and can handle larger amounts of data than the GET
method. This is the preferred method for forms that submit data to the server,
such as login forms, contact forms, and registration forms.
<form method="POST">
<!-- form elements here -->
</form>

27
  Action attribute
 The action attribute is used to specify the URL of the server-side script or
web page that should receive the form data. This URL can be relative or
absolute, and should correspond to the server-side processing code that will
handle the form data.
 Following is an example of how to set the action attribute in an HTML form:
 <form method="POST" action="/submit-form.php">
 <!-- form elements here -->
 </form>
 In the above example, the form data will be submitted to the "/submit-
form.php" URL using the POST method, and the server-side PHP script
located at that URL will handle the form data and take appropriate actions
based on the user's input.

28
  Target attribute
 The target attribute is used to specify where the response from the server should be
displayed after the form has been submitted. There are two possible values for this
attribute:
 _self: This value indicates that the server response should be displayed in the same
window or frame that contains the form. This is the default value if the target attribute is
not specified.
 _blank: This value indicates that the server response should be displayed in a new
window or tab.
 <form action="/submit-form.php" method="POST" target="_blank"> <!-- form
elements here --> <button type="submit">Submit</button> </form>
 In the above example, the target attribute is set to _blank, which means that the
response from the server will be displayed in a new window or tab. This can be useful for
forms that require a separate window or frame for displaying the results, such as search
forms or data entry forms.

29
  Name attribute
 The name attribute is used to give a unique name to the form. This name is used
when the form is submitted to the server, and can be used to differentiate
between multiple forms on a single page.
 <form name="myForm">
 <!-- form elements here -->
 </form>
 In the above example, the name attribute is set to "myForm". This name can
be used later in a script to refer to this specific form and manipulate its
elements.

30
  ID attribute
 The id attribute is used to give a unique identifier to the form. This identifier
can be used for styling or for scripting purposes.
 <form id="myForm">
 <!-- form elements here -->
 </form>
 In the above example, the id attribute is set to "myForm". This identifier can be
used later in a script or in a CSS stylesheet to refer to this specific form and
apply styles or behavior.
 It's important to note that the name and id attributes should be unique
across the entire HTML document. This means that you should not use the same
name or id for multiple forms or HTML elements on the same page.

31
  Autocomplete attribute
 The autocomplete attribute in an HTML form is used to control whether the
browser should automatically complete input fields with previously entered
data.
 This attribute is particularly useful for forms that require sensitive
information such as credit card numbers or passwords, where the user may
not want the browser to automatically fill in this information.
 The autocomplete attribute can take on the following values:
 on: This is the default value and allows the browser to automatically complete
input fields.
 off: This value disables the browser's autocomplete feature for the input field.

32
 Sample form:1
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" autocomplete="off">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
autocomplete="off">
<button type="submit">Submit</button>
</form>

33
 Sample form:2
<!DOCTYPE html>
<html>
<head>
<title>Submit Button</title>
</head>
<body>
<form>
<p>
<label>Username : <input type="text" /></label>
</p>
<p>
<label>Password : <input type="password" /></label>
</p>
34
 <p>
<input type = "submit" name = "submit" value = "Submit" />
</p>
</form>
</body>
</html>

35
 Sample form:3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Details</title>
</head>
<body>
<form>
<fieldset>
<legend>Employee Details</legend>
<p>
First name: <input type = "text" name = "fname" />
</p>

36
 <p>
Last name: <input type = "text" name = "lname" />
</p>
<p>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</p>
<p>
Employee ID: <input type = "text" name = "ID" />
</p>
<p>
Designation: <input type = "text" name = "ID" />
</p>
37
 <p>Phone Number: <input type = "text" name = "phone" /></p>
<p><input type = "submit" name = "submit" value = "Submit" /></p>
</fieldset>
</form>
</body>
</html>

38
 Sample form:4
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="gender">gender:</label>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>

39
 <option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>

<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30"
rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>

40
41
 Sample form:5
<html>
<head>
<title>Reset Button in form using HTML?</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">My Page</h1>
<h2> How to Create a Reset Button in form using HTML?</h2>
<form>
Email ID:<input type="email"><br><br>
Password:<input type="password"><br><br>
<input type="submit“>
<input type="reset">
</form>
</body>
42 </html>
43