Intro to Forms

1
(No Transcript)
2
Intro to Forms

• HTML forms are used to gather information from
  end-users.
• A form can contain elements like radio-buttons,
  text fields, checkboxes, submit buttons and more.
  
• This HTML tutorial will not teach you how
  servers process input from HTML forms. If you
  want to learn more about processing form input,
  you can study/research ASP.

3
Forms Input Elements

• Radio Buttons let a user select ONLY ONE of a
  limited number of choices.
• ltinput type"radio" /gt defines a radio button.

Code View
Browser View
ltformgtltinput type"radio" namegrade"
value9th" /gt Freshmenltbr /gt ltinput
type"radio" namegrade" value10th" /gt
Sophomoreltbr /gt ltinput type"radio"
namegrade" value"11th" /gt Juniorlt/formgt
4
Forms Input Elements

• Text Fields allows the user to type in text
  into the text field box.
• ltinput typetext" /gt defines a one-line input
  field that a user can enter text into. Default
  width of a text field is 20 characters.

Code View
Browser View
ltformgt Car Make ltinput type"text
name"carmake" /gtltbr /gt Car Model ltinput
type"text" name"carmodel" /gt lt/formgt
5
Forms Input Elements

• Password Field like the text field, it allows
  the user to type in text into the text field box
  but the characters are masked.
• ltinput typepassword" /gt defines a password
  field.

Code View
Browser View
ltformgtPassword ltinput type"password"
name"password" /gtlt/formgt
with user input
6
Forms Input Elements

• Checkboxes let a user select ONE or MORE
  options of a limited number of choices.
• ltinput typecheckbox" /gt defines a checkbox.

Code View
Browser View
ltformgt ltinput type"checkbox" name"language"
value"spanish" /gt I speak Spanishltbr /gt ltinput
type"checkbox" name"language" value"french"
/gt I speak French lt/formgt
7
Forms Input Elements

• Drop-Down List allows a user to select one
  option from a simple drop-down menu.

Code View
Browser View
default view
College Majorsltbr /gtltform actiongt ltselect
namecollegemajors"gt ltoption valueeng"gtEnglish
Majorlt/optiongt ltoption valuemath"gtMath
Majorlt/optiongt ltoption valueSS"gtSocial Studies
Majorlt/optiongt ltoption valuehistorygtHistory
Majorlt/optiongt lt/selectgt lt/formgt
with drop-down menu engaged
8
Forms Input Elements

• Submit Button used to send form data to a
  server. The data is sent to the page referenced
  in the form's action attribute. The file
  defined in the action attribute processes the
  received input.
• ltinput typesubmit" /gt defines a submit button.

Code View
Browser View
ltform name"input" action"html_form_action.asp"
method"get"gtUser Login ltinput type"text"
name"user" /gtltinput type"submit"
value"Submit" /gtlt/formgt
9
Forms Review
HTML forms are used to gather information from
end-users in the following ways
Submit Button
Radio Buttons
Drop-down List
Password Field
Text Field
Checkbox