FORMS

Topic: Using FORMS in HTML
Objectives:
a.) Discuss Form element, tags and its
attributes.
b.) Understand how to structure HTML
forms
c) Application in the real world situation on
how Forms are usable and accessible.
Forms are HTML elements
that allow readers to send
information back to the web
page’s server computer. The
most commonly used of forms
are those for accepting
comments, credit card
numbers and email addresses
of page visitors or viewers.
Forms are very much like dialog
boxes in the windows OS
environment, for they provide a
two-way communication path
between the visitor of the page
and the organization publishing it.
And just like dialog boxes, forms
consists of controls that can be
used by the visitor to “respond”
to the page.
Once the data is sent to the server, a
program, known as the form processor,
handles manipulation of the data and
decides whether to send results back
again to the user and which results to
send. This cycle takes place depending
on the “response” of the viewer or the
instructions that specifies the behavior
of the form processor.
The tag used to begin a form declaration
within the HTML document is denoted by
<FORM> and is paired with the
</FORM> closing tag.
Basic HTML Form Tags/Attributes
Tag/Attribute Purpose
<FORM> Declares the beginning of a form.
<input type = “submit” value=“send”> Paired with the <</Form>
<Input type = “image”>name=“point” Provides a submit button. The VALUE

src=“image.jpg” border=0> attribute provides text on the button
surface. Provides a graphical submit button.
The SRC attribute indicates the image
source file and the BORDER = 0 part turns
off the image border.
<INPUT TYPE=“RESET” Value = “reset”> Provides a reset button.
ACTION=“URL” Specifies the location of the form processor.

Example: <FORM ACTION
=“C:\process.cgi”>
Target =‘ ’ Identifies the named frame in which the

output of the form processor would be
displayed (e.g. <Form Target = “Frame1”>.
Common HTML Tags and Attributes
for Form Controls
Tag/Attribute-Value Control Type Example
<input type = “text”> Data-entry field One-line data-entry field
(textbox) like a textbox.
<input type Password textbox Textbox that displays
=“password”> characters as asterisks.
Paragraph textbox.
<textarea> Multiple-line textbox Paragraph textbox .
<input type Checkbox Provides boxes that are
=“checkbox”> selected by checking
<Input type=“radio”> Radio Button Provides options for
selection.
<Select> List Selects one or more
items from list.
<input type = “submit”> Submit button Sends data to server
<input type = “reset”> Reset button Resets all form controls
to their default value.
Examples1. Text Input Control
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
Example 2: Password Input Control
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Example 3. Multiple-line Input
Control
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
Example 4. Checkbox Controls
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
Example 5. Radio Box Control
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>
Example 6. Select Box Control
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>
Example 7. File Upload Box
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src="/html/images/logo.png" />
</form>
</body>
</html>
Perform Individual Hands-
on activities using FORM
END

FORMS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

FORMS

Загружено:

Авторское право:

Доступные форматы

Topic: Using FORMS in HTML

<input type = “submit” value=“send”> Paired with the <</Form>

<Input type = “image”>name=“point” Provides a submit button. The VALUE

ACTION=“URL” Specifies the location of the form processor.

Target =‘ ’ Identifies the named frame in which the

Вам также может понравиться