An issue with the do-it-yourself code of this example app is the boilerplate code needed
per model class for the storage management methods
add, update, destroy,
etc.;
per model class and property for getters, setters and validation checks.
While it is good to write this code a few times for learning app development, you don't want to write it again and again later when you work on real projects. In we present an approach how to put these methods in a generic form in a meta-class, such that they can be reused in all model classes of an app.
Many of the new HTML5 input field types (like number,
tel, email, url,
date (together with datetime-local,
time and month) or color) are
intended to allow web browsers rendering corresponding
input elements in the form of UI widgets (like a date picker or a color picker) that limit the user's input
options such that only valid input is possible. In terms of usability,
it's preferable to prevent users from entering invalid data instead of
allowing to enter it and only then checking its validity and reporting
errors.
Input fields for decimal number input should not be defined like
<input type="number" name="..." />
but rather like
<input type="text" inputmode="decimal" name="..." />
because this provides for a better user experience on mobile phones.
While browsers have heuristics for showing auto-complete
suggestions, you cannot rely on them, and should better add the
autocomplete attribute with a suitable value. For instance,
in iOS Safari, setting the input type to "tel" does only show
auto-complete suggestions if autocomplete="tel" is
added.
HTML5
defines more than 50 possible values for the
autocomplete attribute. So, you have to make an effort
looking up the one that best suits your purposes.
You can also create your own custom auto-complete functionality
with datalist.