Welcome to ITM Web100 Training Program

Intro to HTML Forms

• Forms are HTML elements which use a number of user interface widgets to get input from the user in order to build the HTTP request

  Forms add the dimension of interactivity, that bring the Web to life. pages can be glitzy and glamorous, but without forms, they are "read-only". Forms let the user write back to you with comments or specify database search criteria.

  • A form is a graphical user interface with text entry fields and areas, buttons, checkboxes, pull-down menus, scrolling lists, etc. When you write a form, each of your input items has a NAME tag. When the user places data in these items in the form, that information is sent to a server.

  • When a user presses a button indicating the form should be "submitted," the information in the form is normally sent to a server for processing via a CGI program. However, if you don't have CGI capability or you simply want to have the data emailed to you, you may use the mailto action.

  • The FORM tag is the container for all other form elements:

    <FORM METHOD="POST" ACTION="/cgi-bin/web-exe">
    	Form elements and other HTML 
    </FORM>
    

    The <Form> Tag

    
    
    • The first HTML tag that you must understand is the <FORM> tag that begins and ends an HTML form.

    • The first thing that the <FORM> tag does is separate the interface widgets from the rest of an HTML page.

    • Secondly, the <FORM> tag establishes the relationship between the form and the server that will handle the user-defined data.

    • Specifically, the form defines three attributes that manage the interaction. These attributes are shown in the table below:

    Attribute	Description
    METHOD	Specifies the HTTP method used to send the request. This can be either GET or POST
    ACTION	Specifies the URL of a script that will process the user-defined data. We will talk about "Scripts" tomorrow. But for now, let's just focus on getting user data to the server. Note that if no action is specified, it will default to the current page.
    ENCTYPE	Specifies the way in which the form data is encoded before it is sent to the server. This defaults to application/x-www-form-urlencoded

    • Thus, a generic <FORM> tag might look like the following (Notice that we rarely use an ENCTYPE attribute since we usually want the default):

    <FORM METHOD = "POST" 
                ACTION = "/cgi-bin/script.cgi">
    </FORM>
    

    <FORM Method="GET|POST" Action="URL" > </FORM>	a Form with a CGI program at URL
    <INPUT Name="name" Type=" text | hidden | password | image | submit | reset | checkbox | radio ">	Input widget with symbolic name, name
    <TEXTAREA Name="name" Rows="R" Cols="C">	Text area (lines of editable text) with symbolic name, name and R rows and C columns visible at a time.
    <SELECT Name="name" [Size="N"] [Multiple]>	Select element with symbolic name, name, N selections visible at a time; multiple selections possible; selections defined using OPTION
    <OPTION Value="string"> text	Option element used with SELECT; with returned value string or text if not provided.

    • Okay, so once we have defined our form, we need to start putting interface widgets into it.

    The <Input> Tag

    The INPUT tag: . This is the most important of the form elements; with it you can allow the user to input text or passwords and submit them to the server for CGI processing.

    The <Input> Tag

    • The basic set of interface widgets is defined using the <INPUT> tag.

    • There are several <INPUT> types offering different GUI options. Each of them has its own set of specialized attributes that define its operation.

    • However, all <INPUT> tags share two common attributes: TYPE and NAME

    • The TYPE attribute defines what type of interface widget the <INPUT> tag will define.

    • The NAME attribute specifies the variable name that the browser should use for this widget when it prepares the name/value pairs in the HTTP request.

    • Thus, the following generic input tag would create a text field interface widget (we will talk more about the text field widget in just a bit) and assign it to the name "fname"

    <INPUT TYPE = "TEXT" NAME = "fname">
    

    • When the user enters data into the input widget, that data will be paired with the name as the VALUE portion of a name/value pair and be encoded for the HTTP request.

    HTML Forms for Web Site Interaction

  • The user interface widgets offered by HTML are:
    • Text Fields
    • Password Fields
    • Text Areas
    • Radio Buttons
    • Check Buttons
    • Select Lists
    • Submit and Reset Buttons
    • Hidden Fields
    • File Uploads

  • Let's look at how each of these widgets are implemented.