Will Bontrager Blogs Website Techniques

Methods GET and POST both refer to how the browser sends information to the destination web page (or software).

The URL in the browser's address bar is the destination. (There may be redirects or other operations that occur and change the destination, but those are out of the scope of this article.)

Links that are clicked to go to a web page are method GET. When information is sent to the web page being linked to, it can be sent as part of the URL. The information is appended to the URL with a "?" character.

Here is a URL with information appended to the URL.

http://example.com/page.php?name=will&state=awake

In the above illustration, "name=will&state=awake" is the information appended to the URL. That is method GET.

When the browser reaches the server with method GET, the information is recorded in the server logs.

Forms usually employ method POST to send the form information with the browser as it travels to the receiving web page or software.

Here is an example form that can be copied to submit method POST. If this were a working form then when the button was tapped the form information would travel to http://example.com/page.php as method POST. (The example form is followed by the source code for the form.)

<form metod="post" action="http://example.com/page.php">
Name: <input style="width:200px;">
<br><input type="button" style="width:calc(200px + 4.7em);" value="Submit" onclick="alert('Example form, not for use.'); return false;">
</form>

Method POST information cannot be seen by the person using the browser. It travels with the browser behind the scenes, so to speak.

No illustration can be provided for you because the POST information is not visible.

When the browser reaches the server with method POST, the information is not recorded in the server logs.

Another difference between the two is that the amount of information generally is limited to a kilobyte with method GET and several or many megabytes with method POST. The limit for both methods is determined by the server at the browser's destination.

The optgroup tag is available to use when a dropdown list has more than one category of items. The category name is printed above the items of that category.

This example illustrates a use of the optgroup tag for a dropdown of types of birds.

The optgroup tag is used to visually separate the items of each category. Note that the categories themselves are not selectable, only the actual options.

Here is the source code for the above example.

<select name="birds" id="birds">

<option>Select a Bird</option>

<optgroup label="North American Birds">
   <option value="greathornedowl">Great Horned Owl</option>
   <option value="cardinal">Cardinal</option>
   <option value="killdeer">Killdeer</option>
   <option value="sandpiper">Sandpiper</option>
</optgroup>

<optgroup label="Tropical Birds">
   <option value="macaw">Macaw</option>
   <option value="toucan">Toucan</option>
   <option value="parrot">Parrot</option>
   <option value="cockatoo">Cockatoo</option>
</optgroup>

</select>

For ease of identification, the opening and closing optgroup tags are colored blue in the above code. The label attribute, which prints the category name above the category list, is colored red.

The optgroup tag needs the label attribute so the browser knows what to print for the category name. Without a label attribute, the browser might print a blank line or it might do something different; I was unable to find an authoritive statement about that. (All of my browsers print a blank line.)

When you have two or more categories of options for a dropdown list, and you wish to separate them out for the user, the optgroup tag can be used.

(This content first appeared in Possibilities newsletter.)

The dl HTML tag seems to hardly be used anymore. But it's still good. It still works as well as it always has.

It can be used when you have terms and definitions to publish.

The letters "DL" stand for "Description List". Between the opening and closing dl tags are dt ("term") and dd ("description") tags.

Browsers have default formats for the dl HTML tag, which CSS can modify. Screen readers know what to expect when they encounter dl HTML tags.

Here is an example, rendered with your email reader's default format. (I added the background color separately.)

The dl HTML tag contains one or more dt and dd tag sets.

<dl>
<dt>title</dt>
<dd>description</dd>
<dt>another title</dt>
<dd>another description</dd>
</dl>

The above code is a guide for constructing a definition list. Below is the code for the example provided near the beginning of this article.

<dl>
<dt>Will Bontrager</dt>
<dd>A software developer who also writes non-fiction articles and fiction books. His books and writer tools are at <a href="https://willbontrager.com/">his author website.</a></dd>
<dt>Vern Harrison</dt>
<dd>Vern Harrison is a pen name of author Will Bontrager. <a href="https://vernharrison.com/">Vern Harrison books</a> are all dark Old West novels.</dd>
</dl>

Code as many dt and dd tag sets as you need for your list of terms and definitions.

If you put the dt { font-weight:bold; } CSS definition into your style sheet, the terms will become bold. That and other CSS can be applied to any of the dl, dt, and dd tags.

The description list tags are designed to be used when terms and definitions are to be published.

(This content first appeared in Possibilities newsletter.)

This article is a quick review of common and handy ways to use the 'A' tag. Some may be new to you.

To describe everything related to an 'A' tag would require a huge article. One has already been written, the anchor element article by the Mozilla people.

(If you landed here when you really were looking for how to link without using the 'A' tag, the information you want may be at the Linking Without an 'A' Tag article.)

While it can link to various types of destinations, the 'A' tag is mostly used for linking to other web pages or to other locations on the same web page.

For linking to other web pages, you need to know their URL. For other locations on the same web page, you'll need to know the id value of the HTML element being linked to.

The href is a required attribute. It tells the 'A' tag where to link to.

Here is how to link an 'A' tag to a URL.

<a href="http://example.com/the-URL-of-a-web-page.html">Another web page</a>

The text (or image) between the <a...> tag and the ending </a> tag is called anchor text (or anchor image). In the above illustration, the anchor text is Another web page.

To link to a location on the same page, the href value begins with # and ends with the id value of the HTML element being linked to.

Here is an illustration. First, an element with an id value and then the 'A' tag link.

<div id="location-to-link-to">[stuff here]</a>

<a href="#location-to-link-to">Scroll to 'stuff'</a>

Assuming the above code is on the same page, when the Scroll to 'stuff' link is tapped then the browser scrolls until the top of the div with id="location-to-link-to" is at the top of the browser's screen. If the browser cannot scroll to that location, it will scroll as close as it can.

Below is code for linking places or things that are not web pages. You can probably guess what the code does. Nevertheless, I'll mention them below the code box.

<a href="tel:212-555-1987">Call me!</a>
<a href="mailto:name@example.com">Email me!</a>
<a href="sms:222-555-7819">Text me!</a>
<a href="javascript:alert('hello')">Run this JavaScript</a>

Yes, you are right:

• The first one dials your phone when the browser is set up to do so. Otherwise, it asks for information related to your phone.

• The second one launches your email software, when it can, with the address pre-filled in. If it cannot launch your email software, it will ask for information.

• The third one either sends a text message or asks for information related to sending a text.

• The fourth one runs the JavaScript code that follows javascript:

All fun stuff.

The HTML 'A' tag is, in essence, a linking element. The above describes some of the most common ways it is used.

(This content first appeared in Possibilities newsletter.)