Andrew Maner in Week 4

Week 4 - Forms and Misc. Markup


Forms

Traditionally, the term 'form' has referred to a printed document that contains spaces for you to input information. HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site. Whether you are adding a simple search box to your site or you need to create more complicated insurance applications, HTML forms give you a set of elements to collect data from your users. We will be discussing:

  • How to create a form on your site
  • The different tools for collecting data
  • New HTML5 form controls


WHY FORMS?

The best known form on the web is probably the search box that sits right in the middle of Google's homepage.

google.png

In addition to enabling users to search, forms also allow users to perform other functions online. You will see forms when registering as a member of a website, when shopping online, and when signing up for newsletters or mailing lists.


FORM CONTROLS

There are several types of form controls you can use to collect information from visitors to your site:

  • Adding Text:
    • Text input (single line) - Used for a single line of text such as email addresses or names
    • Password input - Like a single line text box but it masks the characters entered
    • Text area (multi-line) - For longer areas of text, such as messages or comments
  • Making Choices:
    • Radio buttons - For use when a user must select one of a number of options
    • Checkboxes - When a user can select and unselect one or more options
    • Drop-down boxes - When a user must pick one of a number of options from a list
  • Submitting Forms:
    • Submit buttons - To submit data from your form to another web page
    • Image buttons - Similar to submit buttons but they allow you to use an image
  • Uploading Files:
    • File upload - Allows users to upload files (e.g. images) to a website

How do form controls work?

A user fills in a form and then presses a button to submit the information to the server. The name of each form control is sent to the server along with the value the user enters or selects. The server processes the information using a programming language such as PHP, C#, VB.net, or Java. It may also store the information in a database. The server creates a new page to send back to the browser based on the information received.


FORM STRUCTURE

Form controls live inside a <form> element. This element should always carry the aciton attribute and will usually have a method and id attribute too.

Every <form> element requires an action attribute. Its value is the URL for the page on the server that will receive the information in the form when it is submitted.

Forms can be sent using one of two methods: get or post. With the get method, the values from the form are added to the end of the URL specified in the action attribute. The get method is ideal for:

  • short forms (such as search boxes)
  • when you are just retrieving data from the web server (not sending information that should be added to or deleted from a database)

With the post method the values are sent in what are known as HTTP headers. As a rule of thumb you should use the post method if your form:

  • allows the user to upload a file
  • is very long
  • contains sensitive data (e.g. passwords)
  • adds information to, or deletes information from a database

If the method attribute is not used, the form data will be sent using the get method (i.e. get is the default method).

The id attribute is used to identify the form element uniquely. We will need this when we venture into CSS, in order to style forms. Scripts often use the id attribute value as well.

form_structure.png

form_structure_page.png

TEXT INPUT

The <input> element is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating. When the type attribute has a value of text, it creates a single-line text input.

When users enter information into a form, the server needs to know which form control each piece of data was entered into. (For example, in a login form, the server needs to know what has been entered as the username and what has been given as the password.) Therefore, each form control requires a name attribute. The value of this attribute identifies the form control and is sent along with the information they enter to the server.

You can use the maxlength attribute to limit the number of characters a user may enter into the text field. Its value is the number of characters they may enter. For example, if you were asking for a year, the maxlength attribute could have a value of 4.

You might often see text inputs with the size attribute set. Don't use it, even though you see it used on older forms. The proper way to set the width of an input element is to use CSS (as we shall see).

text.png

text_page.png


PASSWORD INPUT

When the type attribute has a value of password it creates a text box that acts just like a single-line text input, except the characters are blocked out. THey are hidden in this way so that if someone is looking over the user's shoulder, they can't see sensitive data such as passwords.

The name attribute indicates the name of the password input, which is sent to the server with the password the user enters. If you want the input processed, you need the name attribute to have a vlaue.

Just as with the previous example, you can use the maxlength attribute to set a maximum length for the password. Don't use the size attribute. As mentioned earlier, we'll use CSS to style input fields (and everything else).

It is worth noting that the password is hidden on screen, but the data is not being sent securely to the server. You should never use methods like this for sending sensitive data (like credit card numbers). For full security, the server needs to be set up to communicate with users' browsers using Secure Sockets Layer (SSL). The topic of SSL is beyond the scope of this discussion, but you will see it if you take the E-Commerce class sequence (for example).

password.png

password_page.png


TEXT AREA

The <textarea> element is used to create a multi-line text input. Unlike other input elements this is not an empty element. It should therefore have an opening and closing tag.

Any text that appears between the opening <textarea> and closing </textarea> tags will appear in the text box when the page loads.

If the user does not delete any text between those tags, this message will get sent to the server along with whatever the user has typed. (Some sites use JavaScript to clear this information when the user clicks into the text area.)

If you are creating a new form, you should use CSS to control the width and height of a <textarea>. However, if you are looking at older code, you might see the use of cols and rows attributes with this element. The cols attribute indicates how wide the text area should be (in numbers of characters). The rows attribute idicates how many rows the text area should take up vertically. Don't use these! Use CSS instead.

textarea.png

textarea_page.png


RADIO BUTTON

Radio buttons allow users to pick just one of a number of options.

The name attribute is sent to the server with the value of the option the user selects. When a question provides users with options for answers in the form of radio buttons, the value of the name attribute should be the same for all of the radio buttons used to answer that question.

The value attribute indicates the value that is sent to the server for the selected option. The value of each of the buttons in a group should be different (so that the server knows which is which).

The checked attribute can be used to indicate which value (if any) should be selected when the page loads (the default option). The value of this attribute is checked. Only one radio button in a group should use this attribute.

Please note: Once a radio button has been selected it cannot be deselected. The user can only select a different option. If you are only allowing the user one option and want them to be able to deselect it (for example if they are indicating if they agree to terms and conditions), you should use a checkbox instead.

radio.png

radio_page.png


CHECKBOX

Checkboxes allow users to select (and deselect) one or more options in answer to a question.

The name attribute is sent to the server with the value of the option(s) the user selects. When a quesiton provides users with options for answers in the form of checkboxes, the value of the name attribute should be the same for all of the buttons that answer the question.

The value attribute indicates the value sent to the server if this checkbox is checked. The value attribute for each button should be different.

The checked attribute indicates that this box should be checked when the page loads. If used, its value should be checked.

check.png

check_page.png


DROP DOWN LIST BOX

A drop down list box (also known as a select box) allows users to select one option from a drop down list. The <select> element is used to create a drop down list box. It contains two or more <option> elements.

The name attribute indicates the name of the form control being sent to the server, along with the value the user selected.

The <option> element is used to specify the options from which the user can select. The words between the opening <option> and the closing </option> tags will be shown to the user in the drop down box.

The <option> element uses the value attribute to indicate the value that is sent to the server along with the name of the ocntrol if this option is selected.

The selected attribute can be used to indicate the option that should be selected when the page loads. The value of this attribute should be selected. If this attribute is not used, the first option will be shown when the page loads. If the user does not select an option, then the first option will be sent to the server as the value for this control.

The function of the drop down list box is similar to that of radio buttons (in that only one option can be selected). There are two key factors in choosing which to use:

  1. If users need to see all options at a glance, radio buttons are better suited.
  2. If there is a very long list of options (such as a list of countries), drop down list boxes work better.

select.png

select_page.png


You can turn a drop down select box into a box that shows more than one option by adding the size attribute. Its value should be the number of options you want to show at once. In the example below you can see that three of the four options are shown. Unfortunately, the way that browsers have implemented this attribute is not perfect, and thus it should be tested thoroughly if used (particularly in Firefox and Safari).

You can allow users to select multiple options from this list by adding the multiple attribute with a value of multiple. It is a good idea to tell users if they can select more than one option at a time. It is also helpful to indicate that on a PC they should hold down the control key when multi-selecting and on a Mac they should use the command key.

multi.png

multi_page.png


FILE INPUT BOX

If you want to allow users to upload a file (for example an image, video, mp3, or pdf), you will need to use a file input box. This type of input creates abox that looks like a text input followed by a Browse button. (One notable exception is Safari on a Mac, which tends to display a button labelled Choose File, followed by the text "no file selected" or the name of the file that has been chosen by the user.) When the user clicks on the Browse button, a window opens that allows them to select a file from their computer to be uploaded to a website.

When you are allowing users to upload files, the method on the <form> element must have a value of post. (You cannot send files using the get method.)

When a user clicks on the Browse button, the presentation of the window that allows them to browse for the file they want to upload will match the windows of the user's operating system. You cannot control that window's appearance.

upload.png

upload_page.png


SUBMIT BUTTON

The submit button is used to send a form to the server. (It is an <input> of type submit.)

The name attribute can be used, but it is not necessary.

The value attribute is used to control the text that appears on a button. It is a good idea to specify the words you want to appear on a button because the default value of buttons on some browsers is 'Submit query' and this might not be appropriate for some forms.

submit.png

submit_page.png


IMAGE BUTTON

If you want to use an image for the submit button, you can give the type attribute a value of image. The src, width, height, and alt attributes work just as they down when used with the <img> element.

image_btn.png

image_btn_page.png


BUTTON & HIDDEN CONTROLS

The <button> element lets you have more control over how your buttons appear, and lets you place other HTML elements within the button. This means you can combine text and images between the opening <button> and closing </button> tags.

Form controls of type hidden are not shown on the page (although you can see them if you use the View Source option in a browser). They allow web page authors to add values to forms that users cannot see. For example, a web page author might use a hidden field to indicate which page the user was on when they submitted the form.

button.png

button_page.png


LABELLING FORM CONTROLS

Each form control should have its own <label> element as this makes the form accessible to vision-impaired users.

The <label> element can be used in two ways. It can:

  1. Wrap around both the text description and the form input (as shown on the first line of the example below)
  2. Be kept separate from the form control and use the for attribute to indicate which form control it is a label for (as shown with the radio buttons below)

The for attribute states which form control the label belongs to. Note how the radio buttons below use the id attribute. The value of the id attribute uniquely identifies an element from all other elements on a page. The value of the for attribute matches that of the id attribute on the form control it is labelling. This technique using the for and id attributes can be used on any form control.

labels.png

labels_page.png


GROUPING FORM ELEMENTS

The <fieldset> element lets you group related form controls together. Most browsers will surround a fieldset with a line. You will learn later how to control this with CSS.

The <legend> element lets you give the fieldset a caption. This can be very helpful for the user.

fieldset.png

fieldset_page.png


HTML5 FORM VALIDATION

Before HTML5, forms had to be validated using JavaScript. But now, with HTML5, we can do much of the validation in HTML5. (Validation is determining if a form control has been filled in correctly.)

You should always validate information that will be passed to a server. Why? You want to make sure the information can be "understood" by the server (is in the right format, has no errors, etc) so you can avoid errors that could be avoided by front-end validation. Validation reduces server load, and lets users see if they have problems in their forms. Not all browsers currently support HTML5 validation, so you will learn how to do validation with JavaScript in a later class (if you are in the web program).

By way of example, the required attribute can be used to indicate a field that must be filled in. Its value should be set to required if you intend to use it.


HTML5 introduced new form controls to standardize the way some information is gathered. (Older browsers do not recognize these new inputs and will treat them as standard inputs of type text.) When asking for a date, you can use an <input> element of type date. (Only a few browsers support this option at this point, so the second screenshot shows the "Live" view in Dreamweaver.)


HTML5 EMAIL & URL INPUT

You can use the email type for <input> elements you use to collect email information. In addition, you can use the url type for <input> elements you use to collect website information. Beware,though, as few browsers support these types as of today.


HTML5 SEARCH INPUT

HTML5 provides a special input type (search) for when you want a single line text box for search queries. As with the other new HTML5 types, you should have a work-around in place for browsers that don't support this type.

Now is as good a time as any to note that all text input fields can have another attribute (placeholder) to allow you to place instructional/helpful text in the field for the user's benefit. The test does not persist, and will not get sent with the form.


SUMMARY: FORMS

  • When you want to collect info from users you need a form. Forms go within <form> elements
  • Info from a form is sent in name-value pairs
  • Each form control is given a name (by you), and the text the user types in or the values of the options they select are sent to the server
  • HTML5 introduces new elements and types which make it easier for visitors to fill in forms (and for you - the auther - to validate their input)

Extra Markup

In this section, we will discuss the following:

  • The different versions of HTML and how to indicate which one you are using
  • How to comment your code
  • Global attributes - the ones you use on any element - such as the class and id attributes
  • Elements used to group together parts of the page where no other element is suitable
  • Embedding a page within a page with iframes
  • Adding special characters (such as angle brackets < and > and the ampersand &) to your code


EVOLUTION OF HTML

This is a very short discussion about this. You can read more in the textbook (page 179) or on the Web. In short, HTML has been around for quite some time. The versions you will still see when randomly inspecting source on the Web will be HTML4 (1997), XHTML1 (2000), and HTML5 (standard as of 2015). You might even have to write some older HTML (HTML4 or XHTML1), but I recommend you focus on HTML5. It's better in pretty much every respect.

Using doctypes in HTML to indicate the type you are using:


COMMENTS IN HTML

Commenting your code is good practice. It helps prevent you from losing track of what your code is doing, particularly after you walk away from it for a long time. In addition, it helps document your intentions for the benefit of others who might be reading and/or maintaining your code.

I recommend placing comments at the starts and ends of larger sections, so as to indicate the hierarchy to the reader. Your comments are only visible to someone reading the actual source code, not to a person who has loaded your page in a browser.


THE ID AND CLASS ATTRIBUTES

Every HTML element can have an id and/or class attribute. These are called "global attributes," in the sense that they are visible to all attached code. (This is important, since we will be using ids and classes when styling with CSS. In addition, they are used quite commonly when writing JS to control your page's behavior and/or appearance.)

You generally give an id to something if it needs to have a unique property, and/or if it will have a unique style (when we use CSS). In contrast, you generally give a class to something if it shares properties with other elements or will share the same styling as other elements with that class.

Classes and ids do not - by default - change the appearance of HTML elements. They are used "behind the scenes," for identification purposes. As mentioned above, you will use them for styling purposes (but again, you will be using the id and class names for identification purposes).


BLOCK AND INLINE ELEMENTS

Block level elements will always appear to start on a new line in the browser, while inline elements will always appear to continue on the same line as neighboring elements.

Examples of block elements include <h1>, <p>, <ul>, <ol>, and <li>.

Examples of inline elements include <a>, <b>, <em>, <strong>, <i>, and <img>.


GROUPING TEXT & ELEMENTS IN A BLOCK

The <div> element lets you group together any elements you like into a single block-level box.

Why might you want to do this? Well, it is quite common to group all of the elements in a site's header into a single <div> (or, alternatively, a <header> element). In general, divs are used to group similar content together into blocks. Other uses of divs include (but most certainly are not limited to):

  • Blog entries
  • Footer content
  • Gallery images
  • ...
In short, any group of elements you want to organize into a single block-level element can be aggregated in a div.

Divs are particularly useful for placement and styling. As we will see later this term, we can use CSS to place divs precisely where we want them and color and size the precisely as we want them.


GROUPING TEXT & ELEMENTS INLINE

Sometimes you want to group things within an inline element (such as when you want to style a portion of a sentence) rather than a block-level element. This is what the <span> element is for. It is the inline equivalent of a <div>. The most common reason to use a span is to control the apperance using CSS.


IFRAMES

An <iframe> is like a small window that's been cut into your page, and in that window you can see another page. The term iframe stands for inline frame.

There are many uses of iframes, but the two most common are: embedding Google maps within sites, and embedding YouTube videos within sites.

There are several attributes you can use within an <iframe>:

  • src - specifies the URL of the page to show in the frame
  • height - specifies the height of the iframe in pixels
  • width - specifies the width of the iframe in pixels
  • scrolling - NOT supported in HTML5. In older versions of HTML, it indicates whether the iframe should have scrollbars or not.
  • frameborder - NOT supported in HTML5. In older versions of HTML, it indicates whether the iframe should have a border or not.
  • seamless - NEW TO HTML5. The seamless attribute specifies when scrollbars are not desired. It does not require a value, but you will commonly see authors giving it a value of seamless.

Note: Content inside an <iframe> tag will often be blocked in Firefox, particularly if it is of certain types. So, the second screenshot below is from Chrome.


ESCAPE CHARACTERS

Some characters are used in and reserved by HTML. (A great example would be the left and right angled brackets - also called the less than or greater than symbols.) If you want to use any of these characters, you have to call them using special codes. Here is a non-exhaustive listing of the most common:

  • < "less-than sign" - use &lt; or &#60;
  • > "greater-than sign" - use &gt; or &#62;
  • & "ampersand" - use &amp; or &#38;
  • ¢ "cent" - use &cent; or &#162;
  • £ "pound" - use &pound; or &#163;
  • ¥ "yen" - use &yen; or &#165;
  • € "euro" - use &euro; or &#8364;
  • © "copyright" - use &copy; or &#169;
  • ® "registered trademark" - use &reg; or &#174;
  • ™ "trademark" - use &trade; or &#8482;
  • ‘ "left single quote" - use &lsquo; or &#8216
  • ’ "right single quote" - use &rsquo; or &#8217;
  • “ "left double quote" - use &ldquo; or &#8220;
  • ” "right double quote" - use &rdquo; or &#8221;
  • × "multiplication sign" - use &times; or &#215;
  • ÷ "division sign" - use &divide; or &#247;

Here's how I embedded the above list into this page:


HOMEWORK 4 - PART 1

Code an HTML page that mimics the one in the image below. Your page should use the proper tags, including (but not limited to) <form>, <fieldset>, <legend>, <label>, <input>, <select>, <option>, and <textarea>. In addition, you should use the appropriate attributes for each form control. (In particular, each control needs a name attribute, and the appropriate conventions should be used. Password fields shoud be treated differently from standard text fields.) For your form action, just use one of the form submission actions we used in this lecture. Your select drop down should have 5 options, the first of which should be Google. (You can choose the others, but 5 unique options must be there.) Your radio buttons and checkboxes must work.

HOMEWORK 4 - PART 2Code an HTML page that mimics the one in the image below. The content is quite tongue-in-cheek and is not meant to offend or poke fun. It is pure silliness, but the steps required to make it illustrate most of the things we talked about in part 2 today.