TABLE OF CONTENTS (HIDE)

HTML and CSS

Intermediates

HTML Form & HTTP Request

An HTML Form (Web Form) allows a web user to interact with the server. An HTML form contains input elements (or fields, controls, widgets), such as text fields, checkboxes, and buttons. These input fields allow web users to supply data (called request parameters or query string) to the web server. Over at the web server, a server-side program collects these data and returns a dynamic response based on the inputs submitted.

HTML Form By Examples

EXAMPLE 1 ("HtmlFormEx1.html"): Basic <form> Structure

<!DOCTYPE html>
<!-- HtmlFormEx1.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML Form Structure</title>
</head>
<body>
<form action="submit.php" method="get">
  <label for="username">Username</label><br>
  <input type="text" id="username" name="username"><br>
  <label>Password<br>
  <input type="password" name="password"></label><br>
  <input type="submit" value="SEND">
  <input type="reset" value="RESET">
</form>
</body>
</html>

An HTML form is enclosed within <form>...</form> tags. The attribute action provides the URL for which this form is to be submitted. The attribute method specifies the HTTP method (GET or POST) to be used for submission.
There are 2 input elements in this form:
1. <input type="text">: a text field for users to enter data.
2. <input type="password">: for password entry - displayed as * on the screen.
We use a <label> to label each of the <input>. You can either match the for attribute of the <label> to the id attribute of the <input> element to be labeled (as in the first <input>); or wrap the <input> inside the <label> (as in the second <input>). The <label> improves the usability for the mouse-user. When you click on the <label>, the labeled <input> element is selected.
There are 2 buttons in this form:
1. <input type="submit">: The so-called Submit button. Clicking the submit button sends the data to the action URL.
2. <input type="reset">: The reset button, which clear all the input fields.
The value attribute of the button appears as the label of the button.
When the user submit the form, the browser collects the request parameters from the input elements, in the form of name=value pairs. The name corresponds to the name attribute of the <input> elements; the value corresponds to the text entered. In this example, there are two sets of name=value pairs - username=xxx and password=yyy. The request parameters are joined together via a & sign, i.e., username=xxx&password=yyy, to form a so-called query string. The query string is then append behind the action URL via a ? sign, i.e., submit.php?username=xxx&password=yyy. As URL does not accept special characters, they are encoded in the form of %hh (called URL encode), where hh is the ASCII code in hexadecimal, e.g., ~ is encoded as %7e; ^ as %5e. Space can be encoded in %20 or + for simplicity.
Try submitting the form. Observe the request parameters in the submitted URL. You are expect to get an error 404, as you have yet to write the server-side processing program "submit.php".
The server-side program receives the query string; URL decodes the special characters; and performs operations based on these parameters (e.g., query the database). It then returns an appropriate response to the client. I will not cover server side programming in this article. Read the respective server-side programming techniques such as PHP, Java Servlet, JSP, and etc.

EXAMPLE 2 ("HtmlFormEx2.html"): More Controls and Input Validation

<!DOCTYPE html>
<!-- HtmlFormEx2.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Input Validation</title>
</head>
 
<body>
<form action="submit.php" method="get">
  <fieldset>
    <legend>Login</legend>
    <label for="username">Username*</label><br>
    <input type="text" id="username" name="username" required><br>
    <label for="password">Password*</label><br>
    <input type="password" id="password" name="password" required pattern=".{4,}">
  </fieldset>
 
  <fieldset>
    <legend>Gender*</legend>
    <label><input type="radio" name="gender" value="m" required> Male</label>
    <label><input type="radio" name="gender" value="f"> Female</label>
  </fieldset>
 
  <fieldset>
    <legend>Programming Skill</legend>
    <label><input type="checkbox" name="programming" value="java"> Java</label>
    <label><input type="checkbox" name="programming" value="cpp" checked> C++</label>
    <label><input type="checkbox" name="programming" value="csharp"> C#</label>
  </fieldset>
 
  <fieldset>
    <legend>Fruit</legend>
    Choose a fruit:
    <select name="fruit">
      <option value="apple">Apple</option>
      <option value="banana" selected>Banana</option>
      <option value="orange">Orange</option>
    </select>
  </fieldset>
 
  <textarea name="comment" placeholder="Enter your comment here" rows="5" cols="40" maxlength="180"></textarea><br>
 
  <input type="submit" value="SEND">
  <input type="reset" value="RESET">
</form>
</body>
</html>

We can group a set of related input fields into <fieldset> and provide a descriptive <legend>. The input fields will be enclosed in a box, with the legend shown on the top border.
In <input type="text"> (Line ?), attribute required is added to request browser to validate that this field is not empty. Browser will display an error message and will not submit the form if this field is empty.
In <input type="password">, besides the attribute required, attribute pattern=".{4,}" requests browser to perform "Regular Expression Pattern Matching", in this case, 4 or more characters.
Radio buttons (can check at most one button) are marked by <input type="radio">'s. Each <input> has its associated <label>. We typically use the same name attribute for all the buttons, and assign different value for each button. You can place the required on any one of the button to request the browser to validate that one is checked.
Checkboxes (can check zero or more boxes) are marked by <input type="checkbox">. We added checked attribute on one of the box, to set its initial state. Attribute checked is applicable to checkboxes, as well as radio buttons.
Pull-Down menu is defined via a <select> element, with each item marked by an <option>. We set the common name in the name attribute of the <select>, and different value in <option>. We can also mark the selected element via attribute selected in the <option>.
Textarea (multi-line input text field) is marked via <textarea>...</textarea>. The attribute placeholder is applicable to all input text fields, which shows a hint in the input field before the user enters a value. The attribute maxlength request browser to limit the length of the input.
Try submitting the form. Observe the request parameters in the submitted URL.

EXAMPLE 3 ("HtmlFormEx3.html"): HTML5 Controls

[TODO]

The HTML Form's Syntax

The <form> Element and its action Attribute

An HTML form is enclosed by a <form> element. The attribute action specifies the URL for which this web form is to be submitted, which default to the current page. The attribute method specifies the HTTP method used for submission, i.e., GET or POST (with default of GET).

<form method="get|post" action="url">
  ... Input elements ...
  ... Submit/Reset buttons ...
</form>

The input fields (or controls, widgets) are placed Inside the <form>.

Grouping Input Fields: The <fieldset> and <legend> Elements

A well-designed web form uses <fieldset> to group the input fields into sets, with a <legend> to provide a descriptive legend for the fieldset. For example,

<fieldset>
  <legend>Contact Details</legend>
  <label for="name">Name</label>
  <input id="name"><br>
  <label for="telephone">Telephone</label>
  <input id="telephone"><br>
  <label for="email">Email</label>
  <input id="email"><br>
</fieldset>

Labeling <Input> Fields: The <label> Element

Each <input> field is typically associated with a <label> to label the input field. You can bind the <input> element it labels by matching the for attribute of the <label> element with the id attribute of the element; or place the <input> element within the <label>...</label> element (without the for attribute), as follows:

<!-- Matching for with id-->
<label for="username">Name</label>
<input type="text" id="username" name="username">
 
<!-- Placing <input> inside <label> -->
<!-- Label can be in front or behind the <input> -->
<label>Name: <input type="text" name="username"></label>
<label><input type="radio" name="gender" value="m">Male</label>
<label><input type="radio" name="gender" value="f">Female</label>

Label does not have any visual effect. But if you click on the label, the associated input field will be selected.

Input Fields

Input fields are marked by <input>, <textarea>, <select> and <button>. The <input> is a standalone element, with attribute type to specify its sub-types (e.g., type="text" and type="checkbox"). On the other hand, <textarea>, <select>, <button> are container elements.

Element	Control	Description
<input type="text">	Single-line Text Input Field	For text input. The default type for `<input>.`
<input type="password">	Single-line Password Input Field	Password shown in asterisk (`*`).
<textarea>...</textarea>	Multi-line Text Input Field	For text input.
<input type="checkbox">	Checkbox	Can check zero or more boxes
<input type="radio">	Radio Button	Can check at most 1 button
<select>...</select> <optgroup>...</optgroup> <option>...</option>	Drop-down List
<input type="submit">	Submit Button	Click to submit the form to the server
<input type="reset">	Reset Button	Reset all fields to their default value
<input type="image">	Image Button	Use an image as submit button
<input type="button">	Generic Button
<input type="file">	File Chooser
<input type="hidden">	Hidden Field
<button>...</button>	Button	Same as `<input type="button">`
<input type="email"> (HTML5)	Email Address	Can be validated.
<input type="url"> (HTML5)	URL	Can be Validated.
<input type="number"> (HTML5)	Numeric value	You can use attributes `min\|max` to specify the min and max values; and `step` to specify the step size (default of 1). Many browsers add a spin button (with up/down arrow) to the right corner of the box
<input type="range"> (HTML5)	Numeric value	You can use attribute `min\|max` to specify the min and max values. Many browsers use a slider for `range`.
<input type="color"> (HTML5)	Color	Browser may pop-up a color chooser.
<input type="date\|time\|datetime\|month\|week"> (HTML5)	Date and Time	Browser may provide a drop-down calendar. Poorly supported now.
<input type="tel"> (HTML5)	Phone number	No validation as phone numbers vary across countries.
<input type="search"> (HTML5)	Search keywords	Search Box for entering search keywords. No validation.
<datalist> (HTML5)		Define a list of pre-defined options for `<input>`
<output> (HTML5)		Define the result of a computation
<keygen> (HTML5)		Define a public-private key pair field for authentication of the form

HTML5 Web-Form New Features

Adding Hints for Input Text Fields: Attribute placeholder

You can use the placeholder attribute to provide hints for the input, which will be shown in light-grey watermark and disappears when the user clicks on the field. For example,

<label>Login: <input type="text" placeholder="Enter your username or email"></label>

Placeholders should be used to clear up the ambiguity by providing examples, instead of another label.

Set the Initially-Focus Element: Attribute autofocus

You can add the attribute autofocus (with no value) to the element that is supposed to receive the focus when the page is loaded.

Input Field Validation

HTML5 implemented client-side validation on input fields.

required: You can add attribute required (with no value) to signal to the browser that non-empty input is required for that field. The browser will pop-up an error message if empty value is submitted for that field.
novalidate, formnovalidate: To turn off the validation (e.g., to test the server-side validation), add attribute novalidate to the <form> element; or attribute formnovalidate to the submit button.
pattern="regex": You can also match the input value against a regular expression (regex) via attribute pattern="regex".

Auto-complete with <datalist>

[TODO]

Progress Bar <progress> and Meter <meter>

The progress bar <progress> shows how far a task has progressed. Meter <meter> show the current value (in a known range) or percentage.

HTTP GET/POST Request

The Request Parameter (Name-Value Pair)

Each input field is associated with a name-value pair, which will be submitted to the server, as part of the HTTP request. The name is identified by the name attribute of the input field; while the value could be the user input (for text fields), or identified by the value attribute (for checkboxes, radio buttons and list options).

For example,

<label>FirstName: <input type="text" name="firstname"></label>
   <!-- name=value pair is firstname=dataEnter -->
 
<label><input type="radio" name="gender" value="m">Male</label>
<label><input type="radio" name="gender" value="f">Female</label>
<!-- name=value pair is gender=m or gender=f, depending on which button is checked -->

When the form is submitted, the name-value pair will be sent to the server, as a so-called request parameter.

The Query String (All Name-Value Pairs)

When a user fills in the form and click the submit button, the request parameter from all the input fields, in the form of name=value pair, will be send to the server as part of the request. The processing URL is specified in the action attribute of the <form>. For a GET request, the request parameters are append behind the URL separated by a '?'. The name=value pairs are separated by an '&'. Since the URL cannot accept special characters (such as blank and '~'), they will be encoded in the form of %hh, where hh is the ASCII code of the special character. e.g., '~' as %7E; blank as %20 or '+'. This is known as URL encoding.

For example, suppose that the action URL is http://www.example.com/test/submit.php, with request parameters username=peter, password=1234, gender=m, and comment=testing 1 2 3, the resultant GET request URL is:

http://www.example.com/test/submit.php?username=peter&password=1234&gender=m&comment=testing+1+2+3

Take note that the password are not encrypted, although it does not appear on the screen.

GET vs. POST Request Methods

For GET, the query string is appended behind the action URL. For POST, the query string is sent in the request body, and does not show up in the URL. POST is generally preferred as it can send more data, and does not mess up the URL.

How the Server Processes the Request Parameters?

The server-side program receives the query string; URL decodes the special characters; and performs operations based on these parameters (e.g., query the database). It then returns an appropriate response to the client. I will not cover server side programming in this article. Read the respective server-side programming techniques such as PHP, Java Servlet, JSP, and etc.

[TODO] Simple example on PHP

Color

Color theme is the most important factor affecting the appearance of your web pages. I am NOT an expert on colors, but these are what I understood.

216 Browser-Safe Colors

Not too long ago, the computer monitors can display only 256 colors (aka palettes). Hence, web designers created the so-called 216 browser-safe colors, which can be shown correctly and quite consistently on all the computer displays. Today, most of the computer monitor can display 24-bit true colors, is it still relevant?

The 216 browser-safe colors are obtained mathematically (and not artistically or psychologically, and hence really really ugly), by putting values of #00, #33 (51), #66 (102), #99 (153), #CC (204), #FF (255) on each of the RGB triplets (6×6×6=216).

Most computer monitors today are at least capable of display 16K (or 16384) colors. You could put values of #00, #08, #10, #18,..., #F0, #F8, #FF on each of the RGB triplets.

Default Color Names

Again, the HTML/CSS provides default color names, such as red, green, blue, grey, and etc. Again, the color value for these color names are obtained numerically. As a result, these colors are really really ugly. Don't use them!

Color Themes

The ColorPicker (@ http://www.colorpicker.com/) can help you setup a color scheme. You need to pick the "Primary" color. It could generates the "Complementary", "Triade", "Tetrade" and "Analogic" Colors. It also has a color chart @ http://www.colorpicker.com/color-chart/.

The ColorSchemer Online (@ http://www.colorschemer.com/online.html) generates a set of colors, based on a chosen "Primary" color.

DreamWeaver has a smart color-picker for picking thematic colors.

Rules-of-Thumb of Using Color

Nothing beats black text on white background for reading text on a computer monitor!!!
Stay monochrome (black on white). Use an additional color for highlighting headings, links, and etc.
Use color with restraint. There is no reasons to use more than 4 colors.
Use a lightly shaded background.
Use color in a box.

Fonts & Typography

The choice font faces are probably the one of the most important factor affecting the appearance of your web pages. These are the main categories of fonts:

Serif: Serif fonts come with little horizontal tails, to guide you in reading a long (horizontal) line of texts. Serif fonts are used in printed materials such as newspaper for easy reading. For example,
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
San-serif: without the little tails, used for computer display and short heading in printed materials. [I don't know why? Probably you are not suppose to read long lines from the computer screen.]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Monospace (Fixed-width Font): the old typewriter fonts, used for displaying program code, where spacing and alignment is crucial.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cursive:
Artistic:

Fonts look good in prints may not look good on screen. You are recommended to use sans-serif fonts for the web pages, which are displayed on computer screen.

This table shows you some of the common fonts.

Serif	San-serif (Body)	San-serif (Heading)	Monospace
Times New Roman	Segoe UI (Segoe)	Trebuchet MS (uc)	Lucida Console
Georgia	Tahoma	Trebuchet MS (lc)	Courier New
Palatino	Helvetica	Segoe UI	Consolas
	Arial	Verdana	Courier
	Arial Narrow	Arial Black
	Lucida Sans Unicode	Century Gothic
	Calibri	Impact

In CSS, fonts are specified in property font-family. You can use generic family names such as "serif", "sans-serif", "monospace", and "cursive". The actual font used depends on the individual browser's settings.

Which Font Should I Use?

This is a million-dollar question. Some sans-serif font is nice when use in body text (normal weight, small font size, may need italics), others are suitable for use in heading (bold, bigger font size, uppercase). Some fonts are nice in lowercase, but not too nice in uppercase. Some nice fonts are not available in all the browsers (Windows 2000/XP/Vista/7, Mac, Linux?). For web publishing, you need to select one that most of your readers can enjoy.

You probably want to use different fonts for body texts and headings:

Headings: use bigger font-size (and most probably in bold face) to draw readers' attention, and help to organize the ideas. There are usually a few levels of headings. Set the letter-spacing for headings.
Body Texts: comprises the main bulk of your writing. Use smaller but legible font-size. Use italics or bold to emphasize certain terms or phrases.

These are my choices of fonts for web publishing (i.e., screen fonts, NOT printing fonts).

For Program Codes - Use Monospace or Fixed-width Font

Consolas (Windows - designed for Visual Studio 2005) is my first choice, but may not be generally available. Zero(0)/oh(O), one(1)/eye(I)/else(l) are clearly differentiated. It has a nice good italic style 1234567890.