Creating Checkboxes

• Checkboxes provides multiple options.

• They allow visitors to select more than one options at once.

• The value (data) will be sent to the server if the checkbox is checked.

• The keyword checked can be used to make the checkbox ON by default when the page is loaded.

 <input type="checkbox"

 id="…"

 name="…"

 value="…" />


Creating Checkboxes

56 Contact number: <input type="password" id="contact" name="contact" value="" />

57 Contact number: <input type="password" id="contact" name="contact" value="" />

58

59 Email address: <input type="password" id="email" name="email" value="" />


60 <br />

61

62 To be contacted:

63 <input type="checkbox" name=" byphone " value="byphone" checked /> By Phone

64 <input type="checkbox" name=" byemail " value="byemail" />By Email

65

66 </p>

67

68 <input type="submit" value="Submit" />


Creating Drop-Down List Boxes

• Drop-Down list boxes provide a set of options for visitors for selection.

• An arrow on the right of the selection window tells visitors that there are more options available.

• By default, only one of the options in the list can be selected, unless the multiple attribute is specified.


Creating Drop-Down List Boxes

63 <input type="checkbox" name="preference" value="byphone" checked="checked" />By Phone

64 <input type="checkbox" name="preference" value="byemail" />By Email

65 <br />

66

67 Category:

68 <select name="category">

69 <option value="deposits" selected >Deposits</option>

70 <option value="payments">Payments</option>

71 <option value="transfers">Transfers</option>

72 <option value="other">Other</option>

73 </select>

74 <br />

75

76 </p>


Creating Multi-line Text Areas

• Unlike text boxes, text areas allow visitors enters multiple lines of text.

• The dimensions of text boxes can be specified by either rows and cols attributes, or CSS style.

• Scroll bars will appear if necessary.


Creating Multi-line Text Areas

Category:
 <select name="category">
 <option value="deposits" selected="selected" >Deposits</option>
 <option value="payments">Payments</option>

 <option value="transfers">Transfers</option>


 <option value="other">Other</option>
</select>
 <br />


 Questions/Feedback <textarea name="feedback" cols="25" rows="5" >

 Put your default text here, within the textarea tag….

 </textarea>
 </p>

<input type="submit" value="Submit" />



Resetting the Form

• A reset button allows visitors to start over with a fresh form.


Resetting the Form

67 Category:

68 <select name="category">

69 <option value="deposits" selected="selected" >Deposits</option>

70 <option value="payments">Payments</option>

71 <option value="transfers">Transfers</option>

72 <option value="other">Other</option>

73 </select>

74 <br />

75

76 Questions/Feedback <textarea id="feedback" name="feedback" cols="25" rows="5" ></textarea>

77 </p>

78

79 <input type="submit" value="Submit" />

80 <input type="reset" value="Reset" />


Creating Push Buttons

• Push buttons are similar to the Submit and Reset buttons.

• Corresponding actions will be performed when the push buttons are clicked.

• They work closely with JavaScript code.


Creating Push Buttons

74 <br />

75

76 Questions/Feedback <textarea id="feedback" name="feedback"cols="25" rows="5" ></textarea>

77 </p>

78

79 <input type="submit" value="Submit" />

80 <input type="reset" value="Reset" />

81 <input type="button" value="Print" onClick="window.print();"onkeypress="window.print();" />



Other <INPUT> tags..

• Type="Hidden"

• Creates a data field that does not shown up on the page (maybe inserted by scripts to generated HTML files in order to pass some state information back to server)

• <INPUT type="hidden" name="user_id" value="1234">

• Type = "File"

• Allows uploading binary file to server via HTTP

• Remember to set <form> enctype to "multipart/form-data" using "POST“ method

 <input type="file" name="Attachment">


Organizing the Form Elements

• The <fieldset> element can be used to group related elements together and make the form easier to follow.

• The <legend> element can be used to provide a caption or description for the group of elements.

 <fieldset>

 <legend> … </legend>

 … related elements …

 </fieldset>


Organizing the Form Elements

Screen                 XHTML Code Design (Organizing)



Organizing the Form Elements

43 <fieldset>

44 <legend> Personal Information </legend>

45 <p>

46

47 Title:

48 <input type="radio" id="mr" name="title" value="Mr" checked="checked" />Mr

...

70 </fieldset>

...

74 <fieldset>

75 <legend> Message </legend>

76 <p>

77

78 Category:

79 <select id="category" name="category">

...

90 </fieldset>


Organizing the Form Elements

• Apart from text, you can also place an image in the legend

 <fieldset>

 <legend><img src="test.gif" ></legend>

 <textarea name="doc" id="doc" cols="30" rows="5" >

 </textarea>

 </fieldset>


Miscellaneous tags, tips and HTML5

In order to equip students with enough knowledge to start the group project ASAP, we’ll skip the following pages for the time being

We’ll visit the following pages again after we finished the lectures on CSS, JavaScript and PHP.


Useful Tips:

• Q1: How to insert spaces in HTML?

• A1: Since HTML treats consecutive spaces/tabs/enter as a single space, so the rendered output of:

 – <p>Hello World</p>

 and

 – <p> Hello World </p>

 are identical.

To show spaces, you could use either:

1. The <PRE></PRE> tag which preserves spaces & line breaks

2.   -- each occurrence will be translated to a space


Useful Tips:

Besides   some other examples of escape sequences include:


Useful Tips:

• Q2: How to reload a page periodically?

• A2: One could use the <META> tag within <HEAD> of html (This method works even if JavaScript is disabled by the user)

• Syntax:

• To refresh every 5 seconds:

 – <META HTTP-EQUIV="Refresh" CONTENT="5;">

• To redirect to another site (Yahoo) after 5 seconds

 – <META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://www.yahoo.com">


Some new features of HTML5

• HTML5 supports playback of audio / video without the need of plug-in (like QuickTime / Flash), which is good for mobile browsers

• The list of supported features varies between browsers and versions (e.g. IE8: no <audio>, Opera11: no mp3…etc)

• Besides browser version, some features also depends on hardware and drivers (e.g. webGL (3D graphics in webpage) requires up-to-date graphics driver; Precision of Geo-location is also affected by the support of GPS / WiFi of the device…etc)

• In here we’ll cover a few new features which requires no prior knowledge. (Features like <canvas> (2D drawing), webGL (3D graphics) and Geo-Location requires calls and control in JavaScript)

• Also we’ll cover some enhancements to existing tags (e.g. new <INPUT> types for color / date / email input and new attribute like required)

• For Interest:Demo of HTML5 Geolocation: http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_geolocation_map


The <audio> tag

• <audio> supports playback of music in the format of:

 – WAVE (uncompressed MS Windows audio, not recommended)

 – MP3 (MPEG Layer-3 audio, browsers (e.g. Opera) may give no support because of patent reasons)

 – OGG (Ogg Vorbis: Free open-source format, performance rivals mp3)

• Basic Syntax:

 <audio>

 <source src="music.mp3" type="audio/mpeg">

 <source src="music.ogg" type="audio/ogg">

 Audio tag is not supported!

 </audio>


The <audio> tag

• <audio> contains one or more <source>

• <source> are evaluated from top to bottom, (only) the first <source> with its format supported will be played.

• If all <source> are not supported, content in <audio> (e.g. red text in last page) will be displayed instead (e.g. upgrade notice)

• If you’re sure that the file plays, you may skip <source> and bind as: <audio src="music.mp3">…</audio> (no type here, so not preferred)

• By default, no playback buttons are shown (e.g. just like background music) and the audio is stopped from the beginning.

• Therefore you may add extra attributes to the <audio> tag:

• <audio controls>…</audio>

• <audio autoplay>…</audio> (needed if no controls e.g. background music)

• <audio loop>…</audio>


The <video> tag

• Similar to <audio>, the non-empty tag may contain internal <source> in different formats (or bound as src attribute):

 <video width="320" height="240" controls poster= "loading.gif" >

 <source src="movie.mp4" type="video/mp4">

 <source src="movie.ogg" type="video/ogg">

 Your browser does not support the video tag.

 </video>

• One significant different is that you may specify the width, height, and also the poster (picture) which is displayed during (long) file load (before user clicks play)

• In the proposed specification, there’re <track> tags for subtitles in different languages but NO browser support it as at the time of writing.


The <video> tag

• Supported format type:

 "video/mp4": MPEG-4 (H.264 video + ACC audio)

 "video/webm": VP8/WebM proposed by Google, as mp4 replacement

 "video/ogg": Open source: Ogg Theora video + Ogg Vorbis audio

• No support for avi, flv, mov and rmvb, the reason is obvious (patent bombs from MS, AdobeFlash, Apple and Real ?)

• MPEG-1 and MPEG-2 (*.mpg) are also not supported for the inferior coding efficiency.

• Some prior versions of Firefox and Opera do not support MP4 because of the unclear patent status of MPEG-4

• IE9 and Safari do not support WebM (by Google)

• While Chrome supports all the 3 formats.


New <input> tags in HTML5

• HTML5 supports more <input> types and offloads JavaScript for simple data validation (e.g. empty box? number in range? etc)

• As at the time of writing, tag support varies among browsers. While most of the new tags work in Chrome/Opera, Firefox/Safari supports some; old versions of IE may not even recognize it at all !

 <input type="color">

So far supported by Opera & Chrome you may also specify default in value value is hex string like "#ff00ff" (note: unlike CSS, names like "red" doesn’t work)


New <input> tags in HTML5

 <input type="date">

So far supported by Opera & Chrome value is a string like "2013-06-06", Which could be typed or picked from calendar (which looks rather different)

Variations:

 type="datetime", type="datetime-local", type="month", type="week"

 <input type="email">

Supported by all but old IE/Safari Looks like typical text box, but warning will be shown for malformed email upon submission (not upon typing!)

Note: empty string is not considered malformed!


New <input> tags in HTML5

 <input type="number">

Supported by all but Firefox/IE9 Numbers are typed directly or adjusted with the up/down arrows. Usually used with attributes max, min and step

Example Target: {-1/-0.5/0.0/0.5/1.0}

 <input type="number" min="-1" max="1" step="0.5">

When adjusting with arrows, values are capped at max/min boundaries. It may happened that the value may (temporarily) fall outside range if the user type the number directly. But upon submission (not upon typing!), browser gives warning message and stops submission.

Note: Browser may (Chrome) or may not (Opera11) catch non-numerical input!


New <input> tags in HTML5

 <input type="range">

Supported by all but Firefox/IE9 Almost identical to type="number" also works for non-integer but default step is 1. 

Note that the internal value is invisible to user, which may or may not be good.

 <input type="url">

Behavior varies. Opera simply adds http:// prefix to input string.

Chrome stops submission if input contains no protocol:// prefix

Other types -- So far, no significant difference from type="text" (at least for PCs):

 <input type="tel">

 <input type="search">

In Chrome, type search gives a small x in box which allows content clear


New attributes of<input> tags in HTML5

• Besides min, max and step, there’re other new attributes:

autofocus: Input cursor is in this box by default.

formaction="URL": Only for submit button, allows sending data elsewhere

autocomplete: "on" or "off" (default), recall what user typed earlier

formnovalidate: For example: want to accept malformed URL?

required: Don’t allow empty box. Particularly important for types like "email" (as browser consider empty as valid without it!)

placeholder="?": Temporary message inside box. Disappear upon typing.

Name: <input type="text" placeholder="Kenneth">


References

• Castro, Elizabeth. HTML, XHTML, and CSS, 6th edition.

 http://www.cookwood.com/html6ed/examples/

• HTML5 Input types

 http://html5doctor.com/html5-forms-input-types/

• W3School: HTML5 Video Tag

 http://www.w3schools.com/html/html5_video.asp

• W3School: HTML5 Audio Tag

 http://www.w3schools.com/html/html5_video.asp

• W3School: HTML5 Geolocation

 http://www.w3schools.com/htmL/html5_geolocation.asp

• 28 HTML5 Features and Tips

 http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520