Does The Web Browser Retain Or Remove Manually And Programmatically Entered/Displayed Web Page Content Upon F5 (Refresh/Reload)?

Last reviewed/updated: 08 May 2018 | Published: 03 Feb 2015 | Status: Active

1. Introduction

A test to determine if the web browser retains or removes manually and programmatically entered/displayed web page content upon F5 (Refresh/Reload).

In this web page, web page content is classified as either form element content or non-form element content. Form element content refers to textboxes, textareas, checkboxes, radio buttons, and selectboxes. In addition, it refers to the state of the textbox (empty/not empty), textarea (empty/not empty), checkbox (checked/not checked), radio button (checked/not checked), and selectbox (selected/not selected). For example, the first form element below is textbox empty form element content. Non-form element content refers to text and images not classified as form element content. In addition, it refers to the state of the text and image (displayed/not displayed). For example, this sentence is text displayed non-form element content.

IE and FF retain manually and programmatically entered web page form element content upon F5 (Refresh/Reload). SF, CH, and OP remove manually and programmatically entered web page form element content upon F5 (Refresh/Reload). With respect to retaining/removing manually and programmatically entered web page form element content upon F5 (Refresh/Reload), in some cases ED behaves like IE and FF, and in other cases ED behaves like SF, CH, and OP. All of the aforementioned web browsers remove programmatically displayed web page non-form element content upon F5 (Refresh/Reload). Because IE and FF retain manually and programmatically entered form element content, but remove programmatically displayed non-form element content upon F5 (Refresh/Reload), the state of manually and programmatically entered form element content can fall out of sync with the state of programmatically displayed non-form element content.

For example, suppose a web page with a checkbox in which checking the checkbox triggers an event handler that programmatically displays some non-form element text. In IE and FF, after checking the checkbox, if the user then pressed F5 (Refresh/Reload), the checkbox would remain checked:, but the programmatically displayed non-form element text would be removed, which throws the state of the checkbox and the programmatically displayed non-form element text out of sync, as demonstrated:

  1. View this web page in IE or FF.
  5. Press F5 or click Refresh/Reload.

In IE and FF, upon F5 (Refresh/Reload), the checkboxes on line 2 and 3 above remain checked, but the programmatically displayed text on line 4 above is removed. Line 3 states to check its checkbox to display some text on line 4. In IE and FF, however, notice that the checkbox on line 3 is currently checked, but that line 4 is empty, which is contrary to what line 3 implies. Because IE and FF retain manually and programmatically entered form element content, but remove programmatically displayed non-form element content upon F5 (Refresh/Reload), the state of the checkbox and the programmatically displayed text are now out of sync. The checkbox on line 2 above is a dummy checkbox that does nothing and is not connected to the programmatically displayed text in line 4. It simply serves as a control to confirm that the state of the line 3 checkbox is independent of the line 3 checkbox triggering an event handler.

To complete the tests below:

  1. Section 2: Click the button to perform the programmatic actions.
  2. Sections 3 - 8: This is the manually and programmatically entered web page form element content tests. Manually enter text, check/uncheck, and select/unselect as indicated.
  3. Section 9: This is the programmatically displayed web page non-form element content tests. Nothing to do here. Skip to the next step.
  4. Section 10: Press F5 or click Refresh/Reload.
  5. Notice where the web browser retains or removes the manually and programmatically entered/displayed web page content.

1.1. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Click To Complete The Programmatic Items Below

3. Textbox Text

3.1. Manually Entered Textbox Text

3.1.1. Manually Entered Textbox Text Result

Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

3.2. Programmatically Entered Textbox Text

3.2.1. Programmatically Entered Textbox Text Result

Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

4. Textarea Text

4.1. Manually Entered Textarea Text

4.1.1. Manually Entered Textarea Text Result

Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

4.2. Programmatically Entered Textarea Text

4.2.1. Programmatically Entered Textarea Text Result

Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

5. Checkbox Unchecked To Checked

5.1. Manually Checked Checkbox

5.1.1. Manually Checked Checkbox Result

Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.

Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.

5.2. Programmatically Checked Checkbox

5.2.1. Programmatically Checked Checkbox Result

Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.

Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.

6. Checkbox Checked To Unchecked

6.1. Manually Unchecked Checkbox

6.1.1. Manually Unchecked Checkbox Result

Uncheck retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Uncheck removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

6.2. Programmatically Unchecked Checkbox

6.2.1. Programmatically Unchecked Checkbox Result

Uncheck retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Uncheck removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

7. Radio Button Group

7.1. Manually Checked Radio Button

Manually check radio button two:

7.1.1. Manually Checked Radio Button Result

Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.

Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.

7.2. Programmatically Checked Radio Button

Programmatically checked radio button two:

7.2.1. Programmatically Checked Radio Button Result

Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.

Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.

8. Selectbox

8.1. Manually Selected Selectbox

8.1.1. Manually Selected Selectbox Result

Selection retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Selection removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

8.2. Programmatically Selected Selectbox

8.2.1. Programmatically Selected Selectbox Result

Selection retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.

Selection removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.

9. Programmatically Displayed Web Page Text

9.1. Programmatically Displayed Web Page Text Via JavaScript innerHTML Property

Programmatically displayed web page text Via JavaScript innerHTML Property between the following square braces: [  ].

9.1.1. Programmatically Displayed Web Page Text Via JavaScript innerHTML Property Result

Web browser support for the JavaScript innerHTML property is IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.

Text retained upon F5 (Refresh/Reload): none.

Text removed upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.

9.2. Programmatically Displayed Web Page Text Via JavaScript classList Property

Programmatically displayed web page text Via JavaScript classList Property between the following square braces: [  ].

9.2.1. Programmatically Displayed Web Page Text Via JavaScript classList Property Result

Web browser support for the JavaScript classList property is IE10+, ED12+, FF3.6+, SF5.1+, CH8+, OP11.50+.

Text retained upon F5 (Refresh/Reload): none.

Text removed upon F5 (Refresh/Reload): IE10+, ED12+, FF3.6+, SF5.1+, CH8+, OP11.50+.

10. Press F5 Or Click Refresh/Reload

Press F5 or click Refresh/Reload.

11. Resources And Additional Information