SlideShare a Scribd company logo
Creating Forms
Tutorial VI
HTML files or part of files made to be
filled in by viewer / reader for the purpose of
submitting information to the form’s
originator.
HTML Forms
CGI ( Common Gateway Interface) Script
is any program or set of commands
running on the Web server that receives
data from the Web page and then acts
on that data to perform a certain task.
Elements of Forms:
Input boxes – for text and
numerical entries
Radio buttons – also called
option buttons, to select a single
option from a predefined list
Selection lists – for long lists of
options, usually in a drop-down
list box
Check boxes – to specify an
item as either being present or
absent
Text areas – for extended
entries that might include several
lines of text
Submit and Reset buttons – to
either submit the form to the CGI
script or to reset the form to its
original state
CGI script can be written in variety of
computer languages such as the
following:
AppleScript
C / C++
Perl
The UNIX shell
TCL
Visual Basic
JavaScript
Syntax of Form:
<FORM Properties>
Form elements and layout tags
</FORM>
Working with Input Boxes
Input Box – is a single-line box into
which the user can enter text or
numbers.
Syntax:
<INPUT TYPE = Option NAME = Text>
where option is the type of input field, and Text is
the name assigned to the input field.
Example
<INPUT NAME=Country>
Setting a Default Value for an Input
Box
<INPUT SIZE = “value”>
where value is the default text or number that will
appear in the field.
Example
<INPUT NAME=Address SIZE=50>
Creating a Password field
<INPUT TYPE = PASSWORD>
Password Field – is identical to an
input box except that the
characters typed by the user are
displayed as bullets or asterisks.
CREATING A SELECTION LIST
To create a selection list, use the
following set of HTML tags:
<SELECT NAME = Text>
<OPTION> Option 1
<OPTION> Option 2
<OPTION> Option 3
.
.
</SELECT>
Where the NAME property is the field name of the
selection list, and each <OPTION> tag represents
an entry in the list.
<SELECT NAME=Product>
<OPTION>Scanmaster
<OPTION>Scanmaster II
<OPTION>LaserPrint 1000
<OPTION>LaserPrint 5000
<OPTION>Print/Scan 150
<OPTION>Print/Scan 250
</SELECT>
Example
To allow the user to select multiple
items in the selection list, use the
following tag:
<SELECT MULTIPLE>
To display several items in the selection
list, or to change the selection list style
from a drop-down list box to a fully
displayed list box, use the following tag:
<SELECT SIZE = value>
where value is the number of items
displayed in the list box.
Working with Radio Buttons
Syntax:
<INPUT TYPE = RADIO NAME=Text VALUE=value>
Where text is the name assigned to the field
containing the radio button, and value is the value
of the radio button.
Example
<INPUT TYPE=RADIO NAME=USE VALUE=HOME>Home
<INPUT TYPE=RADIO NAME=USE VALUE=BUS>Business
<INPUT TYPE=RADIO NAME=USE VALUE=GOV>Government
<INPUT TYPE=RADIO NAME=USE VALUE=ED>Educational Institution
<INPUT TYPE=RADIO NAME=USE VALUE=OTHER>Other
To create a radio button, use the
following HTML tag:
<SELECT TYPE=RADIO NAME=text VALUE=value>
Where the NAME property specifies the field containing the
radio button, and the VALUE property specifies the value
sent to the CGI script.
To make a particular radio button the
default option, use the following tag:
<SELECT TYPE=RADIO CHECKED>
WORKING WITH CHECK BOXES
To create a check box, use the following tag:
<SELECT TYPE=CHECKBOX NAME=Text VALUE=Value>
where the NAME property specifies the field containing the
check box, and the VALUE property specifies the value sent
to the CGI script if the check box is selected.
To make a check box selected by default, use
the following tag:
<SELECT TYPE=CHECKBOX CHECKED>
Example
<INPUT TYPE=CHECKBOX NAME=WIN9598NT>Windows 95/98/NT
<INPUT TYPE=CHECKBOX NAME=WINDOS>Windows 3.X/DOS
<INPUT TYPE=CHECKBOX NAME=MAC>Macintosh
<INPUT TYPE=CHECKBOX NAME=UNIX>UNIX
<INPUT TYPE=CHECKBOX NAME=OTHER>Other
CREATING A TEXT AREA
To create a text area for extended text entry, use the
following tag:
<TEXTAREA> Default Text </TEXTAREA>
Where the Default Text is the text that initially appears in
the text area (this is optional)
To control how text is wrapped in a text area, use the
following tag:
<TEXTAREA WRAP=Option>
Where option is OFF, SOFT (or VIRTUAL) ,or HARD (or
PHYSICAL). OFF turns off text wrapping. SOFT
(VIRTUAL) turns text wrapping on, but does not send text
wrapping information to the Web server. HARD
(PHYSICAL) turns text wrapping on and also sends this
information to the Web server.
Example
<TEXTAREA ROWS=3 NAME=COMMENTS>Enter comments here
</TEXTAREA>
Fin

More Related Content

PPTX
HTML Forms
Nisa Soomro
 
PPTX
HTML Forms Tutorial
ProdigyView
 
PPTX
html forms
ikram niaz
 
PPSX
HTML5 - Forms
tina1357
 
DOCX
Html forms
Abhishek Kesharwani
 
PDF
2. HTML forms
Pavle Đorđević
 
PDF
Html forms
eShikshak
 
PPTX
HTML Forms
Ravinder Kamboj
 
HTML Forms
Nisa Soomro
 
HTML Forms Tutorial
ProdigyView
 
html forms
ikram niaz
 
HTML5 - Forms
tina1357
 
2. HTML forms
Pavle Đorđević
 
Html forms
eShikshak
 
HTML Forms
Ravinder Kamboj
 

What's hot (20)

PPTX
Building html forms
ice es
 
PDF
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
PPTX
Html forms
Er. Nawaraj Bhandari
 
PPTX
Html form tag
shreyachougule
 
PPTX
Html forms
Himanshu Pathak
 
PPTX
Web engineering - HTML Form
Nosheen Qamar
 
PPTX
html 5 new form attribute
Priyanka Rasal
 
PPT
20 html-forms
Kumar
 
PPTX
Forms with html5 (1)
Anada Kale
 
PPTX
Html tables, forms and audio video
Saad Sheikh
 
PPTX
New Form Element in HTML5
Zahra Rezwana
 
PPTX
Forms in html5
hrisi87
 
PPTX
Html forms
nobel mujuji
 
PPTX
Form using html and java script validation
Maitree Patel
 
PPTX
uptu web technology unit 2 html
Abhishek Kesharwani
 
PPTX
Windowforms controls c#
prabhu rajendran
 
PPTX
Web topic 20 1 html forms
CK Yang
 
PPTX
Windows form application - C# Training
Moutasm Tamimi
 
PPTX
Web topic 20 2 html forms
CK Yang
 
Building html forms
ice es
 
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
Html form tag
shreyachougule
 
Html forms
Himanshu Pathak
 
Web engineering - HTML Form
Nosheen Qamar
 
html 5 new form attribute
Priyanka Rasal
 
20 html-forms
Kumar
 
Forms with html5 (1)
Anada Kale
 
Html tables, forms and audio video
Saad Sheikh
 
New Form Element in HTML5
Zahra Rezwana
 
Forms in html5
hrisi87
 
Html forms
nobel mujuji
 
Form using html and java script validation
Maitree Patel
 
uptu web technology unit 2 html
Abhishek Kesharwani
 
Windowforms controls c#
prabhu rajendran
 
Web topic 20 1 html forms
CK Yang
 
Windows form application - C# Training
Moutasm Tamimi
 
Web topic 20 2 html forms
CK Yang
 
Ad

Viewers also liked (19)

PPT
Guernica is...
CEIP Europa
 
PPT
Comics cultural week
CEIP Europa
 
PPT
Cómics semana cultural
CEIP Europa
 
DOCX
Social Ch 13 Questions
gueste1a6a6
 
ODP
Html tut 04
Maxie Santos
 
ODP
Tutorial 9 multimedia web page
Maxie Santos
 
ODP
Html tutorial 5
Maxie Santos
 
ODP
Linguistic immersion camp of Jérica.- Sunday
CEIP Europa
 
DOC
Script
CEIP Europa
 
PPT
Europa News set
CEIP Europa
 
PPT
Andalucía Coeducativa
CEIP Europa
 
PPT
Collages Tercer Ciclo
CEIP Europa
 
PPT
Paisajes Andaluces
CEIP Europa
 
PPT
Andalusia Day at Europa School
CEIP Europa
 
ODP
Html tutorial 5
Maxie Santos
 
ODP
Basic internet pnhs inset
Maxie Santos
 
PPT
Linguistic immersion camp of Jérica.- Friday
CEIP Europa
 
PPSX
Conditional statement
Maxie Santos
 
ODP
Computer virus
Maxie Santos
 
Guernica is...
CEIP Europa
 
Comics cultural week
CEIP Europa
 
Cómics semana cultural
CEIP Europa
 
Social Ch 13 Questions
gueste1a6a6
 
Html tut 04
Maxie Santos
 
Tutorial 9 multimedia web page
Maxie Santos
 
Html tutorial 5
Maxie Santos
 
Linguistic immersion camp of Jérica.- Sunday
CEIP Europa
 
Script
CEIP Europa
 
Europa News set
CEIP Europa
 
Andalucía Coeducativa
CEIP Europa
 
Collages Tercer Ciclo
CEIP Europa
 
Paisajes Andaluces
CEIP Europa
 
Andalusia Day at Europa School
CEIP Europa
 
Html tutorial 5
Maxie Santos
 
Basic internet pnhs inset
Maxie Santos
 
Linguistic immersion camp of Jérica.- Friday
CEIP Europa
 
Conditional statement
Maxie Santos
 
Computer virus
Maxie Santos
 
Ad

Similar to Tut 06 (forms) (20)

PPTX
Html form
Jaya Kumari
 
PPTX
HNDIT1022 Week 03 Part 2 Theory information.pptx
IsuriUmayangana
 
PPTX
Forms Part 1
kjkleindorfer
 
PPTX
All about forms [autosaved]
Geraldine Fernandez
 
PDF
Cmsc 100 (web forms)
MaeEstherMaguadMaralit
 
PPT
3. HTML Forms.ppt
MuhammadRehan856177
 
PPT
Chapter9
DeAnna Gossett
 
PPTX
HTML Powerpoint-Jeffrey C. Johnson III
jeffcarlj
 
PPTX
HTML Powerpoint- Jeffrey C Johnson III
jeffcarlj
 
PPT
Creating web form(For College Seminars)
Naman Joshi
 
PPTX
Designing web pages html forms and input
Jesus Obenita Jr.
 
PDF
Tm 1st quarter - 2nd meeting
Esmeraldo Jr Guimbarda
 
PPT
Html Forms.ppt
MAHASWETAMANDAL1
 
PPT
Html,Css and Javascript Forms using different tags
JeirahTigas
 
PDF
COMP-10-ONLINE-FORMS Powerpoint Presentation
novabelsupang
 
PPTX
Html Forms for lecture BSIT SSC HCI LECTURE
ChristopherYSabado
 
PPT
Html Forms for creating frames and frameset
hassaan903
 
PPTX
HTML FORMS.pptx
Sierranaijamusic
 
PDF
CSS_Forms.pdf
gunjansingh599205
 
Html form
Jaya Kumari
 
HNDIT1022 Week 03 Part 2 Theory information.pptx
IsuriUmayangana
 
Forms Part 1
kjkleindorfer
 
All about forms [autosaved]
Geraldine Fernandez
 
Cmsc 100 (web forms)
MaeEstherMaguadMaralit
 
3. HTML Forms.ppt
MuhammadRehan856177
 
Chapter9
DeAnna Gossett
 
HTML Powerpoint-Jeffrey C. Johnson III
jeffcarlj
 
HTML Powerpoint- Jeffrey C Johnson III
jeffcarlj
 
Creating web form(For College Seminars)
Naman Joshi
 
Designing web pages html forms and input
Jesus Obenita Jr.
 
Tm 1st quarter - 2nd meeting
Esmeraldo Jr Guimbarda
 
Html Forms.ppt
MAHASWETAMANDAL1
 
Html,Css and Javascript Forms using different tags
JeirahTigas
 
COMP-10-ONLINE-FORMS Powerpoint Presentation
novabelsupang
 
Html Forms for lecture BSIT SSC HCI LECTURE
ChristopherYSabado
 
Html Forms for creating frames and frameset
hassaan903
 
HTML FORMS.pptx
Sierranaijamusic
 
CSS_Forms.pdf
gunjansingh599205
 

Recently uploaded (20)

PDF
Make GenAI investments go further with the Dell AI Factory
Principled Technologies
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PDF
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
PDF
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
PDF
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PPTX
The Future of AI & Machine Learning.pptx
pritsen4700
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
PPTX
IT Runs Better with ThousandEyes AI-driven Assurance
ThousandEyes
 
PPTX
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
PDF
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
Make GenAI investments go further with the Dell AI Factory
Principled Technologies
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
The Future of AI & Machine Learning.pptx
pritsen4700
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
IT Runs Better with ThousandEyes AI-driven Assurance
ThousandEyes
 
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 

Tut 06 (forms)

  • 2. HTML files or part of files made to be filled in by viewer / reader for the purpose of submitting information to the form’s originator. HTML Forms
  • 3. CGI ( Common Gateway Interface) Script is any program or set of commands running on the Web server that receives data from the Web page and then acts on that data to perform a certain task.
  • 4. Elements of Forms: Input boxes – for text and numerical entries Radio buttons – also called option buttons, to select a single option from a predefined list Selection lists – for long lists of options, usually in a drop-down list box
  • 5. Check boxes – to specify an item as either being present or absent Text areas – for extended entries that might include several lines of text Submit and Reset buttons – to either submit the form to the CGI script or to reset the form to its original state
  • 6. CGI script can be written in variety of computer languages such as the following: AppleScript C / C++ Perl The UNIX shell TCL Visual Basic JavaScript
  • 7. Syntax of Form: <FORM Properties> Form elements and layout tags </FORM>
  • 8. Working with Input Boxes Input Box – is a single-line box into which the user can enter text or numbers. Syntax: <INPUT TYPE = Option NAME = Text> where option is the type of input field, and Text is the name assigned to the input field.
  • 10. Setting a Default Value for an Input Box <INPUT SIZE = “value”> where value is the default text or number that will appear in the field.
  • 12. Creating a Password field <INPUT TYPE = PASSWORD> Password Field – is identical to an input box except that the characters typed by the user are displayed as bullets or asterisks.
  • 13. CREATING A SELECTION LIST To create a selection list, use the following set of HTML tags: <SELECT NAME = Text> <OPTION> Option 1 <OPTION> Option 2 <OPTION> Option 3 . . </SELECT> Where the NAME property is the field name of the selection list, and each <OPTION> tag represents an entry in the list.
  • 14. <SELECT NAME=Product> <OPTION>Scanmaster <OPTION>Scanmaster II <OPTION>LaserPrint 1000 <OPTION>LaserPrint 5000 <OPTION>Print/Scan 150 <OPTION>Print/Scan 250 </SELECT> Example
  • 15. To allow the user to select multiple items in the selection list, use the following tag: <SELECT MULTIPLE> To display several items in the selection list, or to change the selection list style from a drop-down list box to a fully displayed list box, use the following tag: <SELECT SIZE = value> where value is the number of items displayed in the list box.
  • 16. Working with Radio Buttons Syntax: <INPUT TYPE = RADIO NAME=Text VALUE=value> Where text is the name assigned to the field containing the radio button, and value is the value of the radio button.
  • 17. Example <INPUT TYPE=RADIO NAME=USE VALUE=HOME>Home <INPUT TYPE=RADIO NAME=USE VALUE=BUS>Business <INPUT TYPE=RADIO NAME=USE VALUE=GOV>Government <INPUT TYPE=RADIO NAME=USE VALUE=ED>Educational Institution <INPUT TYPE=RADIO NAME=USE VALUE=OTHER>Other
  • 18. To create a radio button, use the following HTML tag: <SELECT TYPE=RADIO NAME=text VALUE=value> Where the NAME property specifies the field containing the radio button, and the VALUE property specifies the value sent to the CGI script. To make a particular radio button the default option, use the following tag: <SELECT TYPE=RADIO CHECKED>
  • 19. WORKING WITH CHECK BOXES To create a check box, use the following tag: <SELECT TYPE=CHECKBOX NAME=Text VALUE=Value> where the NAME property specifies the field containing the check box, and the VALUE property specifies the value sent to the CGI script if the check box is selected. To make a check box selected by default, use the following tag: <SELECT TYPE=CHECKBOX CHECKED>
  • 20. Example <INPUT TYPE=CHECKBOX NAME=WIN9598NT>Windows 95/98/NT <INPUT TYPE=CHECKBOX NAME=WINDOS>Windows 3.X/DOS <INPUT TYPE=CHECKBOX NAME=MAC>Macintosh <INPUT TYPE=CHECKBOX NAME=UNIX>UNIX <INPUT TYPE=CHECKBOX NAME=OTHER>Other
  • 21. CREATING A TEXT AREA To create a text area for extended text entry, use the following tag: <TEXTAREA> Default Text </TEXTAREA> Where the Default Text is the text that initially appears in the text area (this is optional) To control how text is wrapped in a text area, use the following tag: <TEXTAREA WRAP=Option> Where option is OFF, SOFT (or VIRTUAL) ,or HARD (or PHYSICAL). OFF turns off text wrapping. SOFT (VIRTUAL) turns text wrapping on, but does not send text wrapping information to the Web server. HARD (PHYSICAL) turns text wrapping on and also sends this information to the Web server.
  • 22. Example <TEXTAREA ROWS=3 NAME=COMMENTS>Enter comments here </TEXTAREA>
  • 23. Fin