CS 328 - Week 4 Lecture 1 - 2016-02-08

Intro to HTML5 forms

*   an HTML form is a form element

    <form ...>

    </form>

*   this form element contains
    form controls (these are things
    like submit buttons and
    textfields and radio buttons
    and checkboxes and drop-down boxes,
    etc.)

*   several important form attributes:
    *   action attribute gives the URL of
        the "thing" on the application tier
	that is to handle this form's
	info (and craft a response)

    *   method attribute gives HOW the
        form's info is going to be sent
	to the application tier
	*   the values here are get or post

 	    method="get"
	    method="post"

        *   with method="get",
	    your request and the form data
	    go in a SINGLE transmission,
	    with the browser appending the
	    name=value pairs of form info
	    AT the end of the URL

        *   with method="post",
            the browser sends the data in TWO
	    steps -- the action URL in one step,
	    and the name=value pairs of
	    form info in a SEPARATE transaction

*   there are NUMEROUS HTML5 form controls!

*   we'll start with the group of form controls
    all created using the input element
    *   that is, many form controls are special types of
        a single element, called input

    *   this has NO content! (end its start tag with /> )

    *   ...the input element SHOULD have a type
        attribute, indicating WHICH input control
	type you want!

        (if NO type attribute is given, type="text"
	is assumed -- that's a single-line textfield/textbox)

    *   IF a form control is being used to provide
        info to the application tier,
	it SHOULD also have a name attribute

*   let's start with a submit button
    *   a submit button is an input element with
        type "submit"

	<input type="submit" />

        *   you can give this a name, if you'd LIKE to
	    send info to the application tier about
	    this submit button

	*   you can give this a value attribute to
	    specify the submit button's text

*   fieldset element -
    *   when you want to LOGICALLY group a set of
        HTML elements, especially form controls

    *   a block element, but it CAN be nested in a form

    *   default "appearance" is a thin line going around
        the contained elements

    *   if you nest a legend element within it,
        you get that legend appearing as part of the
	fieldset

*   The input element is actually used for a whole
    set of form controls --
    its type attribute determines which form control!

    *   has no content -- so be sure to end its start tag
        with />

    *   SHOULD give it a type attribute (although 
        type="text" will be assumed if you don't)

    *   example: <input type="submit" />
        ...is a SUBMIT BUTTON;

	when clicked, what the user has entered/done in the
	containing form is gathered into name=value pairs
	and sent to the web server using the method
        given in the containing form element's method
	attribute;
   
        *   you can set the text on this button by setting
	    this input element's value attribute

	*   if you give this a name attribute, then a
	    name=value pair will be sent for the submit
	    button itself when this submit button is
	    clicked (otherwise no pair will be sent for it)

...more form controls in Chapter 6 of course text,
   and we'll discuss a few more next time;