#### HTML Elements: The Tricky Parts

##### June 19, 2018
HTML <iframe> <a> <form> <input> <table>

## HTML src attribute

The src attribute can be applied to many elements like <iframe>, <img>, <input>, etc. It can be used to specify the content of the frame with either absolute or relative URL. A URL that starts with the URL scheme and scheme specific part ( http:// , https:// , ftp:// , etc.) is an absolute URL, and the location of the resource can be resolved looking only at the url itself. A relative URL is in a sense incomplete: to resolve it, you need the scheme and hostname, and these are typically taken from the current context.

In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. Always use relative URLs (for local resources)!! Further reading here.

• src = "" and src = "#":

Let’s say the base url is : http://mysite.com/myapp/

src = "" -> Absolute url: http://mysite.com/myapp/ (This is using empty src where browsers still send calls to server and thus causing a page refresh)

src = "#" -> Absolute url: http://mysite.com/myapp/# (It could be used which forms a hash url and hash urls are not sent to server, note that it could cause the page to scroll to the top)

Most people use src = "#"" as a placeholder for links when they don’t want any resource to be loaded (probably load it dynamically later), and it avoids the unnecessary call to server.

• For example, this line of code won’t display this YouTube video since it is a relative URL:

<iframe src = "youtube.com/embed/u0DLCyWrxDo"></iframe>


There are two ways to work this out:

1. src = "http://youtube.com/embed/u0DLCyWrxDo" writes an absolute URL and specifies an http:// scheme.
2. src = "//youtube.com/embed/u0DLCyWrxDo" writes a relative URL without a scheme, also called protocol-relative URL. In this way it requests within the same protocol as your current page.

## <iframe>

• The name attribute:

This name attribute can be used to reference the element in a JavaScript, or as the value of the target attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button> element.

Example demo with <a> (the target value of <a> has to match the name value of <iframe>):

• Better to set the attribute frameborder equal to “0” in order to hide the default black frame border.

## <a>

• The href attribute:

• When it contains a URL:

URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, file:, ftp:, and mailto: work in most browsers. When href contains a URL, it applies to similar rules with the src attribute.

A typical relative url like href="?name=jade sends a GET request to the server.

• When it contains a URL frament:

A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an id of an HTML element) within the current document. Once again, it won’t send a GET request to the server.

• When it links to JavaScript code:

This line of code will trigger an alert when you click the anchor.

<a href="javascript: alert('you clicked an anchor')">Execute JS</a>


We usually use href="javascript:;" as a way of making a link which the link itself does not do anything. Some developers use href='#' for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And we couldn’t simply leave the href blank, because href=” is a link back to the current page (ie. it causes a page refresh).

• The download attribute:

This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).

Content-Type: application/octet-stream


The browser will download the file automatically without adding a download attribute to <a>. Otherwise, this attribute is demanded.

<a href="abc.txt" download="new.txt">download text file</a>

• The target attribute:

Specifies where to display the linked URL. It is a name of, or keyword for a browsing context: a tab, window, or <iframe> (associated with its name attribute). The following keywords have special meanings:

• _self: Load the URL into the same browsing context as the current one. This is the default behavior.
• _blank: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.
• _parent: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.
• _top: Load the URL into the top-level browsing context (that is, the “highest” browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.

## <form>

• The action attribute:

Defines where the data gets sent. Its value must be a valid URL. If this attribute isn’t provided, the data will be sent to the URL of the page containing the form.

• The method attribute:

Defines which HTTP method to send the data with (it can be “GET” or “POST”). Both <a> and <form> have the same function as navigating to a specific page, however <a> can only send GET request.

The GET method is used to ask the server for sending back a given resource: the GET request sends an empty body (POST can send with both the query strings and the entity body). Since the body is empty, if a form is sent using this method the data sent to the server is appended to the URL. You’ll see the URL like www.foo.com/?say=Hi&to=Mom appear in the browser address bar when you submit a form. The data is appended to the URL after a question mark (?) as a series of name/value pairs and each pair is separated by an ampersand (&).

• The enctype attribute:

When the value of the method attribute is post, enctype specifies the value of the Content-Type HTTP header included in the request generated when the form is submitted. This header is very important because it tells the server what kind of data is being sent.

• application/x-www-form-urlencoded: The default value if the attribute is not specified. In human terms, this means: “This is the form data that has been encoded into URL parameters.” The syntax looks like key1=val1&key2=val2&.... Consider the code below,

<form action="newform" method="post">
<input type="submit" value="Submit">
</form>


After submitting this form, the formdata would be something like: username=xxx&password=yyy

• multipart/form-data: The value used for an <input> element with the type attribute set to “file”.

• Submit buttons:

Every form must have a submit button in order to be submitted (there’s also implicit submission, see more in <input> section). Submit Button (<button> or <input> element) –> state (type=submit).

• The target attribute:

Similar rules with <a>’s target attribute.

<form target="_blank|_self|_parent|_top|framename">


framename: The response is displayed in a named iframe.

## <input>

• Differences between type = "button" and type = "submit":

• If there’s only one <button> in a form, it would automaticlly turn into a submit button which means <button type="submit">; If you specify <button type="button"> explicitly then it would just be a simple push button (Note: IE7 has a bug where the type attribute of a <button> defaults to button instead of submit. Therefore for IE7 compatibility you’ll need <button type="submit">.)

• Similarly, <input type="button"> is also a simple push button，only <input type="submit"> is a submit button.

• Implicit submission of <form> when pressing Enter Key:

Implicit submission is vital to assistive technologies and impaired users that cannot use a mouse at all. From the HTML5 specification:

“There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents [browsers] are strongly encouraged to support this.”

There are two situations submitting a form in this way.

1. In a form with no submit buttons, implicit submission will be done if only one input is present. Therefore, pressing Enter in this textbox will submit the form:

<form action = "/abc">
<label for = "name">Name:</label>
<input id = "name" name="username" type="text">
</form>

2. If the form has multiple input elements, the form can not be submitted automatically. Therefore, if you have a form with more than one input field, always include a submit button, then pressing Enter can still submit the form successfully.

• Attribute type = "checkbox":

For code <input type="checkbox">choose me, when clicking the text ‘choose me’, the checkbox will not be automatically checked. To prevent this problem, we should use <label> and <input> at the same time:

<label for = > should match <input id = > in order to associate the label with the input. For a more convenient way, there’s no need to assign an id and for value, just put <input> as a child element of the corresponding <label>.

• The value attribute of checkbox inputs:

Represents the value of the checkbox. This is never seen on the client-side, but on the server this is the value given to the data submitted with the checkbox’s name.

Take the example above, for label ‘Bananas’, the input we’ve got has a name of fruit, and a value of banana. When the form is submitted, the data name/value pair will be fruit=banana.

If the value attribute was omitted (like label ‘Clickable label’), the default value for the checkbox is on , so the submitted data in that case would be clickable-label=on; if the checkbox is unchecked, the submitted data for that will remain empty.

• Handling multiple checkboxes：

In real-world situations you’ll be likely to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separately, as shown above. However, if they’re all related, things are not quite so simple.

Also referring to last ‘fruit’ example, we’ve given each checkbox the same name. If all three checkboxes are checked and then the form is submitted, you’ll get a string of name/value pairs submitted like this: fruit=banana&fruit=orange&fruit=apple. When this data reaches the server-side, you should be able to capture it as an array of related values and deal with it appropriately.

• Attribute type = "radio":

<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options. Only one radio button in a given group can be selected at the same time.

## <select>

Represents a control that provides a menu of options (another way of making choices).

See the following example code and pay attention to the attributes of <option>: selected, disabled. We can also make multiple choices by adding the boolean multiple attribute to <select>, and hold the Ctrl, Command, or Shift keys while clicking to select or deselect multiple options.

## <table>

It is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows.

• Head <thead>:

We usually use the first row as the header of a table, which contains no data, just the titles of columns. We can do that with the <thead> element, wrapped up a table row like <tr><th>name</th><th>age</th></tr>, where ‘th’ stands fot tabular headers. When you use <thead>, there must be no <tr> that is a direct child of <table>.

Empty table head: <th></th>.

• Body <tbody>:

For all the actual table data cells, wrap all rows of data in <tbody> like <tr><td>12</td>13<td></td></tr> where <td> elements are tabular data. <th> elements are not necessarily limited to being within the <thead>. They simply indicate header information. Certain columns (e.g. the first column) might also represent titles.

Empty table data: <td></td>.

• Foot <tfoot>:

Indicates the footer of the table. Like <thead>, best for semantically indicating these are not data rows but ancillary information.

• <colgroup>:

Defines a group of columns within a table. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. The nth <col> specifies the styles for the nth column in a table. Even if we do not want to style the first column, we still have to include a blank <col> element — if we didn’t, the styling would just be applied to the first column also.

• No matter where you place <thead>, <tbody> and <tfoot> inside a table using HTML, the browser would still render the table as the ‘heade-body-foot’ order. If you leave out <tbody> element and only write <tr> and <td>, the browser will auto complete the <tbody> when rendering it; if there’s no <thead> and <tfoot>, everything will be rendered according to the order written in HTML.