Smartphone HTML Forms
Designing Websites for Smartphones – Part 3
Forward: In this part of the series, we look at Smartphone HTML Forms.
By: Chrysanthus Date Published: 1 Aug 2012
Introduction
Summary of Forms
A smartphone web page can have a form (<form></form>) just like the desktop web page. However, the amount of space (viewport) you have for a smartphone is small, so the form for the smartphone has to be the summary of the corresponding form at the desktop website. Let us look at an example: Imagine a form for identifying an individual, at the desktop web page with the following fields: firstname, lastname, email, phone, address, city, state, country. Assume that for the desktop, the fields: phone, address, city, state and country are optional. For the smartphone, these optional fields have to be omitted (not coded and not displayed).
Smartphone Keyboard
A smartphone can have a physical keyboard. Alternatively, it can have a soft keypad (e.g. in iPhone) that is brought to the bottom of the screen. Whatever is the case, the keys are closer together and smaller than those of the desktop keyboard. It is not convenient to type on such keyboards to input data into the phone.
Solution to Smartphone Keyboard Problem
For the above problem, you have to make it easy for the user to input data into the smartphone. So whenever it is possible for the user to select from already prepared data, allow him/her to do so. So use the HTML select element whenever possible in your design; use the datalist with option elements whenever possible; and use the autocomplete attribute for text input control elements whenever possible.
Conclusion
We have come to the end of the series. A website for a smartphone is a summary of the corresponding desktop website. Everything has to be small: small text (quantity), small image, and small video. The HTML, CSS and ECMAScript all have to be small in code size (quantity); this means you have to omit complex features. When everything is small, download time is fast and the mobile (smartphone) site is operated easily at the phone.
I hope you appreciated the series.
If you want to host a smartphone website, you can check out the first link below. If you want the design of a very fast operating website, check out the second link below; there, they design smartphone and desktop websites that operate at triple speed, a new technology that other website designers are still to catch up with. If you want to promote your smartphone or desktop website, check out the third link below.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course