GUI and buttons

We call widget a graphical element which can interact with the user. Buttons, checkbox, text entry, etc. are common widgets.

HTML describes a set of basic widgets using the <input> tag that can be used "as it is" with default behavior set for contact forms. However, the behavior of these widget may be finely adapted to your needs using JavaScript.

Consider the following code

HTML 
<input id="button" type="button" value="click me"> <br>
Type some text: <input id="textEntry" type="text">
JavaScript 
"use strict";

// Button
const button = document.querySelector("#button");
button.addEventListener('click',buttonClicked);

function buttonClicked(event) {
  console.log('clicked');
}

// Text entry
const textEntry = document.querySelector("#textEntry");
textEntry.addEventListener('change',textModified);

function textModified(event) {
  console.log('text modified into ',textEntry.value);
}

Color box

The widget <input type="color"> allows to select a color interactively.
Use the following code to adapt the color of an element in the webpage.
HTML 
  <span id="textInColor">You can choose the color of this text.</span>
  <input id="colorInput" type="color">
JavaScript 
  const textElement = document.querySelector('#textInColor');
  const colorElement = document.querySelector('#colorInput');
  colorElement.addEventListener('input', changeColorAction);

  function changeColorAction(event) {
    textElement.style.color = colorElement.value;
  }

Exercise: Color Gradient

Create the code allowing to parameterize the extreme color of a rectangular box, as well as its length, as seen in the following example

pics/exercise.apng

Hints:

Reminder on CSS and style:
When setting the visual appearance of an element, you can use either:
ex. HTML: 
<div class="myClass"> Some content </div>
CSS: 
.myClass {
  color: red;
}
ex. HTML: 
<head>
  <!-- ... all metadata -->
  <style>
    .myClass {
      color: red;
    }
  </style>
</head>
<body>
  <div class="myClass"> Some content </div>
</body>
ex. HTML: 
<div style="color:red;"> Some content </div>
When using the JavaScript syntax: "[element].style = ...", the effect is similar to writing the CSS style directly inline on the element.

textContent vs innerHTML

Text content

Consider the following code

HTML 
Type some text: <input id="textEntry" type="text">
<p>You typed the following text: <span id="textRender"></span> </p>
JavaScript 
const textEntry = document.querySelector("#textEntry");
textEntry.addEventListener('change',textModified);

function textModified(event) {
  const textRender = document.querySelector("#textRender");
  textRender.textContent = textEntry.value;
}

This code basically copies the content of the input into the textContent entry of the HTML.

Note that writing HTML tag (ex. <p>Hello</p>) in the textEntry input is only copied and pasted as string, and not interpreted as HTML.

innerHTML

Now consider this new JavaScript line 
textRender.innerHTML = textEntry.value;
instead of 
TextRender.textContent = textEntry.value;

innerHTML creates a new HTML content from the string parameter. It means that, at the opposite of textContent that was only describing a pure text input, innerHTML is able to interpret HTML tags.

Type <p>Hello</p> in the textEntry, and observe that, this time, the <p> tag is interpreted and Hello appears on a new line.
This may lead to more possibilities of user inputs (ex. insert <p style="font-size:300%;color:red">Text</p>).

The command innerHTML is therefore more powerfull than textContent as HTML tags can be directly be typed and interpreted. It can thus help a programmer to generate HTML elements in an efficient way.
It is however considered a bad practice to let the content of a form be interpreted using innerHTML. Indeed, in this case, the user of the webpage can execute some code that may not be expected initially by the website.

For instance: Type the following in the text Entry <img src=x onerror=alert("Hello")>.
This open a popup through the execution of the JavaScript alert function, which is probably not the expected behavior of the program.

Note that this JavaScript only runs on the client side, thus such unexpected code execution is not a real _security risk_ as it cannot impact other distant users or database. However, the principle of code injection to a servers that would run text inputs could be similar, and could leads to more dramatic security issues.

Good practice

As a general good practice rule:
As a global security good practice: