CTEC2712: Web application development

Getting user input

Communicating with a server

Dr Graeme Stuart

Issuing HTTP requests

Recall that all communication between the client and the server happens via HTTP. The server includes the requested document in the response.

In a normal scenario, we load a page using a GET request, e.g. with a link.

1
<a href="#">link</a>

It is also possible to load a page by submitting a form.

1
2
3
<form>
    <button>submit</button>
</form>

We can also use the fetch API in JavaScript to make HTTP requests but this is out of scope for this module.

The input element

<input> elements are inline and void (i.e. they have no content and don’t need closing tags). The <input> element is extremely versatile, attributes are used to change its behaviour.

The default <input> is a text input like this:

1
<input>

Adding placeholder text is easy:

1
<input placeholder="enter your name">

Default values can also be provided:

1
<input value="My name">

We will only cover some of the basics.

The label element

For accessibility, <input> elements should have an associated <label> element.

1
2
3
4
<form>
    <label for="username">User name:</label>
    <input id="username">
</form>

1
2
3
4
<form>
    <input aria-label="search">
    <button type="submit">Search</button>
</form>

In some use cases, you may not want/need a visible <label>. In this case, you can use an aria-label attribute.

Input types

By default <input> elements are generic text fields but they can be modified with the type attribute.

1
2
3
4
<form>
    <label for="number">number: </label>
    <input id="number" type="number" value="90">
</form>

1
2
3
4
<form>
    <label for="range">range: </label>
    <input id="range" type="range" value="75">
</form>

1
2
3
4
<form>
    <label for="color">color: </label>
    <input id="color" type="color" value="#bb0060">
</form>

There are many input field types available. Some of these were introduced with HTML5.

More input types

Getting dates and times.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<form>
    <label for="date">date: </label>
    <input id="date" type="date">
    <label for="time">time: </label>
    <input id="time" type="time">
    <label for="datetime-local">datetime-local: </label>
    <input id="datetime-local" type="datetime-local">
    <label for="month">month: </label>
    <input id="month" type="month">
</form>

Make sure you use these where possible.

Fieldsets and required fields

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<form action="login.html" method="post">
  <fieldset>
    <legend>Sign in</legend>
    <label for="username">Username: </label>
    <input id="username" name="username" required>
    <label for="password">Password: </label>
    <input id="password" name="password" type="password" required>
    <input type="submit">
  </fieldset>
</form>

1
2
3
4
5
6
7
8
9
<form>
  <fieldset>
    <legend>Options</legend>
    <label for="a">Option A:</label> <input id="a" type="checkbox">
    <label for="b">Option B:</label> <input id="b" type="checkbox">
    <label for="c">Option C:</label> <input id="c" type="checkbox" checked="1">
    <label for="d">Option D:</label> <input id="d" type="checkbox">
  </fieldset>
</form>

We can use <fieldset> elements to organise <inputs> into groups.

Select boxes

Select boxes need nested options.

1
2
3
4
5
6
7
8
<form>
    <label for="colour">Colour:</label>
    <select name="colour" id="colour">
        <option value="red" selected>Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</form>

Only one option can be selected

Categorical data

Radio buttons need to be grouped using the name attribute.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<form>
    <fieldset>
        <legend>Colour</legend>
        <label for="red">Red: </label>
        <input type="radio" id="red" name="colour" value="red">
        <label for="green">Green: </label>
        <input type="radio" id="green" name="colour" value="green">
        <label for="blue">Blue: </label>
        <input type="radio" id="blue" name="colour" value="blue">
    </fieldset>
    <input type="submit">
</form>

The value attribute will be submitted as the value of the name key.

Input validation

Validation used to be really annoying, now its easy. Inputs with type="tel", type="url" and type="email" provide basic checking which is detected by the pseudo-classes :valid and :invalid. We can also add the required attribute to activate the :invalid state on empty values.

1
2
3
4
5
6
7
8
<form class="validation-demo">
    <label for="phone">Tel:</label>
    <input type="tel" id="phone" name="phone" 
      pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
    <label for="email">email: </label>
    <input id="email" type="email" required>
    <input type="submit">
</form>

Forms will only submit when all inputs are valid. They also have the same pseudo-classes so can also be styled.

Accessing input data with JavaScript

Given input elements in the page, you will often want to access the user input via javascript.

1
2
3
4
5
6
7
8
<form>
    <label for="myInput">Input: </label>
    <input id="myInput" value="some value">
    <label for="myCheckbox1">Option A: </label>
    <input id="myCheckbox1" type="checkbox" checked="1">
    <label for="myCheckbox2">Option B: </label>
    <input id="myCheckbox2" type="checkbox">
</form>

1
2
3
console.log(myInput.value);       // "some value"
console.log(myCheckbox1.checked); // true
console.log(myCheckbox2.checked); // false

User input can be easily accessed and set with JavaScript.

For most cases you will only need to access the value property or the checked property.

Events

Two important events are the input and change events.

1
2
3
inputInput.addEventListener('input', ev => {
    inputOutput.textContent = inputInput.value;
})

The input event is triggered when user interacts with an input element.

1
2
3
changeInput.addEventListener('change', ev => {
    changeOutput.textContent = changeInput.value;
})

The change event is triggered when focus moves away and a new value is set.

1
2
3
4
5
6
7
8
<form class="three">
    <label for="inputInput">Input event</label>
    <input type="range" id="inputInput">
    <output id="inputOutput">50</output>
    <label for="changeInput">Change event</label>
    <input type="range" id="changeInput">
    <output id="changeOutput">50</output>
</form>

Using JavaScript is entirely optional in this module.

Query parameters

Submitting forms passes data to the server either via GET requests or POST requests. The difference is important.

GET requests can include query parameters or search parameters as part of the URL. These become visible to the end user and so should not be used for sensitive data.

Either way, when the server receives this request, it can parse the url to extract the parameters.

In PHP this is done automatically and the data are stored as associative arrays known as $_GET and $_POST.

For example, I can link to a specific slide in the presentation by adding search parameters to the url of a link.

Getting user input

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart