SlideShare a Scribd company logo
1 of 23
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

What's hot

Building html forms
Building html formsBuilding html forms
Building html formsice es
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tagsHyejin Oh
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML FormNosheen Qamar
 
html 5 new form attribute
html 5 new form attributehtml 5 new form attribute
html 5 new form attributePriyanka Rasal
 
20 html-forms
20 html-forms20 html-forms
20 html-formsKumar
 
Forms with html5 (1)
Forms with html5 (1)Forms with html5 (1)
Forms with html5 (1)Anada Kale
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio videoSaad Sheikh
 
New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5Zahra Rezwana
 
Forms in html5
Forms in html5Forms in html5
Forms in html5hrisi87
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validationMaitree Patel
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html formsCK Yang
 
Windows form application - C# Training
Windows form application - C# Training Windows form application - C# Training
Windows form application - C# Training Moutasm Tamimi
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html formsCK Yang
 

What's hot (20)

Building html forms
Building html formsBuilding html forms
Building html forms
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
 
Html forms
Html formsHtml forms
Html forms
 
Html form tag
Html form tagHtml form tag
Html form tag
 
Html forms
Html formsHtml forms
Html forms
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
 
html 5 new form attribute
html 5 new form attributehtml 5 new form attribute
html 5 new form attribute
 
20 html-forms
20 html-forms20 html-forms
20 html-forms
 
Forms with html5 (1)
Forms with html5 (1)Forms with html5 (1)
Forms with html5 (1)
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
 
Html4
Html4Html4
Html4
 
Html forms
Html formsHtml forms
Html forms
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Windowforms controls c#
Windowforms controls c#Windowforms controls c#
Windowforms controls c#
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
 
Windows form application - C# Training
Windows form application - C# Training Windows form application - C# Training
Windows form application - C# Training
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 

Viewers also liked

Comics cultural week
Comics cultural weekComics cultural week
Comics cultural weekCEIP Europa
 
Cómics semana cultural
Cómics semana culturalCómics semana cultural
Cómics semana culturalCEIP Europa
 
Social Ch 13 Questions
Social Ch 13 QuestionsSocial Ch 13 Questions
Social Ch 13 Questionsgueste1a6a6
 
Tutorial 9 multimedia web page
Tutorial 9 multimedia web pageTutorial 9 multimedia web page
Tutorial 9 multimedia web pageMaxie Santos
 
Linguistic immersion camp of Jérica.- Sunday
Linguistic immersion camp of Jérica.- SundayLinguistic immersion camp of Jérica.- Sunday
Linguistic immersion camp of Jérica.- SundayCEIP Europa
 
Andalucía Coeducativa
Andalucía CoeducativaAndalucía Coeducativa
Andalucía CoeducativaCEIP Europa
 
Collages Tercer Ciclo
Collages Tercer CicloCollages Tercer Ciclo
Collages Tercer CicloCEIP Europa
 
Paisajes Andaluces
Paisajes AndalucesPaisajes Andaluces
Paisajes AndalucesCEIP Europa
 
Andalusia Day at Europa School
Andalusia Day at Europa SchoolAndalusia Day at Europa School
Andalusia Day at Europa SchoolCEIP Europa
 
Basic internet pnhs inset
Basic internet   pnhs insetBasic internet   pnhs inset
Basic internet pnhs insetMaxie Santos
 
Linguistic immersion camp of Jérica.- Friday
Linguistic immersion camp of Jérica.- FridayLinguistic immersion camp of Jérica.- Friday
Linguistic immersion camp of Jérica.- FridayCEIP Europa
 
Conditional statement
Conditional statementConditional statement
Conditional statementMaxie Santos
 

Viewers also liked (19)

Guernica is...
Guernica is...Guernica is...
Guernica is...
 
Comics cultural week
Comics cultural weekComics cultural week
Comics cultural week
 
Cómics semana cultural
Cómics semana culturalCómics semana cultural
Cómics semana cultural
 
Social Ch 13 Questions
Social Ch 13 QuestionsSocial Ch 13 Questions
Social Ch 13 Questions
 
Html tut 04
Html tut 04Html tut 04
Html tut 04
 
Tutorial 9 multimedia web page
Tutorial 9 multimedia web pageTutorial 9 multimedia web page
Tutorial 9 multimedia web page
 
Html tutorial 5
Html tutorial 5Html tutorial 5
Html tutorial 5
 
Linguistic immersion camp of Jérica.- Sunday
Linguistic immersion camp of Jérica.- SundayLinguistic immersion camp of Jérica.- Sunday
Linguistic immersion camp of Jérica.- Sunday
 
Script
ScriptScript
Script
 
Europa News set
Europa News setEuropa News set
Europa News set
 
Andalucía Coeducativa
Andalucía CoeducativaAndalucía Coeducativa
Andalucía Coeducativa
 
Collages Tercer Ciclo
Collages Tercer CicloCollages Tercer Ciclo
Collages Tercer Ciclo
 
Paisajes Andaluces
Paisajes AndalucesPaisajes Andaluces
Paisajes Andaluces
 
Andalusia Day at Europa School
Andalusia Day at Europa SchoolAndalusia Day at Europa School
Andalusia Day at Europa School
 
Html tutorial 5
Html tutorial 5Html tutorial 5
Html tutorial 5
 
Basic internet pnhs inset
Basic internet   pnhs insetBasic internet   pnhs inset
Basic internet pnhs inset
 
Linguistic immersion camp of Jérica.- Friday
Linguistic immersion camp of Jérica.- FridayLinguistic immersion camp of Jérica.- Friday
Linguistic immersion camp of Jérica.- Friday
 
Conditional statement
Conditional statementConditional statement
Conditional statement
 
Computer virus
Computer virusComputer virus
Computer virus
 

Similar to Tut 06 (forms) (20)

HTML - FORMS.pptx
HTML - FORMS.pptxHTML - FORMS.pptx
HTML - FORMS.pptx
 
Forms.pptx
Forms.pptxForms.pptx
Forms.pptx
 
Html form
Html formHtml form
Html form
 
HTML-Forms
HTML-FormsHTML-Forms
HTML-Forms
 
Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and input
 
Html 4
Html   4Html   4
Html 4
 
Html 4
Html   4Html   4
Html 4
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
 
3. HTML Forms.ppt
3. HTML Forms.ppt3. HTML Forms.ppt
3. HTML Forms.ppt
 
Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
All about forms [autosaved]
All about forms [autosaved]All about forms [autosaved]
All about forms [autosaved]
 
Html,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tagsHtml,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tags
 
Html class-04
Html class-04Html class-04
Html class-04
 
Creating web form(For College Seminars)
Creating web form(For College Seminars)Creating web form(For College Seminars)
Creating web form(For College Seminars)
 
Html Forms.ppt
Html Forms.pptHtml Forms.ppt
Html Forms.ppt
 
Web design - Working with forms in HTML
Web design - Working with forms in HTMLWeb design - Working with forms in HTML
Web design - Working with forms in HTML
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
HTML frames and HTML forms
HTML frames and HTML formsHTML frames and HTML forms
HTML frames and HTML forms
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART III.pdf
 

Recently uploaded

SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 

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