FRONT END

(Html)
LECTURE-7
 Today’s Agenda

How to work with forms

How to work input controls

 What is an HTML Form ?

 An HTML form is a section of a document containing normal

content, markup and special elements called controls.

 HTML forms are used to pass data to a server.

 Users generally “fill the form“ by modifying its controls

(entering text, selecting menu items, etc.), before submitting
the form to a server for processing
A Sample Registration Form
 Creating an HTML Form

To create an HTML form we use the <form> tag.

Syntax :
<form action=“.....” method=“.....”>
.
input controls
.
</form>
 What are “input controls” ?

 An HTML form can contain GUI elements like

1. Text fields
2. Checkboxes
3. Radio-buttons
4. Lists
and many more.

These all are called “input controls” because users use them for
inputting data.
 Tags For Input Controls

Input controls are generated using 3 types of

tags:
1. Input
2. TextArea
3. Select
 The <input> Tag

 The HTML <input> element inserts one of many types of

controls in form, usually destined to collect information
provided by the user.

 The type of control displayed depends on the "type" attribute

which may take one of the nine values given in next slide.
 The <input> Tag Controls

1. text
2. password
3. checkbox
4. radio
5. submit
6. reset
7. button
8. image
9. file
 General Syntax of “input” Tag

<input
type=“ . . .”
name=“. . .”
size=“. . .”
maxlength=“. . .”
value=“. . .”
checked=“. . .“
>
 Creating “textboxes”

 The TextBox is the most common input type and to make HTML
easier, is the default for the <input> tag.

 This tag lets our readers type in any text information into the
box.

 To create a TextBox we set the “type” attribute to the value

“text” which creates a single line text box of the specified size.

 If size is not given the TextBox is of 20 characters

Syntax:
<input type=“text” >
 Example 1

<form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text"
name="lastname">
</form>
 Creating “password fields”

 The password field looks almost identical to the TextBox.

 However, when we type in it, the letters are hidden.

 The passwords are not sent encrypted in any way.

 Creating “password fields”

 To create a Password field we set the “type” attribute to the

value “password” which creates a single line text box of the
specified size.

 If size is not given the textbox is of 20 characters

Syntax:
<input type=“password” >
 Example 2

<form>
User Name: <input type="text"
name=“username"><br>
Password: <input type=“password"
name=“pwd">
</form>
 Creating “Checkboxes”

 A checkbox is a control that allows users to switch them

between two values: checked and unckecked.
 This type of control can be useful to ask multiple answer
questions .
 A good example of its use can be a form where the user must
select tpics of interest (movies, radio, shopping, etc.).

 To create a Checkbox we set the “type” attribute to the value

“checkbox”.
Syntax:
<input type=“checkbox” >
 Example 3

<form>
Select the languages you know:<br><br>
<input type="checkbox" name="checkbox1"><b>C</b><br>
<input type="checkbox" name="checkbox2"><b>Php</b><br>
<input type="checkbox" name="checkbox3"><b>C++</b><br>
<input type="checkbox" name="checkbox4"><b>Java</b><br>
</form>
 Using “checked “ Attribute

 A checkbox element can be placed onto a web page in a pre-

checked fashion by setting the checked attribute.

 It is a boolean attribute which if present loads the checkbox

with ON status

Syntax:
<input ... checked />
OR
<input ... checked="checked" />
 Creating “RadioButton”

 Just like a CheckBox a RadioButton is also used to offer the

user a set of predetermined choices.
 But it can offer a single selection at a time.

 To create a RadioButton we set the “type” attribute to the

value “radio”.
 Also we need to set the “name” property of all radios to the
same value to make them mutually exclusive.
Syntax:
<input type=“radio” >
 Example 4

<form>
Your Gender:<br><br>
<input type="radio" name="gender" ><b>Male</b><br>
<input type="radio" name="gender"><b>Female</b><br>
</form>
 Creating “Submit Button”

 A submit button is used to send form data to a server. The data

is sent to the page specified in the form's action attribute.

 The file defined in the action attribute usually does something

with the received input

Syntax:
<input type=“submit” >
 Example 5

<form action=“Login.py“ >

Username: <input type="text" name="user"><br>
Password: <input type=“password" name="user">
<input type="submit" value=“Login">
</form>
 Creating “Reset Button”

 A reset button is used to reset the form to it’s original state

clearing all user input.

Syntax:
<input type=“reset” >
 Example 6

<form name="input" action=“register.jsp" method="get">

Username: <input type="text" name="user"><br>

Password: <input type=“password" name="user">
<input type="submit" value="Submit">
<input type=“reset" value=“Reset">

</form>
 Creating “Button”

 Setting the HTML input element's type attribute to "button"

will render a button with no specific behavior.

 Unlike the "submit" type of input this type will not

automatically submit a web form.

 We use this button type input for engaging users in Javascript

functionality on our pages
Syntax:
<input type=“button” onclick=“fun_name()” >
 Example 7

<form >

Your name: <input type="text”><br>

<input type=“button" value=“Click Me“ onclick=“showmsg()”>

</form>
 Creating “image button”

 Image button’s are images used as buttons

 Image buttons have the same effect as submit buttons. When a

visitor clicks an image button the form is sent to the address
specified in the action setting of the<form> tag.

 Setting the HTML input element's type attribute to “image"

and using src attribute for image path will render a image as
button

Syntax:
<input type=“image” src=“name of image” >
 Example 8

<form name="input" action=“register.py" method="get">

Name: <input type="text"><br>
Contact No:<input type="text"><br>
Gender:<input type="radio" name="gender">Male<input
type="radio" name="gender">Female<br>
<input type="image" src="../images/button_register.gif" >
</form>
 Creating “file upload” button

 Setting the HTML input element's type attribute to "file" will

render a file upload field in a web <form>.

 This allows a user to browse their computer for a file to upload.

 The user places their selected file in the file field and continues
filling out your form and all data can be parsed at once when
they press submit.
Syntax:
<input type=“file” >
 Example 9

<form enctype="multipart/form-data" action=“upload.py"

method="post">

<p>Browse for a file to upload: </p>

<input type="file" name="uploaded_file">
<br /><br />

<input type="submit" value="Upload It Now">

</form>
 End Of Lecture

For any queries mail us @: [email protected]

Call us @ : 0755-4271659, 9826686245

Agenda for Next Lecture:

1. Using Select Control
2. Working with TextArea