HTML Elements

Page 8

Elements, Tags, Forms

Introduction Range Meter Forms body rule-set not basefont audio not bgsound Anchors Ping Summary

Introduction

This page covers some miscellaneous techniques, including the difference between an HTML tag and an element. Learn to apply meter, range and numeric input intervals (step). Also test form methods to determine which is more secure; put or post.

Learn to replace deprecated basefont and bgsound elements with HTML5 acceptible alternatives. I included a couple of very old tags because I recently completed an online HTML test and failed questions requiring these two deprecated tags, basefont and bgsound. A few older pages on the Web still try to use deprecated HTML tags.

Tag vs Element

Generally the term tag refers to an html markup type, for example <h2>, <section>. The term element refers to a closed tag as it's applied within a Web page, for example <h2>Element</h2>.

Range

Range sliders allow users to select values within a minimum and maximum range. Tap and drag the the white outlined circle. If you assign a step value, then the slider stops at specific intervals along the range.

Range Step 1

Markup

Markup for a range slider, from one to ten, with a step every unit, follows. As you scrub the slider it stops at every full unit, between one and ten. This slider's default value equals five. Be sure to include a label for accessibility. SVG displays ten rectangles as tick marks, below the range slider.

<label 
 class="blk" 
 for="ri"
>

 Slider Range: {0..10}, Step: 1
 
</label>

<input 
 class="blk" 
 id="ri" 
 type="range" 
 min="0" max="10" 
 value="5" 
 step="1"
>

<svg 
 role="presentation" 
 width="100%" 
 height="10" 
 xmlns="http://www.w3.org/2000/svg"
>

<rect  
 x="10%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="20%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="30%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="40%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="50%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="60%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="70%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="80%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="90%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>

<rect  
 x="99%" 
 y="3" 
 width="1" 
 height="10"
>
</rect>
      
</svg>

Range Step 1/2

This range slider allows the user to select values between one and ten with intervals of one half. For example the user can select 1.5, 2 or 2.5.

Markup

Markup for a range slider, from one to ten, with a step every one half unit, follows. As you scrub the slider it stops at every half unit, between one and ten. The default value equals two. Be sure to include a label for accessibility.

See the above listing for SVG tick marks. Separate each SVG rectangle by five percent instead of ten percent, for this example.

<label 
 class="blk" 
 for="rhalf">

 Slider Range: {0..10}, Step: 0.5

</label>

<input 
 class="blk" 
 id="rhalf" 
 type="range" 
 min="0" 
 max="10" 
 value="2" 
 step="0.5"
>

Style

This page applies the .blk CSS rule-set for most elements, as follows. The rule-set allows ranges and scales to scale up or down depending on the viewing device and rotation.

.blk{
 display:block;
 width:100%;
}

Meter

An HTML meter's like a range except it doesn't include a thumb track. By default, the user doesn't modify the preset value.

The meter tag, considered a type of gauge, displays data within integer, minimum and maximum ranges. You can apply integer or floating point values to the ranges. The value attribute assigns the default meter numeric setting.

Minimum, Maximum with Integer Value

Enter a minimum, maximum and default value, with HTML. For example, the following meter ranges between zero and ten. The value equals two.

Minimum: 0, Maximum 10, Default 2 2 out of 10

The markup follows. Be sure to include a label for accessibility.

<label
 class="blk" 
 for="v1"
>

 Minimum: 0, Maximum 10, Default 2

</label> 
<meter 
 class="blk"  
 id="v1" 
 min="0" 
 max="10" 
 value="2"
>

2 out of 10

</meter>

Floating Point

With HTML enter a floating point value in the range {0.0...1.0}. The following default value equals 0.6, which displays a gauge at sixty percent filled. The default minimum and maximum values are zero and one. You can omit min and max values if the range is 0.0 to 1.0.

60% 60%

<meter 
 class="blk"  
 id="v2" 
 value="0.6"
>

60%

</meter>

Minimum, Maximum with Floating Point Value

With HTML enter a minimum, maximum and value for the meter. The meter's value is a floating point type. The following guage displays 0.6 out of range between {0...10}. Notice that 0.6 fills a little more than one half of the first one tenth of the meter, or 0.6%.

Minimum: 0, Maximum 10, Default 0.6% 0.60%

<meter 
 class="blk"  
 id="v3" 
 min="0" 
 max="10" 
 value="0.6"
>

Minimum: 0, Maximum 10, Default 0.6%

</meter>

body rule-set not basefont

The basefont tag's deprecated and not supported in HTML5. The basefont tag declared a Web page's default font family, font size and color. Style the Web page with an internal body rule-set, instead.

HTML4 Deprecated

Don't use basefont. In HTML4 basefont was specified within the head element. For example:

<head>
...
 <basefont 
  color="green" 
  size="12" 
  face="courier"
 >
...
</head>

HTML5

In HTML5 specify the default font color, size and family, for a Web page, with an internal CSS rule-set. For example:

<head>

<style>
 body{
  color:green;
  font-size:12px;
  font-family: courier; 
 }
</style>

</head>

audio not bgsound

Here's another deprecated tag; bgsound used to work in Internet Explorer. Use the audio and contained source elements instead.

HTML4 Deprecated

Don't use bgsound. Before HTML5 bgsound was specified within the body element, as follows.

<bgsound src = "bubbly.wav"/>

Audio Markup

<audio 
 class="blk" 
 controls
>

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

</audio>

Try Audio

Tap the play icon. Scrub the time slider or move the volume slider. Tap to mute and unmute with the speaker icon.

Forms

Enter a user name, color and password. Then tap the button at the bottom of each form. One form uses POST to pass data to the server. The other form uses PUT to pass the same set of data, to the server. You can see that POST is more secure than PUT.

Learn how to implement POST and PUT methods. See the upper right hamburger menu. Select PHP & MySQL, from the drop down list.

POST

Pass POST method data through the request body. The data takes technical skills to uncover. POST is more secure than PUT.

You might have to tap twice within the Color Datalist input element, to see the drop down list. Additionally, if the input element for the datalist contains a value, then the datalist might not display. I saw these little issues in my Web browser.

DataList Inside a Form Markup

<input 
list="colors" 
name="data" 
id="data" 
/>

<datalist 
id="colors"
>

<option 
value="Red"
>
<option 
value="Blue"
>
<option 
value="Yellow"
>
<option 
value="Violet"
>
<option 
value="Blue-Green"
>

</datalist>

PUT

Pass PUT method data through the query string. The data's visible. Observers can read and modify the query string.

FieldSet in Form

Fieldset Inside a Form Markup

By default my Web browser outlines fieldsets around the legend element.

The legend element may only be used inside a fieldset element.

<form>

<fieldset>
<legend>
Contact:
</legend>

<label 
for="first">
First name:
</label>
<input 
type="text" 
id="first" 
name="first"
>

<label 
for="last">
Last name:
</label>
<input 
type="text" 
id="last" 
name="last"
>

<label 
for="email">
Email:
</label>

<input 
type="email" 
id="email" 
name="email"
>

</fieldset>

<fieldset>
<legend>Hobbies</legend>
<label 
for="h1">
Hobby One
</label>
<input 
type="text" 
id="h1" 
name="h1"
>

<label 
for="h2">
Hobby Two
</label>
<input 
type="text" 
id="h2" 
name="h2">

<label 
for="h3">
Hobby Three
</label>
<input 
type="text" 
id="h3" 
name="h3"
>

</fieldset>
</form>

Anchors

At first glance I thought the anchor tag with href attribute would only contain a few formats. However let's review which formats are available.

HREF Formats

Simple Link

Mail To Link

Email Seven Thunder Software.

Telephone

Call Seven Thunder Software.

JavaScript

<a href="javascript:alert('href JavaScript');" title="href JavaScript">href JavaScript</a>

Target Anchor Attributes

Target declares the content in which to open a resource. Assign the target one of the values described in the following target definition list.

_top Versus _parent

You need nested iframes to see the difference between target _parent and target _top.

Target _top replaces the current window, breaking out of all iframes. Target _top loads the Web page that's linked with the href attribute. In otherwords _top, within an iframe releases you from all iframes and returns you to the entire page that the link points to.

Target _parent replaces the current iframe with the current iframe's parent. If the iframe is contained within another iframe, then target _parent loads the containing iframe.

_self

Target _self.

Replaces the current window or page in an iframe.

See iFrame Anchor Targets.

_parent

Target _parent.

Replaces the current window, with the parent of iframe. If the window is an iframe within an iframe, and you click a link within the nested iframe, then the outer iframe will be replaced with the linked document. You need nested iframes to see this, otherwise your current window's replaced.

See iFrame Anchor Targets.

_blank

Target _blank.

Opens a new window or tab within a separate window, regardless of iframe.

_top

Target _top.

Replaces the current window, regardless of iframe.

iFrame Anchor Targets

Insert an iframe with target="_parent" and target="_self". Notice this particular iframe contains another iframe, for testing anchors with targets _top and parent.

HREF More Attributes

download

Download the File: <a href="myimage.jpg" download>

Try the download link: Download HSL Image.

hreflang

Language of Document Link: <a href="https://7Thunders.biz" hreflang="en">Seven Thunders</a>

media

The media attribute in an anchor describes which type of media or device the link is intended for. For example media="print and (resolution:200dpi)" indicates the linked document should be printed at a resolution of 200dpi.

ping

Tracks when the user clicks a link.<a ...ping="URL" >

Try the ping link: Ping Test

The link PINGS the subdomain code.7Thunders.biz with PHP:

$str = exec("ping -c 1 code.7thunders.biz");

Variable $str indicates the amount of time it took to ping the server. Based on some current reading, ping has malicious uses with denial of services attacks (DoS).

referrerpolicy

Information to Send when User Clicks Link: no-referer,origin,unsafe-url...

rel

Relationship between current document and linked document.

Values: alternate, author, bookmark, license, search...

target

See targets, above: _blank,_parent,_self,_top.

type

media_type: text/html, application/dns+json, application/gzip...

Summary

This page covered some miscellaneous techniques, including the difference between an HTML tag and an element. You learned to apply meter, range and numeric input intervals (step). You also tested form methods to determine which is more secure; put or post.

You learned to replace deprecated basefont and bgsound elements with HTML5 acceptible alternatives. I included a couple of very old tags because I recently completed an online HTML test and failed questions requiring these two deprecated tags, basefont and bgsound. A few older pages on the Web still try to use deprecated HTML tags.

See the hamburger icon, in the upper right corner of this page to learn how to POST and PUT data with PHP and MySQL.