Forms

After defining the UI patterns, this is how forms must be.

Structured format

The user needs to quickly enter data into the system, without being forced choose data from combo-boxes or other selection mechanism.

An input text form field is presented with an accompanying label describing what input is expected in the field. The label describes a specific structure the user must follow to input a valid value.

Usage

  • Use when the more explicit select boxes, radio buttons, and checkboxes make entering data a too complicated process to fill out for an every day task;
  • Use when filling out forms takes too much time for the user compared to what he or she wants to accomplish;
  • Use when the the input user wants to collect is a specific data type. For instance a zip code, a date or time, a phone number;
  • Use when the expected input follows a specific given format which can readily be interpreted by a computer program.

*



*

HTML Code

<form role="form"> <div class="row"> <div class="col-md-6"> <p> <label for="inputName" class="control-label">Nome completo</label><span class="required">*</span> <input type="text" class="form-control" id="inputName"> </p> </div> <div class="col-md-6" id="sandbox-container"> <p> <label>Data de Nascimento</label> <input type="birth-date" class="form-control" placeholder="dd/mm/aaaa"> </p> </div> <div class="col-md-6"> <p> <label>Estado Civil</label> <select class="form-control"> <option selected>Escolha uma opção</option> <option>Solteiro</option> <option>Casado</option> <option>Divorciado</option> <option>Viúvo</option> </select> </p> </div> <div class="col-md-6"> <p> <label>Profissão</label> <select class="form-control"> <option selected>Selecione</option> <option>Advogado</option> <option>Arquiteto</option> <option>Contabilista</option> <option>Designer</option> <option>Engenheiro</option> <option>Estucador</option> <option>Gestor</option> <option>Programador</option> </select> </p> </div> <div class="col-md-6"> <p> <label>Nº de Identificação</label><br> <input type="BI" class="form-control" data-toggle="tooltip" data-placement="right" title="Introduza o número do cartão do cidadão"> </p> </div> <div class="col-md-6"> <p> <label>Nº de Contribuinte</label><br> <input type="contribuinte" class="form-control"> </p> </div> <div class="col-md-6"> <p> <label>Nacionalidade</label> <input type="nacionalidade" class="form-control"> </p> </div> <div class="col-md-6"> <label>Sexo</label><span class="required">*</span><br> <label class="radio-inline"> <input type="radio" name="sexo" id="inlineRadio1" value="option1"> Feminino </label> <label class="radio-inline"> <input type="radio" name="sexo" id="inlineRadio2" value="option2"> Masculino </label> </div> </div> <br> <button type="submit" class="btn btn-success">Submeter</button> <button type="cancel" class="btn btn-cancel">Cancelar</button> </form>

Fill in the blanks

The user needs to enter data into the system and labels don’t completely explain what the field is about.

Usage

  • Use when you find yourself creating labels for input fields that does not really explain what the input field is all about;
  • Use when you find yourself creating long and complicated labels for input fields, which in turn makes it hard for users to understand;
  • Use when you can possibly express the context of the input field by placing it in a sentence;
  • Use when filling out the input field is mandatory or strongly appreciated. Leaving parts of a sentence unfilled creates annoyance in the user;
  • Use when you have a relatively small set of input fields to place as part of the sentence. If you have many input fields, placing them all in a sentence can seem tiresome for the user, as the sentence structure forces the user to read all sentences through and place all input fields in context of those sentences;
  • Do not use if you have many fields that are not required to be filled out.

HTML Code

<div class="bs-example"> <form role="form"> <div class="form-group"> <label>Morada</label> <input type="morada" class="form-control" placeholder="Indique a rua, número ou andar"> </div> </form> </div>

Input prompt

The user needs to enter data into the system and the system helps with suggestions.

Usage

  • Use when the label of an input field does not fully explain what should be filled into it or when using such a label feels like over-explaining the interface;
  • Use when an example text or question answers what should be filled into an input field just as well as a label;
  • Use when you want to save the space that a label otherwise takes up;
  • Use in combination with a label, to further explain what kind of input is needed.

Check this example on Bootstrap website!

Good defaults

The user needs to enter data into the system, whereof some options are most likely to match the default values.

Usage

  • Use when the user has to choose among many options, whereof some are most likely to match the default values chosen by other users;
  • Use when it is possibly for the system to make qualified guesses regarding what the user might choose;
  • Use when it seems as a complicated thing to fill out the form without the default: when the number of required choices hinders the user from finishing filling out a form;
  • Do not use for input fields that are important for the user to think about. For instance for signing up to a newsletter or accepting the terms and agreements of a website.

*

*

*

HTML Code

<!-- :::::::::::: Start HTML Code :::::::::::: --> <form role="form"> <div class="row"> <div class="col-md-4" id="sandbox-container"> <p> <label>Data início do contrato</label><span class="required">*</span><br> <input type="proposal-date" class="form-control" value="28/05/2014" id="dataInicioContrato" onchange="updateDateInput(this, 'duracaoContrato', true);"> </p> </div> <div class="col-md-4" id="sandbox-container"> <p> <label>Data de fim do contrato</label><span class="required">*</span><br> <input type="proposal-end" class="form-control" placeholder="dd/mm/aaaa" id="dataFimContrato" onchange="updateDateInput(this, 'duracaoContrato', true);"> </p> </div> <div class="col-md-4"> <p> <label>Duração do contrato</label><span class="required">*</span><br> <input type="proposal" class="form-control" id="duracaoContrato" onchange="updateDateInput(this, 'dataFimContrato', false);"> </p> </div> </div> </form> <!-- :::::::::::: End HTML Code :::::::::::: --> <!-- :::::::::::: Start Javascript Code :::::::::::: --> function updateDateInput(elem, destino, isDate) { if (isDate) { var duracao = document.getElementById('dataFimContrato').value.split('/')[2] - document.getElementById('dataInicioContrato').value.split('/')[2]; if (!isNaN(duracao)) document.getElementById(destino).value = duracao; } else { var dia = document.getElementById('dataInicioContrato').value.split('/')[0]; var mes = document.getElementById('dataInicioContrato').value.split('/')[1]; var anoInicio = document.getElementById('dataInicioContrato').value.split('/')[2]; var anoFinal = parseInt(anoInicio) + parseInt(elem.value); if (!isNaN(anoFinal)) document.getElementById('dataFimContrato').value = dia + "/" + mes + "/" + anoFinal; } } <!-- :::::::::::: End Javascript Code :::::::::::: -->

WYSIWYG editor

The user wants to add formatted text content, but does not have the know-how to write HTML.

Usage

  • Use when you want to give the user a clear indication of how his or her content is going to look like when it is published. WYSIWYG is short for What You See Is What You Get;
  • Use when the users of a site is not comfortable in formatting text by using HTML codes, a markup language such as textile or markdown;
  • Use to lower the barrier of letting your users add formatted content to your site;
  • Use when you want an easy way to integrate media into the formatted content of your site that does not require HTML or any other syntax knowledge;
  • Use when the user is inclined to spend time correcting small layout details of his or her writing. As the user can see the formatted result as they edit it, they are boosted with confidence and allows for quick and good looking results fast;
  • Do not use if you want to keep the HTML syntax clean. Many WYSIWYG editors are known to produce horrible HTML code;
  • Do not use if you want the editor to function in all browsers. WYSIWYG editors rarely support all browsers, and if they do, it is often only the latest releases of the browsers.

Live preview

The user wants to check how changes in form fields affect an end result as quickly as possible.

Usage

  • Use when you want to provide the user with a real-time preview of what he or she is creating;
  • Use when it is hard for the user to comprehend how the final output will be without having a preview to reference;
  • Do not use when the input is straightforward and the resulting output does not depend on a specific layout.

HTML Code

<!-- Button example live preview --> <button class="btn btn-primary" data-toggle="modal" data-target="#preview"> Preview button </button> <!-- Live preview lightbox (Modal) --> <div class="modal fade text-left" id="preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog-lg" style="width: 800px; margin: 50px auto;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">PREVIEW</h4> </div> <div class="modal-body"> <div class="lightbox-padding"> <form role="form"> <div class="row"> <div class="col-md-12"> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-warning.png"> <strong>Atenção! </strong>Antes de publicar, confira a seguinte informação. </div> <fieldset> <legend>Dados Gerais</legend> <div class="row"> <div class="col-md-12"> <div class="col-md-6"> <p> <label>Nome</label><br> <span>Dr. Francisco António Mateus Silva</span> </p> <p> <label>Data de Nascimento</label><br> <span>1977/01/01</span> </p> </div> <div class="col-md-6"> <p> <label>Morada</label><br> <span>Rua do Zambeze, 192</span> </p> <p> <label>Localidade</label><br> <span>Porto</span> </p> </div> </div> </div> </fieldset> </div> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-success">Publicar</button> <button type="button" class="btn btn-cancel" data-dismiss="modal">Cancelar</button> </div> </div> </div> </div>

Password strenght meter

The currently entered password in the password field is measured on an often horizontal scale from none to max security.

Usage

  • Use when you want your users to choose passwords for their user accounts that are hard to break or guess by either human or computerized help;
  • Use when you want to higher the entry barriers for attackers to get started tampering with your system;
  • Use when you want to be sure that your users know what a good password is and that their chosen password follows such guidelines.


HTML Code

<!-- :::::::::::: Start HTML Code :::::::::::: --> <form role="form"> <div class="form-group"> <label>Password</label><br> <input class="form-control" type="password" id="password" /> <div id="messages"></div> </div> </form> <!-- :::::::::::: End HTML Code :::::::::::: --> <!-- :::::::::::: Javascript source :::::::::::: --> <script src="globalgis_files/js/passwordmeter.js"></script> <script src="globalgis_files/js/StrongPass.js"></script> <!-- :::::::::::: Javascript source :::::::::::: -->

Input feedback

When users submit content to your site via forms, errors in the data the user has provided is bound to happen from time to time.

Usage

  • Use when you want to provide feedback to the user upon submitting content to your site;
  • Use when you want to notice your users about errors that happened during form submission;
  • Use when you want to let your users know that everything went as planned upon content submission.

Atenção! Corrija os erros antes de submeter novamente a informação.
Dados pessoais

Nome completo* O nome é de preenchimento obrigatório!

Data de Nascimento*

A data é de preenchimento obrigatório!

HTML Code

<div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <strong>Atenção!</strong> Corrija os erros antes de submeter novamente a informação. </div> <fieldset> <legend>Dados pessoais</legend> <div class="col-md-12"> <div class="row"> <div class="col-md-6"> <p> <strong>Nome completo</strong><span class="required">*</span> <input type="nome" class="form-control input-error" value="Francisco Manuel Santos Silva"> <span class="required-info">O nome é de preenchimento obrigatório!</span> </p> </div> <div class="col-md-6"> <p> <strong>Data de Nascimento</strong><span class="required">*</span> <div class="row date-margin"> <div class="col-xs-3 input-margin"> <input type="dia" class="form-control input-error" placeholder="dd"> </div> <div class="col-xs-3 input-margin"> <input type="mes" class="form-control input-error" placeholder="mm"> </div> <div class="col-xs-3 input-margin"> <input type="ano" class="form-control input-error" placeholder="aaaa"> </div> </div> <span class="required-info">A data é de preenchimento obrigatório!</span> </p> </div> </div> </div> </fieldset>

Explaning the process

This is how "Step-by-step" forms must be.

Steps left (step-by-step, form progress)

Add a block of graphics describing the steps involved in submitting data to the system.

Usage

  • Use when the user is about to go through a longer process of giving data to the system that is longer than two screens (steps);
  • Use when the steps of a process is so long that the user might get the impression that it will go on forever without the guidance of steps;
  • Do not use when there is only 1 or 2 steps in submitting data to the website;
  • Do not use when the process of filling out data is easy foreseeable.

validado

1. Step

validado

2. Step

Some information.

Data do agendamento

Tipo de movimento

Repetitivo

Final step.

HTML Code

<div class="panel panel-default"> <div class="panel-heading"> <div class="icon-check" id="step1"> <img src="globalgis_files/images/icon-check.png" alt="validado"> </div> <!-- <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> --> <h4 class="panel-title accordion-disabled"> 1. Step </h4> <!-- </a> --> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> ... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <div class="icon-check" id="step2"> <img src="globalgis_files/images/icon-check.png" alt="validado"> </div> <!-- <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> --> <h4 class="panel-title accordion-disabled"> 2. Step </h4> <!-- </a> --> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Some information. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <h4 class="panel-title"> 3. Step </h4> </a> </div> <div id="collapseThree" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <p> <div class="checkbox radio-margin"> <label> <input type="checkbox" name="optionsCheck" id="optionsCheck" onchange="changeStatus(this, 'agendar', true)" value="option" checked> Agendamento </label> </div> </p> </div> <div id="agendar"> <div class="col-md-4" id="sandbox-container"> <p> <strong>Data do agendamento</strong><br> <input type="proposal-date" class="form-control" placeholder="dd/mm/aaaa"> </p> </div> <div class="col-md-4"> <p> <strong>Tipo de movimento</strong><br> <select class="form-control"> <option selected>Rec. Entrega suplementar</option> <option>Todos</option> </select> </p> </div> <div class="col-md-4"> <p> <strong>Repetitivo</strong><br> <select class="form-control"> <option selected>Único</option> <option selected>Rec. Entrega suplementar</option> <option>Replicado para próxima anuidade</option> </select> </p> </div> </div> <div class="col-md-6"> <p> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="btn btn-primary"> Voltar</a> </p> </div> <div class="col-md-6 text-right"> <p> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class="btn btn-primary"> Seguinte</a> </p> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> <h4 class="panel-title"> 4. Step </h4> </a> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> Final step. </div> </div> </div> </div>

Process overview

Give an impression to the user, how the system will look once filled with data – or guide him or her to start filling it with data.

Usage

  • Use when your application feels without life and empty before the user has started to enter data into the system;
  • Use when you want to motivate the user to start using the system;
  • Use when you want to aid the user in getting started with your web application;
  • Use when you want to show best practices of using your web application;
  • Use when you want to guide the user to get a good start with your web application.

Before start, check if you have all the information you need to complete this form.
During this process...
Dados pessoais

Nome completo*

Data de Nascimento*

HTML Code

<div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Before start, check if you have all the information you need to complete this form.<br> During this process... </div>

Help box

Document your interface in-line with descriptive help blocks.

Usage

  • Use when an interaction with your website is not necessarily intuitive and self-explanatory in itself;
  • Use inline tips to document your interface;
  • Use when you want to motivate the user to start using the system;
  • Use when you want to aid the user in getting started with your web application;
  • Use when you want to guide the user to get a good start with your web application;
  • Use to gently introduce functionality to the new and untrained user;
  • Use the ‘hide’ functionality to avoid frustration of the experienced and trained user.

Edit your profile information. Be sure you insert your email correctly, a password will be send to the email you indicate.
Dados pessoais

Nome completo*

Data de Nascimento*

HTML Code

<div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Edit your profile information. Be sure you insert your email correctly, a password will be send to your email. </div>

Wizard (Go Back, Continue)

The task of inputting data into the system is parted into multiple steps. Each step is presented to the user one at a time.

Usage

  • Use when the user needs to perform a task or a goal that dictates more than one step.
    • An example is adding an image to a website which can include uploading the image and cropping the image; the image cannot be cropped before it is uploaded to a server;
  • Use when the user needs to perform a complex task consisting of several dependable sub-tasks;
  • Use when the user needs to input complex data into a system that is easier for the user to comprehend parting the process into multiple steps;
  • Use when the user needs guidance: the user wants to achieve an overall goal, but may not be familiar in the steps needed to reach the goal;
  • Use when the steps needed to reach a final goal may vary due to decisions made in previous stages;
  • Use when the user lacks necessary domain knowledge;
  • Use when the user must complete steps in a specific sequence.

validado

1. Step

validado

2. Step

Some information.

Data do agendamento

Tipo de movimento

Repetitivo

Final step.

Tooltips

A tooltip is a dialog box that displays when you hover your cursor over a web page element such as a hyperlink. It provides additional information about that element.

Usage

  • You need a textual description to make it explicit what will happen when the user interacts with the object.

Valor do prémio
€/mês

HTML Code

<strong>Valor do prémio</strong><br> <input type="valor-premio" class="form-control input-80" placeholder="0,00" data-toggle="tooltip" data-placement="right" title=""> <div class="label-inline">€/mês</div>

Processing page

Users need feedback that their action is being performed but may take a while to complete.

Usage

  • You are designing a site where slow back-end systems are connected to;
  • Some requests to the back-end system may take 5 to 30 seconds to complete and the users need some feedback telling them that their request is being performed and that they'll have to wait a bit;
  • Only use this pattern when it is not possible to speed up the back-end processing time.

60%

HTML Code

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div> </div>

Tabs

This is how "Tabs" forms must be.

A horizontal and vertical bar contains the different sections or categories of your application.

Usage

  • Use when there are more than 2 sections;
  • Use when there less than 8-10 sections depending on the length of each section name;
  • Use when section names are relatively short;
  • Use when you want the navigation to fill the entire width of a page;
  • Use when you want to provide a list of the highest available sections/subsections of the website;
  • Do not use when wanting to show content-specific data. For instance for showing latest articles;
  • Do not use when there is no need to single-out the currently selected option;
  • Do not use when the list of sections or categories call for a “more…” link. Then consider another navigation pattern.

Informação sobre os dados da apólice.
Informação sobre os recibos.
Informação sobre os sinistros.
Informação do histórico.

HTML Code

<ul class="nav nav-tabs"> <li class="active"><a href="#apolice" data-toggle="tab">Dados da apólice</a></li> <li><a href="#recibos" data-toggle="tab">Recibos</a></li> <li><a href="#sinistros" data-toggle="tab">Sinistros</a></li> <li><a href="#historico" data-toggle="tab">Histórico</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="apolice">...</div> <div class="tab-pane" id="recibos">...</div> <div class="tab-pane" id="sinistros">...</div> <div class="tab-pane" id="historico">...</div> </div>

Jumping in hierarchy

This is how "breadcrums" navigation forms must be.

Show the labels of the sections in the hierarchical path that leads to the viewed page.

Usage

  • Use when the structure of the website follows a strict hierarchical structure of similar formatted content;
  • Use when the structure of the site is parted in to sections which can be divided into more subsections and so on;
  • Use when the user is most likely to have landed on the page from an external source (another site deep linking to the web page in question). For instance from a blog or a search engine;
  • Use when the page in question is placed fairly deep into the hierarchy of pages and when no other form of visual navigation can show the details of the same deep level;
  • Use together with some sort of main navigation;
  • Do not use on the topmost level of the hierarchy (typically the welcome page);
  • Do not use alone as the main navigation of the website.

HTML Code

<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Consulta de apólice</a></li> <li class="active">Dados da apólice</li> </ol>

Shortcut Dropdown

Add a combobox (a select box in HTML) to list a number of fixed locations (URL's) on one or more pages. When the form is submitted, the user is redirected to the chosen page.

Usage

  • Use to shortcut an otherwise hierarchical structure of a website;
  • Use when there are specific functionality or pages that are more frequently used than other parts of the website. Use the shortcut box to show these choices in order to shorten the path for the users;
  • Use when you want shortcuts to pages that are possibly on different hierarchical levels of the page;
  • Can also be used as navigation when short on space, although it is not advised.

HTML Code

<form> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Processo <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Apólice</a></li> <li><a href="#">Sinistro</a></li> <li><a href="#">Nome do titular</a></li> <li><a href="#">Entidade</a></li> </ul> </div> <input type="text" class="form-control input-main-search input-80"> <span class="input-group-btn"> <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span> Pesquisar </button> </span> </div> </form>

Create a link to the starting point or front page of the website on the site’s logo on every single page on the website.

Usage

  • Use when the user often enters the website through a page other than the start site. The user needs to be able to easily find his way to the starting point or front page of the website.

HTML Code

<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="globalgis_files/images/logo.png" alt="i2S"></a> </div> </div> </nav>

Sitemap

The users need to find a specific page.

Usage

  • Small to medium sized sites. Typically when the site has more than two levels in the structure and many elements on each level. For such sites, the sitemap functions as a navigation alternative. For very small sites the main navigation typically already resembles a sitemap. Don't use sitemaps for really large sites unless it is a catalog. Users want to see where they can go. Users know that a site is organized but they don't know how. Users want to see where they are.

HTML Code

<div class="row"> <div class="col-md-12"> <div class="col-md-4"> <footer> <label>Menu 1</label> <ul> <li><a href="#">Submenu 1.1</a></li> <li><a href="#">Submenu 1.2</a></li> <li><a href="#">Submenu 1.3</a></li> </ul> </footer> </div> <div class="col-md-4"> <footer> <label>Menu 2</label> <ul> <li><a href="#">Submenu 2.1</a></li> <li><a href="#">Submenu 2.2</a></li> <li><a href="#">Submenu 2.3</a></li> </ul> </footer> </div> <div class="col-md-4"> <footer> <label>Menu 3</label> <ul> <li><a href="#">Submenu 3.1</a></li> <li><a href="#">Submenu 3.2</a></li> <li><a href="#">Submenu 3.3</a></li> </ul> </footer> </div> </div> </div>

Menus

This is how "Menus" must be.

Vertical DropDown Menu

A list of main sections is listed on the same horizontal line.

Usage

  • Use when there are more than 2 main sections of a site.
  • Use when there less than 8-10 sections depending on the length of each section name.
  • Use when your functionality resembles one of a desktop application. Imitate the metaphor.
  • Do not use when there is a need to single out the location of the current section of the site. Then use the Navigation Tabs.

HTML Code

<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="globalgis_files/images/logo.png" alt="i2S"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Início</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Menu <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1</a></li> <li class="divider"></li> <li><a href="#">Submenu 2</a></li> <li class="divider"></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </nav>

Accordion Menu

Each headline / section has a panel, which upon clicking can be expanded either vertically or horizontally into showing its subsections.

Usage

  • Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options.
  • Use when there are more than 2 main sections on a website each with 2 or more subsections.
  • Use when you have less than 10 main sections.
  • Use when you only have two levels to show in the main navigation.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

HTML Code

<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> <h4 class="panel-title"> Collapsible Group Item #1 </h4> </a> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> <h4 class="panel-title"> Collapsible Group Item #2 </h4> </a> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> <h4 class="panel-title"> Collapsible Group Item #3 </h4> </a> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> </div>

Content

This is how "Content" must be.

Buttons

Use the available buttons style or class depending of the following situation:

Primary buttons

Green button: must be use for submit data into the server, situations like "submit" or "create".
Blue button: must be use for situations like "Previous", "Next" or "Close".
White button: must be use for situations like "Print" or open a lightbox.

Secondary buttons

Light blue button: must be use to check more information if needed.

Cancel buttons

Red button: must be use if the action will make the user lose data.
Red link: must be use if the action will cancel the action without losing data.

Global Links


            <button type="button" class="btn btn-default">Default</button>

            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success">Success</button>

            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info">Info</button>

            <!-- Indicates caution should be taken with this action -->
            <button type="button" class="btn btn-warning">Warning</button>

            <!-- Indicates a dangerous or potentially negative action -->
            <button type="button" class="btn btn-danger">Danger</button>

            

Thumbnail

A thumbnail is a miniature version of a larger picture. The thumbnail can illustrate anything graphical: a picture, movie or even a screenshot of a webpage.

Usage

  • Use when you have a collection of images that you want to present to the user.
  • Use when downloading full-size versions of all of the images you want to present to the user will both take up much bandwidth but will also take a long time for the user to download.
  • Use when you want to allow the user to browse quickly through a collection of images.
  • Use when you want to give the user an impression of an image, movie or page before he or she decides to download the original.

HTML Code

<img src="globalgis_files/images/thumb.png" alt="..." class="img-rounded-example"> <img src="globalgis_files/images/thumb.png" alt="..." class="img-circle-example"> <img src="globalgis_files/images/thumb.png" alt="..." class="img-thumbnail-example">

Pagination

A thumbnail is a miniature version of a larger picture. The thumbnail can illustrate anything graphical: a picture, movie or even a screenshot of a webpage.

Usage

  • Use when you have a collection of images that you want to present to the user.
  • Use when downloading full-size versions of all of the images you want to present to the user will both take up much bandwidth but will also take a long time for the user to download.
  • Use when you want to allow the user to browse quickly through a collection of images.
  • Use when you want to give the user an impression of an image, movie or page before he or she decides to download the original.

Página 1 de 55 resultados

HTML Code

<div class="row"> <div class="page-numbering">Página 1 de 55 resultados</div> <div class="text-center"> <ul class="pagination"> <li><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div> </div>

Error, Info & Warning Messages

A thumbnail is a miniature version of a larger picture. The thumbnail can illustrate anything graphical: a picture, movie or even a screenshot of a webpage.

Usage

  • Use when you have a collection of images that you want to present to the user.
  • Use when downloading full-size versions of all of the images you want to present to the user will both take up much bandwidth but will also take a long time for the user to download.
  • Use when you want to allow the user to browse quickly through a collection of images.
  • Use when you want to give the user an impression of an image, movie or page before he or she decides to download the original.

This is a success message!
This is an information message!
This is a warning message!
This is an error message!

HTML Code

<!-- Success message --> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-success.png">This is a success message! </div> <!-- Information message --> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-info.png">This is an information message! </div> <!-- Warning message --> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-warning.png">This is a warning message! </div> <!-- Error message --> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-error.png">This is an error message! </div>

Required Form Fields

Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to each field to indicate required fields. If you choose asterisk, provide a legend which tells the meaning of it.

Usage

  • First of all, keep the form simple. Avoid optional input fields in forms, don’t ask users to provide useless information.
  • Show the required/optional indicators next to labels instead of input fields to make it easier to scan the form through and see what information needs to be given.

Os campos marcados com asterisco (*) são de preenchimento obrigatório.
Nome completo*

HTML Code

<span class="required">*</span>

Search

This is how dealing with information data must be.

Table Filter

Provide dropdown inputs that present the categories by which the user can filter the data set by.

Usage

  • Use when you have a very large data set of results that is too large to show in one page.
  • Use when one or more table columns can easily be summarized into categories to filter by.

Nome Data de Nascimento Nº contribuinte Nº identificação Nº apólice
António Silva 1965/04/23 123654321 123654897 1198
Joana Silva 1945/02/22 981234321 2830489932 1187
Zulmira Silva 1975/11/11 952354321 193827463 1128
Inês Silva 1956/08/30 567654321 192876423 1135
Patrícia Silva 1968/05/29 521654321 394002918 1167
Tiago Silva 1978/09/13 284639836 293847565 1148
Francisco Silva 1980/01/29 283940247 2938476547 1173
João Silva 1965/03/12 96378456 28347251 1122
Manuel Silva 1969/02/10 273894021 293871544 1145
Pedro Silva 1971/12/25 38203947 119283746 1133

HTML Code

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered dataTable" id="example" aria-describedby="example_info"> <thead> <tr role="row"> <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 159px;" aria-label="Rendering engine: activate to sort column ascending">Nome</th> <th class="sorting_desc" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 238px;" aria-sort="descending" aria-label="Browser: activate to sort column ascending"> Data de Nascimento</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 223px;">Nº contribuinte</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 135px;" aria-label="Engine version: activate to sort column ascending">Nº identificação</th> <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 99px;">Nº apólice</th> </tr> </thead> <tbody role="alert" aria-live="polite" aria-relevant="all"> <tr class="gradeA odd"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">António Silva</a></td> <td class="sorting_1">1965/04/23</td> <td class="">123654321</td> <td class="center">123654897</td> <td class="center">1198</td> </tr> <tr class="gradeA even"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Joana Silva</a></td> <td class="sorting_1">1945/02/22</td> <td class="">981234321</td> <td class="center">2830489932</td> <td class="center">1187</td> </tr> <tr class="gradeA odd"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Zulmira Silva</a></td> <td class="sorting_1">1975/11/11</td> <td class="">952354321</td> <td class="center">193827463</td> <td class="center">1128</td> </tr> <tr class="gradeA even"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Inês Silva</a></td> <td class="sorting_1">1956/08/30</td> <td class="">567654321</td> <td class="center">192876423</td> <td class="center">1135</td> </tr> <tr class="gradeA odd"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Patrícia Silva</a></td> <td class="sorting_1">1968/05/29</td> <td class="">521654321</td> <td class="center">394002918</td> <td class="center ">1167</td> </tr> <tr class="gradeA even"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Tiago Silva</a></td> <td class="sorting_1">1978/09/13</td> <td class="">284639836</td> <td class="center">293847565</td> <td class="center">1148</td> </tr> <tr class="gradeC odd"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Francisco Silva</a></td> <td class="sorting_1">1980/01/29</td> <td class="">283940247</td> <td class="center">2938476547</td> <td class="center">1173</td> </tr> <tr class="gradeA even"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">João Silva</a></td> <td class="sorting_1">1965/03/12</td> <td class="">96378456</td> <td class="center">28347251</td> <td class="center">1122</td> </tr> <tr class="gradeA odd"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Manuel Silva</a></td> <td class="sorting_1">1969/02/10</td> <td class="">273894021</td> <td class="center">293871544</td> <td class="center ">1145</td> </tr> <tr class="gradeA even"> <td class=""><a href="#" class="tooltip-test" title="Visualizar detalhes da pessoa" data-toggle="modal" data-target="#dados-pessoa">Pedro Silva</a></td> <td class="sorting_1">1971/12/25</td> <td class="">38203947</td> <td class="center">119283746</td> <td class="center">1133</td> </tr> </tbody> </table> <div class="text-left"> <ul class="pagination" style="margin-top: -15px"> <li><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div>

Live Filter

Whenever you make a change to any input fields, the search results are immediately updated without refreshing the page.

Usage

  • Use when search results can be so plentiful that getting an overview of all results will last a lifetime.
  • Use when search results can be categorized into filters: the search most be contextual.
  • Do not use when your search is not easily categorized into filters.

Check this example on Bootstrap website!

Autocomplete

Present items that match what the user is entering into a text field.

Usage

  • Use to help ambiguity-issues, when an item can be entered in multiple ways.
  • Use when the type of information entered can readily be matched with a specific piece of information in the system.
  • Use when auto complete suggestions can be pulled from a set of data that is manageable in size.
  • Use when input speed is an important goal.
  • Use when input accuracy is an important goal.
  • Use when the number of items would be too large or inconvenient to display in a standard drop down box.
  • Do not use if you want to provide the user an overview of all options available.

Check this example on Bootstrap website!

Tables

This is how "tables" must be.

Sort by column

Each column headline/label is a link.

Usage

  • Use when there are many rows in the table (above 10), which makes it hard to single out one row and its relation to other rows.
  • Use when there there are more than one page to show.
  • Use when you want to be able to compare rows in a table – for instance numbers.
  • Do not use if the amount of rows are few and the table is easy to search or scan.

Test the example above ( Table Filter )

Alternating Row Colors

To differentiate table rows from each other, a different shade is used as background color for every second row.

Usage

  • Use when you have several columns in a table.
  • Use when the content of each column is often of similar nature.
  • Use when there a multiple lines for each row.
  • Use when the height of each row varies.

Test the example above ( Table Filter )

Adaptable View

Responsive Layout

Provide some sort of mechanism to switch or alter the default style of a page so that it fits the specific needs of the user.

Usage

  • Use when a considerable part of your potential users has specific technical needs to how content is presented. Examples are mobile browsers, small screen resolutions, and monochrome monitors.
  • Use when a considerable part of your potential users has specific needs to how content is presented due to physical impairment. Examples are colorblindness or poor vision.
  • Use when your users need to control font size but may not know how to use the browser’s built in font resizing settings.
  • Use when you want to give users the ability to switch between from a mobile version of a site to the full featured version. It is for instance not all iPhone users who actually like to use tailored iPhone versions of websites instead of the full-featured browser version.