HTML Forms

1
HTML Forms
Chapter 8
Presented by Dawn Rauscher
2
Todays Agenda

• Designing Forms
• Form Controls
• Form Button
• Drop-Down Menus
• In-Class Lab

3
Designing Forms

• HTML forms are used to build the interfaces for
  Web applications.
• The forms are created using tags which place
  various input fields on a Web page.
• The user data can be handled by a script on the
  server that hosts the web page, or be sent to an
  email server

4
Example Form
5
ltformgt lt/formgt

• The ltformgt tag places a form on a web page
• All form elements are contained within this tag
• Form elements allow the user to enter information
• Text fields
• Text area fields
• Drop-down menus
• Radio buttons
• Checkboxes
• To create a form, the following syntax is used
• ltformgt
• lt!-- insert form fields here --gt
• lt/formgt

6
action

• A form submission is similar to a link, in that
  it requests a particular URL from the server.
• Generally, the URL requested points to a CGI
  program or some other program that will process
  the data submitted using the form
• Processed by a script
• ltform action
• "http//www.bugsbewe.com/cgi-bin/bugorder.cgi"gt
• Sent to an email account
• ltform action
• "mailtoscarab_at_bugsbewee.com" methodpost"gt

7
method

• Specifies how the data in the form will be sent
  to the server
• There are two valid methods, get and post.
• The get method tacks all the form data onto the
  end of the URL being requested.
• The post method submits the form data as the body
  of the request.
• The mailto action requires the post method
• The method attribute defaults to get if it is
  unspecified in the ltformgt tag used to create the
  form

8
enctype

• The enctype attribute must be set to text/plain
  when using the post method to send an email
• ltform enctypetext/plain gt

9
ltinput /gt

• Used to create most of the HTML form fields
• The type attribute of this tag is used to
  indicate what type of field is being created
• The types of input fields available are text
  fields, password fields, check boxes, radio
  buttons, hidden fields, and file upload fields.
• The ltinputgt tag is also used to create Submit and
  Reset buttons.

10
name and value attributes

• Two attributes are common to all input fields,
  name and value
• The name attribute allows you to identify each
  field on the form
• The value attribute is used to predefine a value
  for a form field
• When the data in a form is sent to the Web
  server, it is organized in name/value pairs.

11
Text Input Fields

• This allows the user to enter text in a single
  line
• You can define an input field as a text field
  using the type"text" attribute in the ltinputgt
  tag
• The value attribute is used to specify a default
  value for the text field
• The size and maxlength attributes are used to set
  the display width of the field, and the maximum
  number of characters that can be typed in the
  field
• EXAMPLE
• ltinput type"text" nameusername size"30"
  maxlength"50/gt

12
Password Fields

• Password fields are identical to text fields,
  except that they mask the user input so that
  people can't read what the person is typing in
  the field when they look over their shoulder
• ltinput type"password nameuser_password
  size"30" maxlength"30" /gt  

13
Check Boxes

• A check box presents users with a binary
  choiceoff or on
• When a user clicks on a check box, the value of
  the field is reversed. If it's checked, it
  becomes unchecked, and vice versa
• If a check box is checked when the form is
  submitted, the name/value pair associated with
  that field is sent to the server
• If the check box is not checked, nothing is sent
  to the server for that field

14
Check Boxes (Cont.)

• To create a check box field, you set the type
  attribute to checkbox
• You set the value for the field using the value
  attribute

ltinput type"checkbox" name"eighteen"
value"yes" /gtI am 19 years or olderltbr
/gt ltinput type"checkbox" name"purchaser"
value"yes" /gtI am authorized to make purchases
15
Radio Buttons

• Radio buttons allow you to select only one item
  from a group of possible choices
• Whenever you select an item in the group, the
  item that was already selected becomes unselected
  
• To create a radio button, you use an ltinputgt tag
  with the type attribute set to radio

16
Radio Button Example

• IT budgetltbr /gt
• ltinput type"radio" name"budget" value"10000"
  /gt Less than 10,000ltbr /gt
• ltinput type"radio" name"budget" value"100000"
  /gt From 10,000 to 100,000ltbr /gt
• ltinput type"radio" name"budget"
  value"1000000"gt From 100,000 to 1,000,000ltbr /gt

17
Hidden Fields

• Hidden form fields are used to include data in a
  form that can't be modified by users
• Nothing is displayed in the browser window
• However, the data is stored within the source
  code of the page and is submitted to the server
  along with the rest of the data in the form.

ltinput type"hidden" name"some_data"
value"some value"gt
18
Reset Buttons

• A form Reset button resets all the fields on a
  form to their default values. No value is
  associated with the Reset button itself
• If the value attribute for a field is present,
  the value of that attribute will be placed in the
  form field. The default value of the reset
  button is reset.
• ltinput type"reset" value"Clear Form" /gt

19
Submit Buttons

• The Submit button on a form is used to send the
  contents of the form to the Web server to be
  processed
• To add a Submit button to a form, use the input
  tag with the type attribute set to submit
• To specify a label for the Submit button, use the
  value attribute
• ltinput type"submit" value"Submit"/gt

20
ltselectgt

• The ltselectgt tag creates a select list that
  provides the user with a menu of several choices
  and enables the user to select one or more of the
  choices before submitting the form
• ltoptiongt tags are used within the ltselectgt tag,
  and each ltoptiongt tag adds one option to the
  select list

21
select list (Cont.)

• The size attribute specifies how many options
  should be displayed at once
• Setting the size to 1 creates a pull-down list
  of options, with the selected option displayed
• Setting the size to any value greater than 1
  creates a list with more than one option
  displayed
• Using the multiple flag in the ltselectgt tag
  allows users to select multiple items at once

22
ltselectgt example

• ltselect name"color"gt
• ltoption value"red"gtRedlt/optiongt
• ltoption value"blue" selected"selected"gtBluelt/op
  tiongt
• ltoption value"yellow"gtYellowlt/optiongt
• lt/selectgt
• ltselect name"operating_system" size"3"
  multiple"multiple"gt
• ltoption value"macos"gtMac OSlt/optiongt
• ltoption value"linux"gtLinuxlt/optiongt
• ltoption value"freebsd"gtFreeBSDlt/optiongt
  ltoption value"windows"gtWindowslt/optiongt
• lt/selectgt

23
Questions?