Forms with CSS (2 of 3) – Styles

After doing the semantic HTML code for a form, as shown in “Forms with CSS (1 of 3) – HTML Markup“, your form will look like something like:

Form without Styles Applied

While this is usable, we can improve it by adding some styles. Here are the styles I added:

fieldset
{
display: block;
margin: 0 0 1em 0;
border: 0 solid #FFFFFF;
border-top: 1px solid #000000;
padding: 0 1em 1em 1em;
width:275px;
}

fieldset legend {
font-weight:bold;
}

fieldset label, fieldset input, fieldset select {
display: block;
width: 150px;
float: left;
margin-top: 8px;
}

fieldset label {
width: 6em;
padding-right: 20px;
}

fieldset br {
clear: left;
}

The resulting page looks like:

Form with Styles Applied

As you can see, you can drastically change the look of the form with just a few styles. If you wanted, you could add still more styles for additional formatting.

The styles for this example were adapted from the web pages “CSS2 – Tableless Forms” and “The Man in Blue > Experiments > Form Layout“. I only made a few modifications from these examples.

Related Articles:
Forms with CSS (1 of 3) – HTML Markup
Forms with CSS (3 of 3) – Checkboxes

Advertisements

Parameters in Stored Procedures

This tips comes from Doug Nelson, in his blog entry “Optional Parameters in Stored Procedures“. I’ve used this extensively in MS SQL. According to the documentation, it should also works in Oracle and mySQL.

[Update on 4/23/2008: I notice that the link to Doug’s post hasn’t been working lately, so I wrote an article “CASE Statements in SQL Query“, which covers some of the same concepts.]

To me, the most interesting thing is Doug’s posting is the clever use of the CASE statement. I follow his example in many of the stored procedures I write. By using this technique, I’ve saved a lot of time in trying to build where clauses for select statements, and it’s greatly cut down on the amount of SQL code I write.

Let’s say we have a table that contains a list of people, including firstname, lastname, address, city, state, zip. We want to search for people based on their firstname and/or lastname and/or the state they live in. We can do this with a single stored procedure by including parameters for the three possible search criteria . Simply determine the search criteria the user included (ie did they include a firstname in the search form), and pass that criteria to the stored procedure using the corresponding parameters. No more trying to dynamically build where clause based on what the use input into the search form!

Stored Procedures in SQL

Most of the projects I work on use MS SQL server as a data store. When setting up a database, I usually create stored procedures to interact with the database. There are a number of reasons I do this:

  1. Limit access to the database. By using stored procedures, we can give the web user account access to execute the stored procedures without giving them datareader or datawriter access. This means that the only way this account can interact with the database is through the stored procedure. Very much limits the possibility of getting hit by a SQL injection attack.
  2. All interactions with the database are parameterized. Again, this limits the possibility of getting attacked by SQL Injection.
  3. Keeps the database separate from your source code. Especially important if you have multiple applications that access the same database. This allows you to make changes to the stored procedure without making changes to the application(s). This works as long as you don’t change the parameters or structure of the return results of the procedure.
  4. Makes it easy to do multiple things with a single database call. You can even build transactions in the stored procedure when you need to ensure that all queries are successful once the first one runs. If one of the queries fail, then the entire transaction is rolled back.
  5. For projects with a Data Access Layer (DAL), the DAL is almost trivial to write. Simply call the stored procedures and pass back the results.

For some projects, using stored procedures can add too much complexity. However, I tend to error on this side rather than putting too much SQL into the application’s code.

Validation Groups

A cool feature of the validation controls in .NET is the property “ValidationGroup”. With this property, you can easily activate different validation controls based on which button is clicked.

For example, suppose you have a content page that has a search box. In addition, this page has a feedback form at the bottom of the page where you can rate “Was this page useful” from 1 to 5. The requirement for this page is that if you click on the search button, you must have entered a search term, and if you click on the rate page button, you must have selected a numerical rating.

To do this, you would add a required field validator for each of these of these fields. However when you test this page, you discover that when you click on the search button, it complains that you didn’t select a page rating, and when you click to page rating button it complains that you didn’t enter a search term. How do you get around this?

Use the ValidationGroup property. In the validation control for the search term text box and the search button, set the property ValidationGroup =”search”, and in the validation control for the page rating entry field and the page rating button set the property ValidationGroup=”pagerating”. This way, when you click the search button, it only runs the validation controls that have ValidationGroup=”search”, and it will not complain that there is not a page rating entered. Likewise with the page rating button.

Mission Style Clock

Some of you know that I enjoy woodworking in my spare time. I find it’s a good way get my mind off work for a few hours. It gets me away from e-mail/web pages/phone/IM etc. for a while.

Mission Style ClockOne of my most recent projects was this mission style clock. The clock is about 2 feet tall and 14 inches wide. It can either mount on a wall or be used freestanding, as seen here.

This particular clock is special because it was donated to a benefit auction for a friend who was seriously injured in a car accident last winter. Pam – I miss your contagious smile and laughter!