We will make a form that will enable us to create objects for the BankAccount class that we encountered in code examples in Chapter 1, Dart – A Modern Web Programming Language, and Chapter 2, Getting to Work with Dart. Moreover, we will be able to deposit or withdraw money from these accounts, calculating and adding interest to them.

In this first spiral, we construct our model classes and lay out a form to create and update a bank account, using the new specialized input fields of HTML5. The code for the classes is kept in the subfolder model and these are part of our application, as shown in the initial code of bank_terminal_s1.dart:

library bank_terminal;
import 'dart:html';
part '../model/bank_account.dart';
part '../model/person.dart';
void main() {

A bank account is owned by a person, as we see in the starting code of (bank_account.dart):

part of bank_terminal;
class BankAccount {
  String number;
  Person owner;
  double balance;
  int pin_code;
  final DateTime date_created;
  DateTime date_modified;
  // constructors:
  BankAccount(this.owner, this.number, this.balance, this.pin_code): date_created = new DateTime.now();
  // rest of code omitted
}

The final item date_created is initialized to the current date in the initializer list of the constructor. The person's data is kept in objects of a separate Person class in person.dart:

part of bank_terminal;
class Person {
  // Person properties and methods
  String name, address, email, gender;
  DateTime date_birth;
  // constructor:
  Person(this.name, this.address, this.email, this.gender, this.date_birth);
  // methods:
  String toString() => 'Person: $name, $gender';
}

After applying some CSS3 to the form attribute, our input screen looks like the following screenshot:

The Bank Account input screen

We surround all input fields in this form tag: <form name="account" autocomplete>. The autocomplete attribute makes sure that the browser shows a list based on values that the user has entered before. When all the data is filled in, clicking on the button Create account will create the objects and then store them. The name of the owner certainly is a required field, but how do we enforce this in HTML5? Take a look at the source code in bank_terminal_s1.html:

<input id="name" type="text" required autofocus/>

The required attribute does exactly that: clicking on the button with an empty name field shows a pop up with the text Please fill out this field; this is achieved by using the corresponding CSS3 pseudoclass :required:

:required {
  border-color: #1be032;
  box-shadow:
    0 0 5px rgba(57, 237, 78, .5);
       }

The required field pop-up screen

To automatically focus on the Name input field when the screen loads, use the autofocus attribute. The Email input field is required, but it is also of type email:

  <input id="email" type="email" required/>

This will check whether the value conforms to a standard e-mail address pattern of the form "*@-.-"; likewise, there is also a field of type url. The Birth Date field is of HTML5 type date. You can type in the date by filling it in the mm/dd/yyyy pattern, and you can also use the spinner buttons to choose the year. The big down button shows all days in the selected month, and allows changing the month and day. The Gender field shows a pre-populated list of values; this can be attached to the field through the list attribute and the <datalist> tag. The Account Number and Balance fields use the placeholder attribute to give the user a hint on what the input should be; this value, however, is not taken as the default input value, hence use the value attribute instead. To control the input format, use the pattern attribute; for example, pattern="[0-9]{3}-[0-9]{7}-[0-9]{2}", where the string can be any valid regular expression. For a HTML5 url field type, use the pattern, "https?://.+". The Pin code field is of type number, which checks the integer numerical input, possibly indicating a minimum and maximum value. Try out the validations by using different input values. Other valid HTML5 input types include color, date, datetime, datetime-local, month, search, tel (for a telephone number, use it with a pattern), time, week, range, and url.