Information

Session 4: Follow these steps

1. Download this new HTML template page.
2. In the body you will find the following code: <form method="" action=""> This creates the form block, which is closed at the bottom of the page. The information that goes inside the quotes is very important. method refers to the HTTP Protocol method that is to be used, usually get or post. In this case it should be post. action refers to the location of the server page that will handle the request. A file has been created for you in the language PHP to handle the form request. (You will need to use Save link as ... since clicking it actually runs the file on the server and then change the extension from txt to php) If you upload this file to your website now you simply need to point to that location. This file is already located on this server at: https://webdev0.brambling.cdu.edu.au/reply.php You need to put this into the action so the form points to the appropriate file.
3. To get information that is to be typed in you use the HTML command input This command puts a rectangular box on the screen which accepts keystrokes. However you will notice that nothing indicates what this is used for, so this command should never be used by itself. Let's finish the input command before we look at how it should be displayed to the user. There are a huge number of attributes that go with the input tag. The ones to use in this exercise are:
   • type: this gives the type of input (email, text, password etc). Under HTML5 there are now a huge range of types, many designed specifically for mobiles. For example the type tel on a mobile will bring up the number keypad and expect the user to type in a telephone number.
   • name: this is used by the server (or Javascript) to label the data. name should be unique for each input.
   • value: this is used when the value is not obtained from the keyboard (radio buttons, drop down lists etc).
   • id: this is the normal HTML id and will be used by the HTML label command below.
   • placeholder: this is a HTML5 attribute and puts text into the input box waiting for the keyboard.
   • required: does not allow the form to be submitted unless there is data in the input box.
   There are other attributes which you may use as well. Create the first input for email.
4. You should now see a box on the screen which allows you to type into. However there is nothing to indicate what should go into this box. In HTML you could just type some words next to the input box and they will appear in the browser. This is not good practise for a number of reasons:
   • This text is not wrapped in any sematic tag, it is wrapped inside the body and form tags, but these are both structural tags.
   • This text will not be seen by blind people so the form is not accessible at present.
   To fix this the words need to be wrapped in a semantic tag and linked directly to the input. There is a semantic tag for just this purpose, label. It has one attribute, for, which is used to link the tag to an id. A further advantage of using label is that it increases the touch area on mobile devices. Once you have finished this tag, see if you can complete the input for first name, surname and postcode as well.
5. The next feature in our from will be radio buttons. Here there will be three buttons, one each for hat, vest and socks. These are also inputs, however the type here is radio. Since only one will be selected they should all have the same name. This means that there must be another way to link the data. This is done by adding an attribute to each called value which specifies what the data will be when it is sent to the server. These buttons also need a label attached to them.
6. Currently it is difficult to see these button as a group. In order to create groups in a form use the HTML command fieldset. This will draw a box around the group. If you want the group to have a name use the HTML command legend.
7. The next type of form structure is a drop down list. This is created with the HTML command select. The select command should contain the name attribute to link the information for the server. Each element within the list is created using the HTML command option. The option command should contain the value attribute of the information for the server.
8. The next type of form structure is a checklist. This is different from a radio button where only one value is selected. In a check list all, some , one or none of the list can be selected. To create a check list use the HTML command input. The type is checkbox, all the tags need a name, value and id (for the label) and should be placed inside a fieldset.
9. The final feature of a form is a submit button. This can be created two ways. The old way is to use the HTML command input. The type is submit, the value is the text on the button. If you want to reset the form use the HTML command input with a type of reset. HTML5 has another command called button which works the same as input submit but allow images to go on the button.
10. This form should now work and the server file will respond to your form.
11. You may want to add other features to the form.
    • adding pattern="[0-9]{4}" as an attribute to the postcode input restricts this to 4 numeral characters only. By the way the error message if the user types in the wrong pattern can be customised using the title attribute.
    • adding checked (to radio buttons) or selected (to drop down menu) will pre-select these.
    • adding autofocus to one input box will move the flashing cursor to that box.
    • This is not an exhaustive list of features, read up on forms to find out more.
12. There is plenty of information in the internet about forms, be careful as much of the early information is wrong and does not take semantic markup and accessibilty into account. Google gives away the code which creates a search form on you page. Research this and add it to your practise page.
13. Tables have been in HTML since 1995. Before CSS tables provided the only way to create a layout of information on a web page so were used heavily to create the structure of the page. Now that use of table is strong discouraged. The Semantic use of tables is to lay out data that is similar to Spreadsheet data. Table are often used to lay out data coming from a database in dynamic webpages. To create a table use the table tag, with its closing tag once all the rows are finished. Each row is created with the tr tag, with the closing tag once the row has finished. Each cell of the table is created with the td tag, with its closing tag once the cell has finished. Each row can have a different number of cells but normal practise is to have the same number of cells on each row. There are some other table tags, but these are the basic ones.
14. Exercise: create a table and place some data into it.
15. Usually you want to see the various cells using a border on each cell. The table tag does have attributes which can do this but normal practise now is to use CSS. The CSS command for a border requires three values, size (usually in px), color and type of border. Using CSS (you can use td as the selector) apply a border to your table.
16. If you want further practise with tables there are some good tutorials on the internet including this one and the one from W3 schools. It is good practise to use CSS for all your layout, which means the style attribute should not be used. However there are some good attributes that tables share with both HTML and CSS, especially width which can be used in the HTML quite appropriately to set up column widths.

Activity

The Internet is not just one thing, it's a collection of things - of numerous communications networks that all speak the same digital language. Jim Clark, Founder of Netscape 1993

Session 4: Forms and Tables

HTTP Requests

HTTP (Hyper Text Transfer Protocol) is the protocol that web pages use to communicate with a web server. This is a complex protocol that was first developed in 1999 by W3C. Hyperlinks using the anchor tag and web site URLs are just part of the protocol. The protocol also has ways to get specific information or change information stored on the server. This process uses GET and POST requests.

Get and Post

These are the most common requests for information from a web page. The details are:

• Get requests information from the server, but does not change any information already on the server. The request is visible in the URL so it can be bookmarked. Search engine requests are an example of a get request.
• Post gives information to the server and expects the server to change its own stored information. It is up to the server how this is done. Logging into a website with a username and password is an example of a post requrest. Post request information does not appear in the URL and cannot be bookmarked.

A form in HTML is the normal way that web pages create and submit HTTP get and post requests.

Security

Since HTTP requests are carrying information to which servers will respond, there are security implications in the creation of any request. HTML does not provide any way to handle this, the issue of security needs to be handled by programming languages. Javascript can be used to check the information before it leaves the web page and the programming language on the server can also be used to do the same job before any changes are made. This is called validation and the best practise is for all form submissions to have both server side and client side validation. Since both Javascript and server languages are beyond the scope of this course, the forms created here will not have any validation, so should not be used on a real website.

Ajax

Ajax (Asynchonous JavaScript and XML) is a term used to describe the process of placing information onto a web page without the need for a page refresh. Under HTTP the usual method of gaining information from a web server involves a HTTP request to the server, either as a URL, get or post request, followed by a response by the server. This response was often in the form of a full web page. Ajax allows the server to only send the new information, which is then transformed by the Javascript into HTML and placed on the existing page.

In the last few year there have been many Javascript libraries developed around the Ajax principle. Using these libraries it is now possible to sent HTTP requests from a web page without using forms at all. In Session 6 we will be exploring some of these libraries, however the best practise is to always create HTML forms for any information that will be sent using HTTP requests. Knowing how to create a well structured form is an essential skill for a web developer.

In this course we are really only covering part of the picture with HTTP requests. Creation of forms only shows how the information is created and packaged. To really understand this you do need to study how the information is used on a server using a programming language like PHP and how the information is stored on a web server, usually in a database. In addition you need to understand how the information is returned to the web page, using a HTTP response. This is often in the format of XML or Json. Finally you need to understand how to take this information and inject it back into the web page using Ajax techniques. This course only provides the first component of this knowledge.

Tables

Tables have been in HTML since the beginning and work very much the same as tables in Microsoft Word. They were used in early web sites to help lay out the pages, especially before CSS. However now that CSS is much more powerful Web Developers are trying to return tables to their Semantic usage, to be used for displaying data. The most common use of tables in modern websites is to layout data that comes from the server at run time, ie this data will not be known by the developer when the page is created.

The whole table is wrapped in the table tag. Inside this each row is created using the tr tag. Inside each row there can be a number of cells each with their own td tag. Each cell contains the data which can be text, images, or even other HTML tags including whole tables or forms The table then will automatically adjust its size to the content and lay out the table in the best way possible. You can pre-determine the width of each column by setting up the same number of cells in each row and adding a width attribute to the cells in the first row. However tables are flexible and there is no requirement to have the same number of cells in each row, it is just easier that way. HTML5 has introduced more tags relating to tables including th and thead for a header cells, tfoot and tbody.