Create a tab bar with swipe/pan interactions like the one of Google search options that you can see when you are using your smart phone. You just need pan events and a little of CSS. I have used MDL for the basic mockup and Hammer for pan gesture. Try to drag the tabs 😉
In the next example we are going to create a database (to save people parameters for example), insert and replace element, delete a table, and show data from database itself.
You can add new people data using the inputs and pressing “Save in database”, if the inputs have a red border it means you need to fill in before saving.
In the first example we are going to define the area of a circle depending on where we click within a box area. We can handle this using JavaScript events, a little bit of basic maths and CSS.
In the second example we are going to define the area using Hammer.js which helps us to add support for touch and muti-touch gestures. In this case you can pinch in and pinch out with your fingers to define the area (you can use an horizontal pan as well) and you can do a vertical pan movement with your finger to change the saturation of the circle.
If you are in a multi-touch device you can pinch and pan with your fingers, if not use horizontal and vertical pan with your mouse. The events will be catched inside and outside of the black box.
There is not any specific HTML tag to let you edit and select, we just have input tags and select tags but we can combine them and even more we can define our own icon/button for the select box. The trick here is to launch an event to show up our options from our hidden selection box.
You can adjust the options style, however in mobile apps the select options will be shown by an internal widget of the system.
Updated: you can use an input list with its datalist (Autocomplete dropdown)
You can use input’s attributes as min, max, pattern and so on, and then checking a simple class do what you need to. In this example we are using a Text Field component of Material Design Lite (MDL) which shows a message and a red mark up when the value is not the right one. You could extend this with as many inputs as you like and then if all of them are correct show a login button or whatever.
Note that in old browsers and android versions before Lolipop where the Web View isn’t Chrome you will need to use directly Validation DOM Methods. Ex:
document.querySelector('input').validity.rangeOverflow
Be careful because even some Validation DOM Methods are not well supported in old browsers versions.