Creating Forms

1
Creating Forms

• WWW 131
• HTML Forms

2
HTML Forms make web pages interactive

• HTML forms allow you to obtain information from
  the user
• So, with forms, information can flow two ways
• from your page to the user, as usual and
• from your user back to you, via the forms

3
Some Terminology

• The parts which make up a form, such as
  textboxes, drop down menus and the like, we will
  call form elements.
• A form in HTML is the entire group of related
  form elements on a page set within one set of
  form tags.
• This should always be clear in this class since
  our web pages will have only one form although,
  it is permissible to have more than one set of
  form tags in a page, and therefore more than one
  form

4
Forms Are Interactive!
5
Sample Form

• Can use different fields with many values

Drop Down List Box also called Selection List
6
The Types of Form Elements
7
Some of the Form Elements

• Input Controls
• Use the HTML ltinput /gt Tag
• TextArea Control
• Used to create multiple line textbox lttextareagt
  
• Selection Lists (Drop Down Lists)
• Use the ltselectgt tag
• Option Control
• Used to represent individual choices in a
• drop down list (selection list) - ltoptiongt

8
Start with the ltformgt Tag

• ltformgt
• ltinput /gt
• lt/formgt

9
Start with the ltformgt Tag

• Our pages will always have just one set of ltformgt
  tags
• Form tags may be positioned anywhere within the
  body of a page.
• To keep things simple, I recommend that in pages
  having form elements, you always position the
  open and closing form tags in the same place
• I position my opening form tag just after the
  opening body tag
• I position my closing form tag just before the
  closing body tag

10
To create a textbox

• We use the unpaired ltinputgt tag
• ltinput /gt
• This alone creates a textbox which the user may
  type in
• But we should specify the type as text to avoid
  ambiguity
• We can also specify the size of the textbox to
  specify how many characters it may hold
• Note a textbox will always be one line in height

11
To create a textarea

• A textarea is similar to a textbox
• A user may type in it
• It may contain one line of text
• But a textarea may contain as many characters as
  we want, but also as many lines of text as we
  want.
• Also, lttextareagt is a paired tag!

12
To create a textarea

• To create a textarea, we dont use the size
  attribute
• Instead, we specify the number of rows and
  columns for the textarea
• lttextarea rows 5 cols 50gtlt/textareagt
• This will give a textarea 5 lines high, each able
  to display 50 characters.

13
User Input Fields

• These define the elements that will appear on the
  form that the user will interact with.
• This is the same concept as a database or a mail
  merge field.
• The elements are defined using the ltinputgt tag.
• Regular, explanatory text can be interspersed
  with ltinputgt on the form.

14
The ltinputgt Tag and its type attribute

• The type attribute specifies the type of form
  element which will be created.
• Options are

• Textbox
• Password

• Radio Button
• Checkbox
• Submit Button
• Reset Button

15
Other ltinputgt Tag Attributes

• size
• Defines the size of text input box on form in
  of charactersdefault is 20
• name
• Gives the text input box a name that identifies
  the information
• checked
• For marking radio button/checkbox when page loads
• readonly
• To keep visitors from changing form elements

16
Sample

• ltform actionmailtomapell_at_oakton.edu
  methodpostgt
• lth2gtFur Feathers Response Formlt/h2gt
• ltpgt
• Customer Name ltinput typetext namecustomer
  size30gt
• lt/pgt
• lt/formgt

17
Result

• Fur Feathers Response Form
• Customer Name

18
Radio Buttons

• Radio buttons are also called Option Group
  Buttons
• Only one element is chosen within a group
• All buttons have the same name
• Can have a button selected by default with the
  checked property
• Great for these types of questions
• Yes/No
• True/False
• On/Off
• Multiple Choice

19
Radio Buttons

• ltinput typeradio namerd valueYesgt

20
Add radio buttons
21
Sample

• ltform actionmailtomapell_at_oakton.edu method
  postgt
• lth2gtFur Feathers Response Formlt/h2gt
• ltpgtCustomer Name ltinput typetext
  namecustomer size30gtlt/pgt
• ltpgtCity lt/pgt
• ltinput typeradio namecity valueDes
  PlainesgtDesPlainesltbr /gt
• ltinput typeradio namecity value Skokie
  checked checkedgtSkokieltbr /gt
• lt/formgt

22
Result

• Fur Feathers Response Form
• Customer Name
• City
• Des Plaines
• Skokie

23
Textbox

• Used to get input from the user (string of
  characters)
• type
• text
• hidden (in the source code view)
• password (ASTERISK sent as clear ASCII text)
• size - length of the field displayed
• maxlength - length of the characters you can
  enter
• value - actually displayed in the text box

24
Only 1 line of Text!
25
Add a Text Field
26
TextArea Control

• lttextareagt
• For multiple lines of text
• Cant just add the properties to the input
  textbox
• Rows and Cols indicate dimensions of the textbox
• Scrollbar
• Max Characters 32,700 for recent versions of HTTP
  and browsers only!
• Look at the width of your page form to decide
  the number of COLS to use.

27
Add 2 TextArea Controls
28
List Boxes

• Using the SELECT tag and OPTION attribute, a list
  box can be created.
• ltselect namePets multiplegt
• ltoptiongtDoglt/optiongt
• ltoptiongtCatlt/optiongt
• ltoptiongtBirdlt/optiongt
• ltoptiongtOtherlt/optiongt
• lt/selectgt

29
Sample Contd

• ltPgt ltINPUT TYPECHECKBOX VALUE
  informationgtPlease send information.lt/Pgt
• ltPgt What types of pets do you have?ltBRgt
• (Select all that apply)lt/Pgt
• ltselect namePets multiplegt
• ltoptiongtDog/slt/optiongt
• ltoptiongtCat/slt/optiongt
• ltoptiongtBird/slt/optiongt
• ltoptiongtOther/slt/optiongt
• lt/selectgt
• (Sample continued)

30
Result

• Fur Feathers Response Form
• Customer Name
• City
• Des Plaines
• Skokie
• Please send information
• What types of pets do you have?
• (Select all that apply)

31
Variations on Menus

• So whats different with these menus?

32
Variations on Menus
33
Variations on Menus

• SIZE indicates number of items visible

34
Variations on Menus

• MULTIPLE
• can select using SHIFT (or CONTROL) keys

35
Variations on Menus

• SELECTED DEFAULT selected item

36
Whats Missing?

• Need VALUE for each Option tag
• So, when you click on Red, the word Red is sent,
  or (maybe a number representing red etc)

37
Buttons

• Types of Button (use the Type property)
• Submit submits the form (to what is in the
  action property)
• Reset Clears the form (to the default values)
• Button Plain button (used with JavaScript)
• Value The message appears on the button

38
Create the Buttons
39
Save, View Submit the Page
40
Finally...

• SUBMIT
• The standard way for a user to send form info to
  the server is clicking a submit button
• RESET
• This button resets all the forms default
  settings
• ltinput typesubmit valueSend Datagt
• ltinput typereset valueCleargt

41
Sample Contd

• ltpgt
• ltinput typesubmit value Send Datagt
• ltinput typereset valueCleargt
• lt/pgt
• lt/formgt
• lt/bodygt
• lt/htmlgt

42

• Fur Feathers Response Form
• Customer Name
• City
• Des Plaines
• Skokie
• Please send information
• What types of pets do you have?
• (Select all that apply)

Send Data Clear
K. Tabers
43
HTML TagsReview
44
Static vs. Interactive Web Pages

• The introduction of forms and CGI scripts
  represented a dramatic change in how the Web was
  perceived and used.
• Forms/CGI opened up a whole new way for Web
  developers to communicate with their
  customers/visitors and receive feedback from
  them.
• Ordering on-line and allowing users access to
  product support databases became possible.

45
Two Parts

• The structure or shell that consists of fields,
  labels, and buttons that the visitor sees on the
  Web page.
• The processing script that converts submitted
  information into a format that the Web page
  developer can read/tally.

46
CGI Scripts

• Since CGI scripts run on a Web server, ISPs may
  deny/limit access to them
• It may be specified what scripts are offered,
  what input is required, and the type of output
  created with no provisions for direct access or
  modification.
• Access is denied because of the dangers of
  computer hackers and the drain on system
  resources required to run extra programs.

47
Creating the Form Shellin HTML

• You will learn more about CGI scripts when you
  take Advanced HTML
• Scripting languages are becoming easier to use,
  so forms processing will probably be simplified
  in the future.
• Since we will not be learning programming, the
  input of the forms we create will be sent
  unformatted through e-mail.

48
To really process a form

• If you email the form results, but the result is
  messy!
• You need a Web Server to process the form
• There are client and server programs that can
  process forms. Client programs wont send the
  information out of the browser. Only server
  programs can send the information out such as
  via email to another user, database, or file

49
Attributes of the form tag

• action indicates which program is used to process
  the form
• CGI Common Gateway Interface programs often
  written in PERL or C (Windows or Unix)
• ASP Active Server Pages programs written in
  Visual Basic or other language (on Windows
  server)
• FrontPage BOT Requires FrontPage Extensions
• MailTo emails the results easy to send, hard
  to process!

50
Attributes of the form tag

• ltformgt required attributes
• action
• script.urllocation of a file which will
  process the information from the form elements
  (often a CGI script on a server)
• mailtojsmith_at_oakton.edu
• method
• getData added at end of URL, sent as variable
• Risk can be viewed on screen or in transit
• postData is sent separately to server
• Less risk of being seen on screen
• This is what we will use.

51
Sample of Opening Form Tag

• lt form
• action mailtojsmith_at_oakton.edu
• method post gt

52
Common Gateway Interface

• CGI programs run on a server and interface to
  other resources programs such as email, files,
  databases

53
Add the Form Tags
54
Change the Action Attribute

• Make your e-mail address the value of the action
  attribute

ltform methodpost actionmailtomapell_at_oakton.e
dugt