The interface #

Introduction #

The coding of the interface is based on the HTML language, which is made up of tags. If tag is the name of the tag, the corresponding opening tag is <tag> and the closing tag, </tag>. Between the two, we place the tag content, which may itself be made up of tags.

Tags are always nested, i.e. they are closed in the reverse order in which they were opened. If the opening tags are in <a> <b> <c> order, the closing tags must be in order </c> </b> </a>. Any other order, such as </a> </c> </b> for example, is incorrect.

On this page, you can directly enter HTML code and see the result displayed in real time. Each time an opening tag is written, the corresponding closing tag is automatically added. In the same way, indentation is automatic. Indentation isn’t strictly necessary, but it makes the code much easier to read.

For historical reasons, some tags don’t need a closing tag, so they won’t be automatically added.

The box (fieldset) #

Let’s start by displaying a box using the fieldset tag:

Click on Show/Hide below to display the editor and the preview, and enter the <fieldset> characters in the black box. As indicated above, as soon as the > character has been entered, the editor will automatically add </fieldset>. In addition, the expected box will be drawn in the clear area below the editor.

When you enter a line break, the cursor will go to the line, but will also be set back. This is automatic indentation.

The dimensions of the box displayed in the clear area will be adjusted to its content, as shown below.

Click Show/Hide again to save space by hiding the editor and the preview.

The input field (input) #

Now let’s place an input field for the user, using the input tag (the input tag is one of those tags that doesn’t require a closing tag):

Enter the white code in the editor, as the greyed-out code is already present.

A smaller box appears within the existing frame. By clicking on it, we’ll see that we can enter text in it; it’s therefore an input field available to the user, and we’ll see later how to retrieve its contents.

Input field type (type=“ ...”) #

There are several types of input fields, which can be specified using the type attribute. Here’s how to specify a text field:

By default, i.e. if we don’t supply the type attribute, input fields are of text type.

As an example, here’s what a date input field looks like:

Depending on the type of field, there may be input helpers that appear when you click on certain parts of the field.

Here are some of the other possible values for the type attribute: checkbox, color, file, radio, range…. You can replace the date value of the type attribute in the editor above with one of these values to see the effects.

Hint text (placeholder=“ ...”) #

Text input fields allow you to specify a text to be displayed when the field is empty, in order to provide an hint as to its contents. This is done using the placeholder attribute. For example, here’s the code indicating that the text input field above is intended to collect the user’s name:

Let’s see the result:

You’ll notice that, as soon as you start entering text in the input area, the hint text disappears.

Default value (value=“...”) #

Thanks to the value attribute, it’s possible to pre-fill a text input field, which can facilitate application debugging.

And the result:

An HTML element can have several attributes. Their order is unimportant (<input placeholder=“Name” value=“World”> is equivalent to <input value=“World” placeholder=“Name”>), but each of its attributes must be unique, whatever its value.

The button (button) #

Let’s add a button with the button tag:

The button label (here Send) must be placed between the opening and closing tags.

The separator (hr) #

Now let’s add a separator between the input part of the interface and the display part. This is achieved using the hr tag:

The hr tag is also a tag that does not require a closing tag.

The display area (fieldset & output) #

We’ll finish with a display area delimited by a box, using the output tag embedded in a fieldset tag:

As the output tag is nested within the fieldset tag, its indentation is doubled.

Bonus (CSS) #

HTML is dedicated to describing the structure of an interface by indicating the elements that make it up and their organization. To control the appearance of this interface (colors, shape of elements, fonts, animations…) we use another language: CSS.

CSS is not covered in this tutorial, but can easily be used in Zelbinium applications, as can be seen from the examples in the Inspiration section. However, here’s an overview of what you can do with CSS (CSS-specific code is enclosed between style tags)

Next #

We’ll now move on to the Processing page, where we’ll code the interactions between the user and the interface developed on this page.