ITEC 325 2015fall ibarland

home—lects—exams—hws
D2L—breeze (snow day)

forms
html input forms, and php
chapter 3

• HTML tags for Input Fields
  • check boxes

    <input type='checkbox' name='cb1' value='milk' id='cbOne' checked='checked' />

  • text fields,

    <input type='text' name='txt1' size='10' maxlength='8' id='txtone' />

  • Numeric fields
  • radio buttons

    <input type='radio' name='age' value='over50' id='age-over50' /> <br/> <input type='radio' name='age' value='30to50' id='age-30to50' /> <br/> <input type='radio' name='age' value='under30' id='age-under30' /> <br/>

    
    
    
    
    The variable "age" will be set to one of the three values.
    (A second set of unrelated radio buttons would share a different name attribute.)
    
  • textareas:

    <textarea name='comments' id='komments' rows='3' cols='30'> Initial Contents </textarea>

    Initial Contents
    Note that this isn't an input tag — text areas get their own tag type, “textarea”.

    (I'm not really sure why text areas are different from from checkboxes/radio-buttons/text-fields¹. It'd seem more sensible to either have a single tag input with attributes for every possible type of input-widget, or have each type of input-widget be its own stand-alone tag. But going half-and-half on the issue only confuses me.)

  • Select Boxes (drop-down)

    <select name='title' id='tytle'> <option value = 'mr'>Mr.</option> <option value = 'ms'>Ms.</option> <option value = 'mrs'>Mrs.</option> <option value = 'miss'>Miss</option> </select>

    Mr. Ms. Mrs. Miss
  • Submit button:

    <input type='submit' value='Submit Data to Server' />

  • Reset button:

    <input type='reset' value='Clear Form' />

  • You can use a label tag, to connect some text (anywhere on page) with (sending focus to) a particular input: See the example form below. Either enclose the text and the input inside the same label, or use label's for attribute.

    Gotcha: While <input name='aNodeName'/> uses the name attribute to pass information to the action/request, the html <label for='aNodeId'>… uses id to refer to the DOM node of the current tree. (It makes good sense, but takes a moment of thought.)

• Form Example
  • Simple Form Example
    forms.php

label tags

Testing forms

Q: But how is information communicated from a web form (pure html) to a php program?
A: When you click 'submit', the HTML makes a page-request to the page specified by the form's "action" attribute. (Presumably it's a php page.) The page-request incudes extra information about what html input fields had been selected, etc., as part of the http request. The server gets that request and invokes the php file as normal, but it also pre-initializes an array of values for the program — and it fills that array with the extra information contained in the page-request.

• GET — form data is sent to the server appended to the server script URL
  In the server script, data is retrieved via the superglobal associative array $_GET.
• POST — form data is embedded in the http request header
  Server script - $_POST

• GET requests can be bookmarked;
• GET requests should be idempotent — that is, fetching the same request twice should be the same as getting it once. Even better, they should have no side-effects²³.
  So if your form causes a bank transfer to happen, or adds something to the user's shopping-cart, or updates a database, then GET is probably not appropriate.
• POST requests are more secure against casual looking over the shoulder (but still entirely vulnerable to packet sniffing etc.).
• When refreshing a page created via POST, browsers tend to respond: “Refreshing will cause the page to re-submit; do you really want to do this?”
• Possible guideline (?): If the page is changing a database's contents, use POST.
• Many people suggest using POST as default.
• Explore: How does a newspaper handle it? nytimes. Discuss: When might you choose to use post/get vs. having a separate URL for each result, e.g. different xkcd strips.

takeaways

• Submitting a form is just requesting a new page, except the http packet includes the form-info.
• The server runs the requested php program, but first it takes any form-info from the http-packet and kindly places it into the array _POST, for the program's use.
• Back in the form's html, the name attribute is used as the array-key, and the value attribute is used as the corresponding value in the array.

---

naming conventions

• Best practice: when including a name attribute, let your finger-reflexes add the id with the same value (except for radio-buttons, where the same name is shared among multiple tags).

  It's not so much that you always need both name and id, but it's not uncommon, and you should really name them the same thing. (This page made them slightly different, just so you could see the difference, and understand which is used where).

• In your php, if you pull something from $_POST into a variable for convenience, name your variable the same as the name/index. Just for your sanity.
• In your php form, use array_key_exists (or similar) to make sure the input was provided (not left blank by the user).
• The file containing the web-form and the file containing the handler should be consistently named. For example, for entering customer-info, I suggest⁴ “customer-info-form.html” and “customer-info-handle.php”.

Testing, testing: - samp inside kbd: select File » Save As….
- kbd inside samp: The output was Your name is iblarand.
- kbd inside kbd select File » Save As….

home—lects—exams—hws
D2L—breeze (snow day)

©2015, Ian Barland, Radford University Last modified 2015.Sep.28 (Mon)

Please mail any suggestions (incl. typos, broken links) to ibarlandradford.edu