What are we facing?

I have forms with lots of fields and controls to request information from users. I want improve my forms by creating groups of related elements.

The Solution

The FIELDSET HTML element allows the grouping of related form elements. It is a nice alternative of a TABLE or DIV tag since it is created for this specific propose. The optional LEGEND tag specifies a description of the grouping.

Example:

<form action="InsertInfo.aspx">
     <fieldset>
        <legend>Personal information</legend>
        Name: <input type="text" />
        <br />
        Age: <input type="text" />
        <br />
     </fieldset>
     <fieldset>
        <legend>Subscription information</legend>
        <input type="radio" /> Year <br />
        <input type="radio" /> Six months <br />                       
        <br />
     </fieldset>
     <fieldset>
        <input type="submit" value="Submit"/>
     </fieldset>
</form>

Some external references

• HTML <fieldset> tag
• HTML Techniques for WCAG20: Grouping form controls
• Styling fieldset elements with CSS

What are we facing?

I want to publish source code listings in my website. These listings should be easy to read, visually attractive and I don’t want to spend a lot of time formatting them.

The Solution

Using a syntax highlighting library can save you lots of time while also delivering very nicely formatted results.

There are several options to choose from, ranging from server-side options like Actipro’s CodeHighlighter(ASP.NET) or Javascript based options like Google’s SyntaxHighlighter.

Formatting code using these libraries is very easy, for example, to present a snipped of C# code you only have to type the following:

1. Reference the library

<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css"/>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>

2. Annotate the element that contains the source code listing with the programming language name:

<pre name="code" class="c-sharp">
   public static int fact(int v) 
   {
      if(v == 0) 
      {
         return 1;
      }
      else
      {
         return fact(v-1)*v;
      }
   }
</pre>

3. Invoke the Syntax Highlighting script:

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

The final output looks like this:

Some external references

• SyntaxHighlighter: Free syntax highlighter written in JavaScript
• Actipro CodeHighlighter - ASP.NET Control
• GeSHi: Generic Syntax Highlighter
• GNU Highlight