G25 Basic Form

Include:

Definition

This component is used for building simple forms.

Usage

A simple form with a basic stack layout, where labels are spaced to the left of fields.

There are five basic field types:

  1. Labeled input, which contain a label followed by a text input, password input, select menu or textarea.
    <div class="labeled-input">
  2. Checkboxes, which contain one or more labeled check boxes.
    <div class="checkboxes">
  3. Radio buttons, which contain a pseudo-label followed by two or more labeled radio buttons.
    <div class="radiobuttons">
  4. Vertically-stacked radio buttons, which contain a pseudo-label followed by two or more labeled radio buttons.
    <div class="stacked-radiobuttons">
  5. Submit buttons, which contain one or more submit buttons.
    <div class="submit">

There's also an additional type of section that can contain just information and no inputs.
<div class="info">

Horizontal rules can be used, if needed, to make the form's structure clearer.
<div class="hr"><hr></div>

Required fields should be indicated by using an asterisk icon, with the alt text of "(required)" so that screen readers can understand it, and the corresponding input should have class="required".
<img src="http://www-cdn.sun.com/im/ic_asteric.gif" alt="(required)" class="required-icon">

Error messaging is shown in variation 0, example 1, and can be used to redisplay the form and indicate an invalid submission.

Optionally, these classes may be used on text inputs to give consistency to the form: "short," "medium" and "long." These allow CSS to size the inputs appropriately. If all inputs use these, then the form fields will have a neater, lined up appearance, instead of a "ragged" edge.
<input type="text" name="middle_initial" class="short">
<input type="text" name="first_name" class="medium">
<input type="text" name="url" class="long">

Always make sure that labels are associated with their inputs. This is perhaps the most important accessibility feature for forms. Within the label element, make sure that the for attribute references the id attribute of the appropriate input element. Also remember that id attributes must be unique across the entire document. Alternatively, nest the field within the label. Here are examples: 

<label for="firstname">First Name</label>
<input type="text" id="firstname">

<!-- or -->

<label><input type="radio"> Yes</label>
<label><input type="radio"> No</label>

For more complex forms, <fieldset> and <legend> should be used to separate form inputs into logical groups. This improves accessibility and usability for the form.

v0 Basic Form

Products

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v0 x1 Basic Form, showing error message

Error message using the g29v0 Error Message component

Products

There was a problem with your submission. Not all required fields were filled in.

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v1 Basic Form With Options for Label Column Size

Identical to variation 0, but allows more room for long text labels.

Products

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v1 x1 Basic Form With Less Label Room

Identical to variation 0, but with narrower column for text labels.

Products

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v2 Basic Form Using Fieldset and Legend

Groups forms into logical subsections for accessibility and usability purposes.

Products

Enter the following information to register for a Sun Online Account. » Why Register?

(required) Indicates a required field

Login Information

Will be your username

6-36 Characters

Personal Information

You will need a valid Sun Partner agreement and will be asked additional questions.

Membership is free. Learn More »

Yes, I'd like to receive general communications from Sun on products, promotions, news, and events. Note: Your choice here will apply to all Sun Online Accounts with this email address.

General Terms of Use

If you agree with the Sun Online Account terms of use, please complete and submit this form.

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v2 x1 Basic Form Using Fieldset and Legend, Exhaustive Example

This example shows variations in the ways that fields can be labeled and arranged.

Products

Enter the following information to register for a Sun Online Account. » Why Register?

(required) Indicates a required field

Login Information

This will be your username

6-36 Characters, case-sensitive

Login Information (Alternate Presentation)

If inline help/tip text is so long that it wraps, then it must be presented in this alternate fashion.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam id orci. Curabitur ultricies gravida est. Praesent lacinia egestas diam.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Personal Information

You will need a valid Sun Partner agreement and will be asked additional questions.

Membership is free. Learn More »

Check all that apply

Yes, I'd like to receive general communications from Sun on products, promotions, news, and events. Note: Your choice here will apply to all Sun Online Accounts with this email address.

Big Text Area

General Terms of Use

If you agree with the Sun Online Account terms of use, please complete and submit this form.

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v3 JS Calendar Picker Field

If you add class="jscal" to a text input field, it triggers calendar picker behavior onfocus of the text field.

If the text field already contains a string representation of a date, AND if it's in a format parseable by JavaScript's Date.parse() method, that date will be used as the hilighted date within the calendar picker.

Products

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v3 x1 JS Calendar Picker Field, Customization Options

You can customize the calendar picker in three ways:

  1. i18n: Month names, weekday names, and the default date format can be customized in menucontent.js.
  2. Start date and end date: You can disable the calendar picker for dates before a certain date after a certain date, or both. The input is coded like this: <input type="text" class="jscal range-foo">. Then somewhere on the page should be an element with id="foo". Within this element, there should be one or both of: <span class="jscal-start">some date here</span> and <span class="jscal-end">some date here</span>. These dates must be parseable by JavaScript's Date.parse() method.
  3. Date format: You can customize the string representation of the date produced by the calendar picker. The default date format is "Mon D, YYYY" (e.g. Dec 25, 2008). More info on date format options. To customize the date format, the input is coded like this: <input type="text" class="jscal format-bar">. Then somewhere on the page should be an element with id="bar", containing the format.

    Date Format Options

    Shown below are date format symbols which get replaced by date information. Content in single quotes is not formatted, and the quotes are removed.

    D        1-31 (day of month)
DD       01-31 (day of month)
Dth      1st, 2nd, 3rd... (day of month)
M        1-12 (month of year)
MM       01-12 (month of year)
mon      jan-dec
month    january-december
Mon      Jan-Dec
Month    January-December
MON      JAN-DEC
MONTH    JANUARY-DECEMBER
wee      sun-sat
weekday  sunday-saturday
Wee      Sun-Sat
Weekday  Sunday-Saturday
WEE      SUN-SAT
WEEKDAY  SUNDAY-SATURDAY
YY       2-digit year
YYYY     4-digit year

// assuming today is Christmas 2008
foo = new Date().format("MM/DD/YYYY");   // foo evaluates to "12/25/2008"
foo = new Date().format("MM/'DD'/YYYY"); // foo evaluates to "12/DD/2008"

Products

Format: Month D, YYYY
No earlier than: May 13, 2007
No later than: July 20, 2007

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v4 Form w/ Show/Hide Based on Selector

<select> elements in a g25 component can be given class "showhide", which triggers show/hide behavior. Here's an example of the implementation: 

<select class="showhide">
	<option selected="selected">-- choose one --</option>
	<option class="#foo">The Foo Option</option>
	<option class="#bar">The Bar Option</option>
	<option>The Baz Option</option>
</select>
<span class="hidethis" id="foo">foo is good</span>
<span class="hidethis" id="bar">bar is better</span>

In this example, span#foo and span#bar both start out hidden since they're given class "hidethis". If the user selects the foo option, span#foo will show. If the user then selects the bar option, span#foo will hide, and span#bar will show. If the user then selects the baz option, both span#foo and span#bar will hide.

Note: If JavaScript is disabled, then all sections will show. (e.g. both span#foo and span#bar will show.)

Products

foo is good bar is better

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

v4 x1 Form w/ Show/Hide Fields Based on Selector

This example shows the same behavior applied to a section of fields.

Products

The following fields are required if requesting a trial extension:

The grey container and this red paragraph is only here to illustrate this component used in the D7 or PC1 components to give it a grey background color.


Copy the code below and paste into your text editor.

No Templates Reference this

Contact About Sun News & Events Employment Site Map Privacy Terms of Use Trademarks Copyright 1994-2006 Sun Microsystems, Inc.