HTML5 Survey Form with CSS3 Flexbox

What is HTML 5?

HTML5 is not yet 100% fully adopted on the web but there are many reasons to start using it especially if your audience is viewing from a controlled environment.  (For example:  An Intranet with a “controlled” minimum browser version OR dedicated mobile devices distributed to a team).

Major players like Apple and Adobe are HTML5 advocates and there is a lot of support for all modern mobile devices.

Features with Benefits

HTML5

Accessibility is improved due to the new semantic tags like <header>, <footer>, <nav>, <section>, <article>, <aside> which allow screen readers to access content more easily.   For more information on the Web Accessibility Initiative check out https://www.w3.org/WAI/intro/aria .

Adding audio and video to your websites is vastly improved with the new HTML5 tags <audio> and <video>.    No more / <object> tag nightmares containing chunky code that is hard to read and to get working across multiple browsers.   There is not yet backwards compatibility for older browsers for all the attributes within these two tags but you can account for these issues by using some of the following resources.

The new local storage feature is better than cookies because it allows developers to retrieve values across multiple windows and it has better security and performance.   The data will even persist after the user closes the browser!    HTML5 local storage allows developers to create data application features without using 3rd party plugins:

  • Store user information
  • Cache data
  • Load the current user’s previous application state (what!?)
Check out this article by Christian Heilmann:  

Wrapping Things Nicely with HTML5 Local Storage

Mobile browsers are totally on board the HTML5 train and responsive design has never been easier using viewports which allow you do define all of your specifics for width and zoom settings.

Here is a great resource for HTML5 Mobile Development:  Mobile HTML5

For a quick start on creating your own HTML5 form with Flexbox, check out these files to get you up and running quickly:
http://mldboston-dev.com/HTML5-ALL.html 

http://mldboston-dev.com/HTML5.css 

HTML5 Resources

Standards:  https://www.w3.org/TR/html5/

Check all things browser/devices:  https://html5test.com

HTML5  INPUT TYPES

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • reset
  • search
  • tel
  • time
  • url
  • week
  • data list
  • progress meter

 

HTML5 Elements

image(1)

What is CSS3 Flexbox?

In a nutshell, the CSS3 Flexible Box or “Flexbox” is a layout mode that allows you to arrange HTML5 elements on the page that will behave in a predictable manner.  When the browser window size is changed by the user or when the page is viewed on smaller display devices Flexbox is magical.

In the following DEMO, I am going to demonstrate how easy it is to pull together an HTML5 survey using flexbox for the layout in literally minutes!

Flexbox is supported in all major browsers and it has 97.61% widespread global support.

Check this out:   http://caniuse.com/#search=flexbox

If you are required to support older browsers, you can use autoprefixer which allows you to specify which browser versions you want to support and it will give you the correct vendor prefixes.

Centering content has never been so easy!   

.flex-container {

  display: flex;

  justify-content: center; /* horizontal centering */

  align-items: center; /* vertical centering */

}

You can also change the order of elements very easily to accommodate mobile views by simply changing the order in a viewport!
flexbox-order

 

 

 

 

 

 

 

 

 

 

Flexbox Resources

DEMO

Demo files in the proper view order
  1. http://mldboston-dev.com/survey.html 
  2. http://mldboston-dev.com/survey.css
  3. http://mldboston-dev.com/responsiveSurvey.css
  4. http://mldboston-dev.com/survey.json
  5. http://mldboston-dev.com/flexbox.css
  6. http://mldboston-dev.com/results.html

The HTML5 Survey form

http://mldboston-dev.com/survey.html

I am using the class “.container”  to control the flexbox:

fieldset div.container {

  display: flex;

  flex-flow: column;

  max-width: 750px;

}

And within the container I have two items:

Label (order: 1)

Input Types (order: 2)
Refer to my style sheet for all styles:  http://mldboston-dev.com/survey.css

To test responsiveness, use Google Chrome and choose all the different device types using Developer Tools.

Refer to my responsive style sheet:  http://mldboston-dev.com/responsiveSurvey.css

Some things to note about the HTML5 form:

  • Tool Tips hovering over elements
  • Name field required (try leaving it blank)
  • Using javascript to advance the survey Progress Bar element (filling out form from top to bottom)
  • Color Picker is an HTML5 new element
  • Date Picker is new in HTML5
  • Check out the slider and progress elements

FORM DATA

The form is not currently wired up to a web api but it will be in the future.  In preparation for the web api, the form generates JSON created from the values of the HTML5 form elements.   If you add a new element, the code will automatically generate a property/value for the current user’s results.

Form Data

{

  "account": "P",

  "name": "Michelle",

  "favoriteColor": "#0080c0",

  "birthday": "2017-10-05",

  "GOT": "100",

  "SleepCategory": "Evening"

}

RESULTS USING FLEXBOX / JQUERY

The current demo uses a sample JSON file to dynamically display the FLEXBOX results using JQUERY and the HTML5 semantic selectors.

Results JSON Input:   http://mldboston-dev.com/survey.json

Results Display:    http://mldboston-dev.com/results.html  (JavaScript in this file)

CODE SNIPPET MANIPULATING HTML5 elements and FLEXBOX results

      function ProcessResults(data) {

         var selNo = 1;

        for (var i = 0, l = data.surveyresult.length; i < l; i++) {

          selectorA = "article:nth-of-type(" + selNo + ")";

          selectorH2 = "article:nth-of-type(" + selNo + ") > h2";

          selectorBD = "article:nth-of-type(" + selNo + ") > p:nth-of-type(1)";

          selectorS = "article:nth-of-type(" + selNo + ") > p:nth-of-type(2)";

          selectorGOT = "article:nth-of-type(" + selNo + ") > p:nth-of-type(3)";

          colorOpacity = getOpacity(data.surveyresult[i].GOT);

          sName = data.surveyresult[i].name;

          bday = getFormattedDate(data.surveyresult[i].birthday);

          $(selectorH2).append(sName);

          $(selectorA).css("background", hex2rgba(data.surveyresult[i].favoriteColor, colorOpacity));

          $(selectorBD).append(bday);

          $(selectorS).append(data.surveyresult[i].SleepCategory);

          $(selectorGOT).append(colorOpacity);

          if (colorOpacity >= .75) {

            $(selectorA).css("border-style", "solid");

            $(selectorA).css("border-color", "white");

            $(selectorA).css("border-width", "15px");

            $(selectorA).css("flex-grow", "3");

          } else if (colorOpacity <= .25) {

            $(selectorA).css("flex-shrink", "5");

            $(selectorA).css("font-size", ".5em");

            $(selectorA).css("width", "10%");

            $(selectorA).css("height", "10%");

          }

          selNo += 1;

        }

      }

CSS3 Flexbox (Latest Version Browsers)

flexbox-settings

Full version here:   http://mldboston-dev.com/flexbox.css

 

Some things to note about using flexbox in this example with data:

  • Re-size the browser and watch how the elements shift.
  • The order of flexbox items can be manipulated in media queries for responsive
  • The white Borders were set dynamically from evalluating the HTML5 Slider value.
  • Size of the flexbox manipulated by evaluating the HTML5 Slider value.
  • The background color for the flexbox came from the form’s HTML5 Color Picker.
  • The background opacity for the flexbox came from the form’s HTML5 Slider value.

 

CSS3 Flexbox Properties (Latest Version Browsers)

flexbox-properties

 

Author: MLDBoston

Technology Enthusiast!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s