A List of Basic Form Controls

Tuesday, July 19, 2011 7:19:00 PM

Let's Talk in the Same Language

Designers, Testers (QAs) and Project Managers often find themselves incapable, trying to describe the control they wish to place in a form.

Besides the unavoidable discomfort of the situation, the product's quality stands to be compromised when one's knowledge about the available controls in the market is poor.

Today's modern systems are built with a rich, full functional and well designed form controls.

The common jargon used among key users is essential to maintaining a successful product.

Below you will find the cutting edge updates regarding controls, along with screen shots, to help you elevate your professional skills to the highest level of expertise that exists in this market today.

The List 

Button

Button by the Dojo Toolkit

The Button, probably the most basic of all controls, is characterized with two different behaviors. A standard 'one click' Button will perform it’s mission once pressed. A 'two states' Button will change its state once pressed (e.g. from "on" to "off"). Developers often use a 'multiple states' Button (e.g. "fast", "medium", "slow"), however this option is not recommended. A better option is to use the ComboBox or a CheckBox for this scenarios.

TextBox

TextBox by ComponentOne

The TextBox control is one of the basic and the common controls. It is used for storing everything that the keyboard delivers to it. The TextBox is extended by many other controls to acheive more functionality. A TextBox with multiple rows is also referred to as a Multiline TextBox, Memo or TextArea.

SpinEdit

SpinEdit by Infragistics

The SpinEdit, also known as Numeric Up Down and Numeric TextBox is basically a simple one line TextBox with the added functionality of two or four arrows that changes the value in the TextBox. The buttons can add and remove a constant interval from the value (e.g. 6 bottles of mineral water in one pack) or even combine a logic function, that will suggest the next available number (e.g. hotel's next free room number). When using four arrows, it is common to use two different levels of intervals (e.g. right and left arrows for the hour, and up and down is for the minutes). SpinEdits, in most cases, allows users to type manually in the TextBox, but only the relevant digits (non relevant digits are ignored).

MaskedEdit

MaskedEditor by the Ajax Toolkit

Another interesting one line TextBox is the MaskedEdit. This control extends the TextBox to a specific format of input. Any other data inserted in a different format will be ignored. This method usually works well with simple patterns, such as date. It is suggested to avoid using this function for complex patterns such as formulas.

ComboBox

ComboBox by Telerik

A ComboBox, also named a DropDown, DropDownList or a Select List describes a very important control. This control has a TextBox and a drop down Button. Pressing the drop down Button opens a list, below or above the TextBox. Picking an item from the list will make it appear on the TextBox. ComboBoxs today has different functionalities, depending on the application. Some may let you type a custom text (e.g. to add an item that is not in the list), some may discard the drop down button, and open the list by clicking the TextBox. An interesting scenario is dependency between two or more ComboBoxs (e.g. category and sub category). This situation is called Cascading DropDowns.

AutoComplete

AutoComplete by JQuery

The AutoComplete, aka AutoSuggest, is a single line TextBox and sometimes ComboBox feature that predicts the string that is going to be entered by the user. The predication, in most cases, is based on a 'contains' or 'begins with' search of the requested string in a known list of strings. Some AutoComplete (especially 'contains' AutoCompletes) features are restricted to a minimum length of characters before the user is offered with predictable strings. The AutoComplete is used for simple words or sentences and changes the entire string in the TextBox according to your pick. However, there are some sophisticated AutoCompletes that can complete and suggest single words, and therefore only changes the relevant word rather the entire string in the TextBox. Such AutoCompletes are mostly applied with multiline TextBoxs. Most of the AutoCompletes features have a delay before prompting the SuggestionList, in order to achieve a nicer look and feel especially in situations where the user types rapidly into the TextBox.

CheckBox

CheckBox by DevExpress

The CheckBox is the basic 'two states' control. You ca use it, for instance, to apply some addition to a reservation (e.g. "include flight with a hotel reservation”). It is also used in short lists that can be applied with a groups of elements together, in a way that one effects the other (e.g. "rain", "snow", "cold", "winter", "summer"- a "rain" and "winter" combination is valid, but "summer" and "winter" is not). This last situation is sometimes called Multi Exclusive Checkbox List.

RadioButton

RadioButton by DevExpress

The RadioButton is a nice control that must come, at least, in pairs. For this reason, it is also referred to as RadioButton List. The RadioButton emulates a situation where only single option is allowed- picking one is giving up the others.

ScrollBar

ScrollBar by GrapeCity

What a ScrollBar basically does is to let you see part of the thing that inside your window or frame, as well as knowing the length and position of what you watching now.  You can either scroll by clicking the Scroll Arrows, by dragging the Scroll Bar to the desired position or even by clicking at the empty space between the Scroll Bar and the Scroll Arrows. The size of the Scroll Bar is derived from the size of the current view compared to the size of the entire Document/ Window/ Frame. Although ScrollBars are very common and intuitive in our Windows world of today, the touch screens available in devices such as smart phones, made the scroll bars be less important than they were before. The touch scrolling, by the way, is in a sort of an opposite direction to the classic mouse and keyboard scrolling.

Panel/ Window

Panel by DevExpress

The Panel has many names. It also known as aka Window, Frame, ContentHolder is the basic container control. It allows wrapping content and usually having a border, header, footer and window buttons. The header hosts a title for the window and some window actions. The footer hosts general statuses and sometimes help issues or submit Buttons. The actions available for a window can be: dock - undock, expand - collapse, close, minimize and resize. Yet there are panels that are used only with a few of the mentioned or even none.

GroupBox

GroupBox by Infragistics

The GroupBox is a Panel, which can be recognized by the border surrounding the controls inside it and the Title on the top border. The Title can be place either on the left, center or right of the top border and usually don't consist more than one line. GroupBoxs are mainly used for categorizing groups of controls inside a Form.

Modal PopUp

Modal PopUp from the Ajax Toolkit

Modal PopUp, or Modal Dialogs are a way to tell the user "Stop! Answer this question". It freezes the application until the user takes some action. In addition to stopping the application from being accessible to the user, the Modal PopUp attracts a lot of attention from the user. When using Modal PopUps, it is recommended that you use a pseudo transparent background to the area outside the popup. It makes the behavior of the modal more comprehensive for the user, but on the other hand doesn't disconnect him from the screen.

Alert, Confirm

Alert in Interner Explorer 9

Confirm in FireFox 3.5

The Alert and Confirm panels are a specific kind of a Modal PopUps. They are widely used in many application scenarios. Both stops actions and won't let go until the user respond. The Alert panel has only one option and it is used to pass to the user important messages. Sometimes, in addition to the OK Button, the panel has 'close' action which practically does the same as the OK Button (dismisses the panel). The Confirm panel has two options- take it or leave it...

Floating Panel

Floating Panel by Ajax Toolkit

A special type of Panel is the Floating Panel. It is a Panel that can be repositioned using a mouse drag. The dragging is usually by holding down the left key of the mouse on the area of the header. When several Floating Panels are in the same application and live together, start dragging one brings it to be on the top of the others. This behavior is also known as On Top. When one Floating Panel or more have restricted area to be dragged in, it is called MDI Application. When a Floating Panel has an initial constant place, yet it can be positioned somewhere else, this constant place called Dock Element or Dock Panel.

File Upload

File Upload by DevExpress

As the name implies, File Upload is used to attach a file from the local file system to the application. It is built out of a TextBox and an Ellipsis Button. Clicking the Button prompts a dialog to pick the file or folder. Sometimes clicking the TextBox itself prompts the pick file/ folder dialog. Others may let the user type the path to the file/ folder, which can be very handy when you already have the path and all you need to do is paste it there.

Grid

Grid by DevExpress

We all know what a Table is. Most of us are also familiar with a Spreadsheet. For those who don't, a Spreadsheet is a very sophisticated table that can store formulas in it's cells, relate between the cells and many more feature. Between the endless functionality of the Spreadsheet and the non functionality of a simple table, there's an intermediate level. The control in this level is called a Grid, GridView, GridList and many more names that contain the word Grid. The common functionality that a grid has is Paging, Sorting, Grouping and Filtering. Some would also expect their Grid to do more, like Editing and Selecting. The Paging divides the page to a constant number of rows in a 'page', and applies navigation between those 'pages' in the bottom of the Grid. Common Buttons for a Pager are next - previous, first - last and page number which jumps to a page and tells you what 'page' you are viewing now. Sorting is usually by clicking on the title of a column. A first click is for ascending and another for descending.  Grouping can be by dragging a column title to a certain place, called Grouping Panel. When the grid is grouped by a column, each row represents a group of other rows. This group of rows can be expanded to view all the rows in the group. Filtering is usually a drop down below each column name, where you pick the value to be filtered by. Advanced Filtering can contain TextBoxs for specifying custom strings for filtering the Grid, or even Filter Builder which is a robust control itself. Editing is the ability to insert, delete and update rows in the grid. This can be archived by one of two methods: PopUp and Inline Editing. The PopUp is a separated Panel, and Inline means that the row transforms to "edit mode". Selecting can be implemented by clicking a row or by placing a CheckBox in each row. Selecting refers both to single row and to multiple row selection. When a row or more is selected, several actions can refer to it, for example: batch deletion of rows. Many more features are available with today grids in the market, and it keeps grow on every release.

Menu

Menu by DevExpress

A Menu is a list of items allowing you to navigate in an application and invoke certain operations. In a Menu there can be many levels of Child Menus that pops out by rolling over or clicking a menu item. Menus are usually at the top of the page; however there are also many Side Menus (left and right). A special type of Menu is the Context Menu, which pops out by right clicking on some feature in the application. The items in the Context Menu are related to the feature it was clicked on.

BreadCrumbs

BreadCrumbs by JQuery

When an application is very branched, using a menu is not enough. The BreadCrumbs shows the single hierarchical path that the page you are watching belongs to. In some scenarios, a page can be accessed from more then one hierarchical navigation path, but the BreadCrumbs usually represents the "main" navigation path to it. BreadCrumbs control is an interactive feature, and clicking a node in it navigates to desired page. The use of BreadCrumbs is very common in Wizards, as they are characterized by a small amount of Wizard Steps.

Splitter

Splitter by DevExpress

The Splitter control splits it's container to two or more parts. It can be either horizontal or vertical. The Splitter Rule can usually be dragged to increase one side over another. Another method for resizing the areas created by the Splitter is by a fixed interval instead of dragging. This may be by clicking a small Button that is usually placed in the middle/ center of the Splitter Rule.

DatePicker

DatePicker by Dojo Toolkit

The DatePicker, AKA Calendar is a complex yet useful and common control. Instead of specifying a certain day by typing it into a date formatted Masked Edit TextBox, the DatePicker offers the user a graphical and intuitive interface to pick a day using the Day Buttons. The DatePicker usually allows you to navigate between days, months and years. The navigation can be by Pager arrows or in any other way. Some customized calendars can disable irrelevant days, e.g. a DatePicker for working days may let you select Mondays to Fridays only.

Slider

Slider by Dojo Toolkit

A SliderScaleBar or a TrackBar takes a range of numeric values and put them in to linear scale. The TackBar must have minimum and maximum values, and it is highly recommended that you will use constant intervals between the Scale Marks. Using tiny Scale Marks obligates the designer to add a TextBox that specifies the current number and allows to set the number by typing rather than scaling. TrackBars can also describe range by having Rulers (a minimum and a maximum). Most of the TrackBars are horizontal or vertical but some are round like a Gauge.

Tree

Tree by Essential Objects

In a TreeView (or simply, a Tree) there are Root, Branches and Leaves. Root and Branches can be expanded to get, in a hierarchal structure, the Branches and the Leaves in it. Some TreeViews hide the Root so that the first Level in the Tree can be more than one Node. The most common use of this control is Files and Folders explorers.

Tabs

Tabs by YUI

 Tabs are a set of Buttons, in which each Button is associated with a Panel. Some may direct this Button – Panel combination as TabPanel. The Button in this case is considered as a Header, and the Panel is the Content. As only one TabPanel can be visible at a time, clicking the TabPanel’s Header brings it to front along hiding the previous focused tab. When the number of TabPanels is large, the Headers are either divided to rows or use a Pager to scroll between the headers.

Ellipsis

Ellipsis in Visual Studio

When a control depends on a dialog, it's not recommended to embed the dialog in your Form. It is suggested that you use an Ellipsis, which is a small Button that is placed next to the relevant control and invokes the dependent dialog. At the end of the dialog, the result is displayed in the control. The Ellipsis Button can hold textual values like '...', '+' and 'Browse...' or an image that gives the user a hint about what the dialog is all about. Common controls that use Ellipsis are part of the Upload File control and the Calendar control.

Tooltip

Tooltip from Visio

Tooltip is a callout text coming out when rolling over a control on the page. Advanced Tooltips can have custom duration of mouse staying on the control before prompting it out. The callout usually contains a short description or even help regarding the rolled over control.

ListBox

ListBox by Telerik

A ListBox is the DropDown's step brother. It displays items and lets you pick them by clicking each. The ListBox, however, is built to enable Multi Select on the items in it. Thus, clicking a selected item unselect it.

ColorPicker

ColorPicler by Telerik

Although ColoPicker is rare in some applications, when picking a color is needed, the ColorPicker is a must. ColorPicker comes in various of implementation ways. It can be a regular DropDown ot ListBox where each item is a color. It can be a Panel with some Color Plate in it, and the user can pick one. Sophisticated ColorPickers can have additional controls in it, in order to specify a numeric value of a color (RGB, CMYK). Those additional controls can be a TextBox or a TrackBar and are directing advanced users.

Captcha

Captcha by Telerik

A Captcha is a new age control that was invented for security reasons, mostly in the field of the Internet. Robots and other malicious softwares that use automatic form submission has forced websites to put some sort of 'human recognition' to avoid those softwares from cracking their inventory. With this long introduction, you've probably understand that a Captcha can be almost everything as long as 'human recognition' is involved with it. Therefore, we'll only introduce the most common Captcha- the kind that is text recognition based. It has an Image control, a TextBox and a Read Button. The Image displays some distorted letters in it, which frequently has no meaning (even before being destroyed combining the letters together didn’t bring a word). This ensures that only a human can read this Latin - Gibberish and type it in the TextBox. If the user can't understand what's written, the Read Button put those letters into voice for him. Most Captchas are not case sensitive.

Toolbar

Toolbar by Telerik

A Toolbar is basically a set of controls ordered in one or more lines, horizontal or vertical. Common controls in a Toolbar are Tools, Commands and DropDowns. Commands are no different than Buttons, it's just a new dress when the Button is in the context of Toolbars. Tools are two state Buttons (active/ inactive). Bringing a Tool Active, changes the Mode of the application and therefore the Mouse Cursor. The action can take place only after the user has finished using his Tool. Toolbars can be found in applications that has massive editors such as TextEditors, ImageEditors and Geographical Maps. In some cases, Toolbars act like Floating Panels in the way that they can be dock and float in the application.

Ribbon

Ribbon by SyncFusion

The Ribbon is a set of Buttons and Toolbar order in Tabs. The ribbon allows you to categorize set of a action. Ribbons are most familiar as from Microsoft Office 2007, though they where before. Complex new age applications choose Ribbons over Toolbars.

Accordion

Accordion by Rico

An Accordion is basically a light weight alternative for the Tab control. It is built out of Accordion Panes, each has a Header and a Content. Initially, Contents are hidden and the Accordion control is a list of Headers. Clicking each Header shows it's Content, and hides an open Content if there is such. Hiding and showing Contens are usually implemented using fancy sliding Animations that reminds ac accordion motion. Though it's common that only one Accordion Pane is completely visible (Header + Content) at a time, some Accordions my not automatically hide the opened Content while showing another. Thus, clicking on an opened Accordion Pane's header closes it. Thise kinds of Panes are also known as Collapsable Panels and the show/ hide actions are referred to as Toggle action.

Vlidation

Validator by MooTools

Validators extend all kinds and types of input controls. They are built to check whether the input in the control is OK. It can check things according to coded logic, like if an EMail is in the right format. It can also check things against the server, like whether a name is on some long list. The validation process usually takes place when a control loses it's focus or when a Form is submitted. Validators can come up in various UI implementation ways, the commons are image (placed next to the control, text as a tooltip), text (next to the control), and as Validation Summery (collective place for all the controls in the Form). Some includes Animations like blinking the relevant control or fading it to red).

ProgressBar

ProgressBar by Infragistics

When a progress takes too much time, we can't afford just let it be. The ProgressBar is one of the most valuable controls on your Form when actions are not immediate. The ProgressBar is generally an Animation that is played in repeat to keep the user busy and forget about the time passing until the desired result received. The ProgressBar can be placed next to the lingering control, in a central place (for all the controls) and in a Modal PopUp (which also called Loading Panel and Progress Panel). Most of the ProgressBars are implemented as a horizontal or round Animated Giffs (a .gif image file built with several ordered frames). Advanced ProgressBars draws a relative graphic for the progress of the action, and may even display the percentage of the progress.

You forgot Marquee

Saturday, August 13, 2011 3:40:12 PM unknown
A Marquee is a place for hot news.

Good list.

Friday, August 26, 2011 7:18:46 PM Johnny Doe

I would have added a Player control. Maybe two player controls- one for videos and one for sounds.

This should go on to wikipedia

Saturday, October 08, 2011 8:04:29 AM Pinya

Way'd'go man

Comments are closed on this post.
Site Map | Printable View | © 2008 - 2014 Developers Talk .NET | Powered by mojoPortal | HTML 5 | CSS | design by dcarter