HTML Forms, Web Forms

1
HTML Forms, Web Forms

• Client-Server Model
• HTML Forms vs. Web Forms
• ASP.NET Server Controls
• Label
• Dropdown List
• List Box
• Text Box
• Radio Button
• Check Box

2
Forms

• Forms are for transferring information from the
  web client to the server
• A form usually contains more than one control,
  such as buttons, text fields, dropdown lists.
• Examples
• User registration
• Poll, online voting
• Message posting in a forum

3
Client-Server Model

• Web Server stores, interprets and distributes
  data.
• Client (browser) accesses the web server to
  retrieve data.
• One form of communication between the client and
  web server is Hypertext Transfer Protocol (HTTP)
• HTTP Request message passed from the browser to
  the web server requesting a particular page
• Stateless protocol request packet doesnt state
  whether this is the first request or fifteenth
  request.
• Web server follows the instructions in the
  request then send an HTTP packet back to the
  client with the necessary information

4
Client-Server Model
5
HTML Forms

• Form controls elements that allow user input
  such as buttons, textboxes, dropdown lists,
  checkboxes
• HTML form web page that contains one or more
  form controls
• The controls are grouped together in one (or
  more) ltformgt element

6
Frequently Used Form Controls

• Text fields
• http//www.w3schools.com/html/tryit.asp?filenamet
  ryhtml_input
• ltinput typetext nametf1gt
• Check Boxes
• http//www.w3schools.com/html/tryit.asp?filenamet
  ryhtml_checkbox
• ltinput type"checkbox" name"Bike"gt

7
Dropdown List

• Dropdown lists
• http//www.w3schools.com/html/tryit.asp?filenamet
  ryhtml_select2
• ltselect name"cars"gt
• ltoption value"v"gtVolvolt/optiongt
• ltoption value"s"gtSaablt/optiongt
• lt/selectgt

8
Radio Buttons

• Example http//www.w3schools.com/html/tryit.asp?f
  ilenametryhtml_radio
• Source (note the name attribute groups the radio
  buttons)
• ltformgt
• Male
• ltinput type"radio" checked name"Sex"
  value"male"gt
• ltbrgt
• Female
• ltinput type"radio name"Sex" value"female"gt
• lt/formgt

9
HTML Forms

• Action defines the name of the web page that
  will receive the form data.
• ltform actionnextpage.aspx gt
• Could be the same page or could be different page
• Method defines the methods of transmission of
  the form data
• GET Method - uses name/value pairs (query
  strings) to send data to the webserver
• ?insert_nameinsert_value
• http//www.noserver.com/ASP.NET/form.aspx?firstnam
  eVervian
• POST Method - sends as data part of the HTTP
  request
• Allows greater amount of information to be
  transmitted
• Increases privacy (data sent is hidden in HTTP
  request)

10
Hidden Controls

• To submit page-specific information not from a
  user build it in the form
• Syntax ltinput typehidden nameh1
  valuev1gt
• The name-value pair h1v1 will be sent as part of
  the GET request to the server
• Example search from Googles home page, search
  from Google Toolbar (sourceidnavclient), from
  Mozilla Googlebar (sourceidmozclient)

11
Exercise

• Write HTML for the following form page
• http//www.cba.uiuc.edu/mxia/aspnet/examples/recip
  e_search_page.htm

12
Web Forms

• Visually they are the same as HTML forms
• Difference is seen in the backend processes that
  the ASP.NET code carries out.
• Web form refers to the grouping of two distinct
  block of code
• HTML template responsible for presentation of
  web form on browser
• Contains page layout information and ASP.Net
  server controls
• ASP.NET code responsible for generating dynamic
  content to be displayed within the web form
• Typically exposed through server controls defined
  in HTML template

13
ASP.NET Server Controls

• Server controls appear to be similar to
  HTML-elements, but it actually only marks a spot
  on the page in which the server must generate the
  corresponding HTML element.
• ltbodygt
• This is the HTML part of the code
• ltasplabel idmessage1 runatserver /gt
• This is more HTML code
• lt/bodygt
• ltasp prefix indicates that this control is
  part of built in ASP.NET controls
• label describes the type of server control
• id control attribute of label, tells the server
  where to get the information from
• ltrunatservergt standard control attribute for
  all server controls

14
HTML Forms vs. Web Forms

• Important Definitions
• Web page page that contains just HTML (as
  described in book, page 90)
• HTML form HTML element that contains HTML form
  controls (i.e. textboxes, checkboxes, etc.)
• Web form page that combines ASP.NET code with an
  HTML template
• ASP.NET form form inside a web form that
  contains ASP.NET server controls

15
Label Server Control ltasplabelgt

• Effective way to display text on web page
• Sample Control Attributes
• BackColor, ForeColor, Height, ID, Text, Visible
• Example
• ltscript languagevb runatservergt
• Sub Page_Load
• Message1.TextThis will be displayed when the
  server process the server control listed in the
  code below
• End Sub
• lt/scriptgt
• lthtmlgt
• ltbodygt
• ltasplabel idMessage1 runatserver /gt
• lt/bodygt
• lt/htmlgt

16
Other Common Control Attributes

• BackColor
• ForeColor
• Text
• Visible
• Height
• Width

17
Dropdown List Server Control

• ltaspdropdownlistgt - The structure is the same as
  the ltasplabelgt control. The only difference is
  that a different type of control is being
  requested.

HTML Equivalent ltselect namelist1gt
ltoptiongtMadridlt/optiongt ltoptiongtOslolt/optiongt
ltoptiongtLisbonlt/optiongt lt/selectgt
ASP.NET Code ltaspdropdown idlist1
runatservergt ltasplistitemgtMadridlt/asplistit
emgt ltasplistitemgtOslolt/asplistitemgt
ltasplistitemgtLisbonlt/asplistitemgt lt/aspdropdown
listgt
18
Dropdown List Control

• The ASP.NET server control looks very similar to
  the HTML controls.
• But, after a submit button is checked, ASP.NET
  automatically creates the _VIEWSTATE attribute
  which saves all of the information entered.
  Thus, data is not lost if form is incorrectly
  filled out.

19
Dropdown List Control

• ltscript language"vb" runat"server"gt
• Sub Page_Load
• if Page.IsPostback then
• Message.Text "You have Selected "
  list1.SelectedItem.Value
• end if
• End Sub
• lt/scriptgt
• lthtmlgt
• ltheadgt
• ltbodygt
• ltasplabel id"Message" runat"server" /gt
• ltbr /gt
• ltform runat"server"gt
• What city do you wish to look at hotels for? ltbr
  /gtltbr /gt
• ltaspdropdownlist id"list1" runat"server"gt
• ltasplistitemgtMadridlt/asplistitemgt
• ltasplistitemgtOslolt/asplistitemgt
• ltasplistitemgtLisbonlt/asplistitemgt

20
List Box Control

• ltscript language"vb" runat"server"gt
• Sub Page_Load
• Dim msg as String "You have selected ltbr /gt"
• If list1.Items(0).Selected Then msg msg
  list1.Items(0).Text "ltbr /gt"
• If list1.Items(1).Selected Then msg msg
  list1.Items(1).Text "ltbr /gt"
• If list1.Items(2).Selected Then msg msg
  list1.Items(2).Text "ltbr /gt"
• Message.Text msg
• End Sub
• lt/scriptgt
• lthtmlgt
• ltheadgt
• ltbodygt
• ltasplabel id"Message" runat"server" /gt
• ltbr /gt
• ltform runat"server"gt
• What city do you wish to look at hotels for? ltbr
  /gtltbr /gt
• ltasplistbox id"list1" runat"server"
  selectionmode"multiple"gt
• ltasplistitemgtMadridlt/asplistitemgt
• ltasplistitemgtOslolt/asplistitemgt