Hyper-text Markup Language: Tutorial - Page 5

INPUT Tag

The <input> tag is not new but it does have some new attributes. The type="email" attribute is for email input fields; the multiple attribute can be specified to allow multiple e-mail addresses. The type="url" attribute will make an input field that allows the user to enter a value with url syntax. Telephone numbers are entered using the type="tel" attribute. The type="number" attribute allows a range of numbers to be entered; enter a min, max and step attribute. For example, <input type=number min=0 max=255 step="0.5" /> . Sliders are created using the type="range" attribute. Example: <input type=range min=0 max=255 value=127 />. The autofocus attribute makes the document set focus to the input control. The required attribute makes the form field required. This is a form of validation and if wanting to disable it then add the novalidate attribute to the <form> tag and all client-side validation will be turned-off. Do not forget to validate all data on the server-side, too. Another new attribute is placeholder, which has example input text to give the user a clue about the data to be input. Example telephone <input type="text" placeholder="(XXX) XXX-XXXX" /> or <input type="tel" placeholder="(XXX) XXX-XXXX" />:

Telephone: Number: Slider:

DATALIST Tag

The <datalist> tag gives input suggestions. Like the <select> tag it uses the <option> child tag. For example:

<input id=favoriteCamera list=cameraChoices />
<datalist id=cameraChoices>
	<option label="Canon Cameras" value=canon>
	<option label="Nikon Cameras" value=nikon>
	<option label="Fujifilm Cameras" value=fuji>
	<option label="Leica Cameras" value=leica>
</datalist>

Favorite Camera:

METER Tag

The <meter> tag shows a value within a known range. Example: Your weight is: <meter min=30 max=300 value=155>155 lbs</meter>

Your weight is: 155 lbs

PROGRESS Tag

The <progress> tag shows how far a task has progressed. Example: <progress value="0.333333">You are 33% done with the wizard.</progress>

You are 33% done with the wizard.

OUTPUT Tag

The <output> tag is an inline tag like <span> but it is more descriptive, designed to output results. Instead of <span id=result></span> one could code it like this <output id=result></output> and it would simply be more descriptive.

AUDIO Tag

The <audio> tag is self explanatory. Its syntax is: <audio src="/Audio/AnotherBrickInTheWall.mp3" controls preload=auto>your browser does not support audio</audio>

VIDEO Tag

The <video> tag is self explanatory. Its syntax is: <video src="/Video/Lemon.mp4" controls preload=auto>your browser does not support video</video>

The tag attributes autoplay muted loop and controls are useful. For autoplay to work, use the muted attribute.

The <source> tag allows for specifying more than one video format. Example:

<video controls width=852 height=480>
	<source src="lemon.mp4" type="video/mp4" />
	<source src="lemon.webm" type="video/webm" />
	<p>your browser does not support video</p>
</video>

The <track> tag specifies the captions for the video. It has several attributes. Example:

<video controls width=852 height=480>
	<source src="lemon.mp4" type="video/mp4" />
	<source src="lemon.webm" type="video/webm" />
	<track src="lemon_en.vtt" srclang=en kind=subtitles label=English default />
	<track src="lemon_fr.vtt" srclang=fr kind=subtitles label=French />
	<p>your browser does not support video</p>
</video>

An example WebVTT caption file looks like this:

WEBVTT
00:00:01.000 --> 00:00:03.000
This caption appears at the one second mark and continues to appear for two seconds.
00:00:07.000 --> 00:00:10.000
This caption appears at the <b>seven</b> second mark and continues for <i>three</i> seconds.

---