Code Scene

Basic CSS Forms with Row Highlighting

2009-06-18T20:12:00Z

A friend of mine recently asked me about creating forms with XHTML/CSS and since I've been recycling some simple form code for a while now I thought I'd share it. I've also seen a lot of sites that are standards-compliant that still use tables to layout their forms when it's not all that difficult to do it with some CSS... so here's a basic demo.

First off, we'll have some HTML for our form... Basically what we're going to do is wrap our form fields and labels (because all fields need associated labels) in some div and span tags which we'll then style with CSS.


    
        
            First Name:
            
        
        
            Last Name:
            
        
        
            Email:
            
        
        
            Zip:
            
        
        
            
            
                I would like to be contacted periodically to receive more information.

Next we'll use some CSS to float the labels and form fields next to each other and give them a simple background color.

div.formRow { width: 550px; overflow: hidden; clear: both; margin: 0 0 3px 0; padding: 5px 0; font-size: 12px; background: #efefef; }
	div.formRow span.formLabel { width: 125px; font-weight: bold; text-align: right; float: left; }
	div.formRow span.formControl { width: 405px; text-align: left; float: right;  } 
	div.formRow textarea { width: 300px; height: 120px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	div.formRow input.formButton { background: #666; font-weight: bold; color: #fff; }
	div.formRow label { display: inline !important; }
	.currentRow { background: #ffc !important; }

Lastly, we'll use a simple jQuery function to highlight the row of the form field you're in. This works by applying/removing a CSS class when you click in/out of form elements. I use a class of "focusable" on the form field itself as the selector for jQuery to find and apply the function.

	$(function(){
		$('.form .focusable').focus(function(){
			$(this).parents('.formRow').addClass("currentRow");
		}).blur(function(){
			$(this).parents('.formRow').removeClass("currentRow");
		});
	});

That's it. Note that this is a pretty simple example. It doesn't include any validation or tooltip descriptors of form fields and certainly isn't meant to be the definitive guide on CSS forms. It's just some simple code that you can use a starting point to get a nice looking form up very very quickly.

See a demo of this CSS form code in action.

Xenocode Browser Sandbox - Run any browser from the web

2009-06-16T20:11:24Z

I've blogged before about services such as BrowserCam which you can use to test your websites across browsers and platforms. Screen capture services are increasingly hard to use since many websites these days rely on JavaScript and AJAX functionality which can't be tested by a screenshot. Remote access solves that problem but that can often be time consuming and tedious. Wouldn't it be great if you could just run the browser on your machine?

Thanks to Xenocode's browser sandbox you can do just that. Xenocode is an application virtualization system that allows developers to make their applications available in virtual executables that can be deployed pretty much anywhere, such as via the web or on a USB key. It's pretty cool technology and as a showcase, they currently have a browser area where you can run multiple browsers simultaneously without having to install them on your machine.

This browser sandbox doesn't have the myriad of browser/platform combinations that BrowserCam offers but let's face facts... most of us developers spend the majority of our time trying to make sure that our sites and apps work in IE6. Xencode will let you open IE6 (as well as 7 and 8) right on your desktop so that you can easily test, tweak, and troubleshoot your code. It's a great asset to any developer's toolbox.

Visit the Xenocode Browser Sandbox

Code Scene gets a facelift

2009-05-02T13:21:41Z

It's hard to believe that I started this blog way back in 2005. Several years later I decided it was time to give Code Scene it's first ever "redesign". I use the term redesign lightly since A) I am definitely not a designer and B) it doesn't look radically different than before.

Here are a few of the changes on the site:

The site is now wider to support a more standard 1024x768 resolution
I've added an addthis.com widget and links to my social networking profiles.
I've joined the Free The Web movement in boycotting IE6. There may be a few IE6 problems with the new templates but I've stopped caring.
I'm using jQuery UI for the accordion and tabbed panels in the templates.
Added search keyword highlighting using the FastSearch plugin for Movable Type.
Moved hosting companies once again, this time to Media Temple.
Added code highlighting for any code samples on the site, courtesy of SyntaxHighlighter by Alex Gorbatchev.
Created a mobile version of the site at m.codescene.com using MoFuse and a mobile redirection script.

I'm still making some tweaks and adjustments to the site but let me know what you think or if you find something wrong.

Aptana Studio makes jQuery so much easier

2009-04-17T01:15:54Z

I use Dreamweaver for XHTML/CSS work and Visual Studio for ASP.NET. You can say what you want about either of them or about the purity of hand-coding in Notepad, but the reason I use programs like that is primarily because of their "intellisense" and code-complete features. I still hand-code all my XHTML & CSS but using Dreamweaver allows me to type the code exponentially faster. I type "m" and it fills in "argin" for me. This might seem trivial but when you spend your life at the computer this adds up to thousands of saved keystrokes a week. Code completion features can also be a great learning tool for junior developers and developers getting used to a new language.

Pretty much every web project I've done recently has involved some sort of jQuery coding. There are some plugins available for Dreamweaver and Visual Studio to add code-complete for jQuery but as of this writing I haven't found any that I love. Enter Aptana Studio.

Aptana Studio is full-featured IDE with a vast array of features for coding in XHTML/CSS, PHP, Ruby on Rails, Python, and more. It also features integrated FTP, JavaScript debugging with Firebug, a DOM navigator, and complete set of database tools. It's a fantastic program, it runs on Windows, Mac, and Linux, and best of all… it's free. (There is a $99 "Pro" version for hardcore users but the free version has an incredible feature set)

So while there are dozens of reasons to give Aptana a download, the reason I love it right now though is because it has an awesome code assist function for jQuery. For those of you not using jQuery it also supports and/or has plug-ins for Prototype & Script.aculo.us, Dojo, Ext JS, YUI, MooTools, and pretty much anything else you can imagine.

Here's how to enable code assist for jQuery in Aptana Studio

Open Aptana Studio
Click Window > Preferences
Expand the Aptana node, then the Editors node, then the JavaScript node
Click on Code Assist
Check the boxes for libraries you wish to use
Click Okay and restart the program

Overall Aptana Studio is a great program and a viable alternative for other development environments, especially if you don't want to shell out hundreds of dollars to Adobe or Microsoft.

Download Aptana Studio here.

Prepping Photoshop Files for Development

2009-04-08T22:31:41Z

As a developer I work with many different designers. Often times I'll just be given a zip file full of Photoshop PSD files to cut up and turn into XHTML/CSS/JavaScript templates. How the PSDs were created will determine how long it will take to build them. If you're a designer and you're handing Photoshop files off to a development team, here are six quick tips that will make the production easier. This should in turn save you money since it will take the developer less time.

Use multiple layers - Much of web development involves turning elements on/off to export transparent images and background graphics. Having multiple items all on the same layer makes this process more difficult and more time consuming.
Name and group your layers - When creating new layers be sure to give them proper names. If your logo consists of twelve different layers named things like "Layer 4 copy" and "Shape 16" this will make things much harder than if you combine them all into one layer or group named "logo".
Delete unused layers - Often times during the design process a designer will try different techniques before settling on a final design. By making sure that you remove all unused layers before sending the PSD to the developer you can ensure there will be no confusion over the final design.
Create all rollover and active states - If your design has different states for nav buttons, include all of them for each and every item in the nav, preferrably in named layer groups. If you only include one nav item to illustrate the idea then you force the developer to create the other states. Depending on the design and the developer's Photoshop skills this will often take longer than creating them yourself.
Include any non-standard fonts - If you're using a non-web font for things like headers or nav items, include those font files with your PSDs. It's likely that your developers will need them to create additional graphics and/or to include in sIFR files. OpenType fonts will help ensure that they can be opened on Macs or PCs
Use the notes feature - If you have JavaScript functionality in mind for things like rotating promos or an accordion nav you can annotate your Photoshop file by adding notes. These can help eliminate confusion and ensure you get what you want without wasted hours.

By following those rules and cleaning up your PSD files before you send them on to development you'll make sure that the development process goes as smoothly as possible. This saves time, money, and keeps your development team happy.

A Better Movable Type Search Feature

2009-01-27T00:53:14Z

I love Movable Type and have used it for dozens of sites and blogs over the last several years. With each release the platform gets better and better but one thing that's always bugged me is that while the majority of the code is now PHP-based the search feature still relies on a Perl script.

[EDIT: As a Twitter follower pointed out... MT is NOT mostly PHP-based which is true. What I meant to say was that the front-end can be published to a mostly PHP-based site, except for certain things like the serach feature]

While this probably isn't an issue for most users, advanced users will find this somewhat limiting. Most of the templates I develop include various bits of PHP code in them. Since the search feature runs as .cgi none of my PHP code will execute. In order for my site to function I have to have a separate (often stripped-down) template just for the search feature.

Fast Search from MT-Hacks.com is the solution to this problem. It's an easy to use plug-in that will allow you to use PHP in your search template. That alone is reason enough for me to use it. It does however, provide a whole bunch of other features such as faster searches, pagination, and search term highlighting. You can use the plugin for free provided that you include a message noting that your search results are powered by Fast Search. Otherwise, non-commercial licenses are $33 and commercial licenses are $97 for up to 5 blogs... a steal for a plug-in that solves one of Movable Type's biggest issues. Find out more or download the plug-in at the MT-Hacks Fast Search page.

Movable Type veterans will note that commenting is also done via a Perl script and suffers from this annoyance as well. Ryan Taylor at Havoc Inspired has a simple but brilliant solution for this problem.

Being able to include custom PHP code into ALL of your Movable Type templates opens up some new doors for developers making Movable Type and even more robust platform.

Z-Index problem with drop down menus in Firefox 2

2009-01-11T20:10:24Z

I spent several hours this week troubleshooting an obscure Firefox 2 issue so I'm posting it here in case anyone else has the same problem.

Like many people I use the Suckerfish method for creating dropdown menus in my web projects. I've used it on dozens of sites over the last couple of years without any problems until a few days ago. I had a new site, setup the way I normally do. The site worked fine in every browser I tested in except for Firefox 2, even IE6 worked fine. The problem in Firefox 2 was that my dropdown menus would appear underneath and obscured by all of the content below them.

My first thought was to check the position and z-index attributes on all of the elements but that did nothing to solve the problem. After several hours of Google searching and some good old trial and error I finally nailed the issue down. On the "header" div tag, which contained the dropdown nav, there was an extraneous "overflow: hidden;" attribute. I use overflow: hidden on container elements to clear floats but in this case I didn't actually need it. Removing that attribute instantly fixed the problem.

I'm not entirely sure why Firefox 2 choked on this attribute when every other browser rendered things just fine... but if you run into a similar issue check the overflow elements first. You may find the problem there.

Microsoft Releases ASP.NET Charting Control

2008-12-06T16:37:10Z

I missed this a week or so ago when it happened so it may be old news by now but... Microsoft has recently released a free set of charting controls for ASP.NET 3.5.

While ASP.NET has long had a wide variety of excellent charting options from 3rd-party vendors such as ComponentArt and Telerik, this is the first robust suite of charts available directly from Microsoft. To sweeten the deal, these controls are completely free while 3rd-party tools are typically expensive and may be cost-prohibitive for smaller projects.

The controls support pretty much what you'd expect from a charting suite...from regular pie and bar charts to more complex charts like candlestick displays for financial data and AJAX-enabled interactive charts. The controls dynamically render cachable image files to display the charts in 2D and 3D formats which look clean and professional. They also support both static data defined in the control itself as well as databinding syntax for creating charts dynamically from data within your database.

It's nice to see Microsoft continue to build upon the ASP.NET platform by continuing to release new features and controls like this.

Download the Microsoft Chart Controls

Download the Chart Controls Add-on for Visual Studio 2008

Download the Chart Controls Samples

Download the Chart Controls Documentation

Check out the Microsoft Chart Control Forum

Microsoft TechDays - Day 1

2008-10-28T18:28:54Z

Today I attended Microsoft's TechDays in Northern Virginia, an event designed to promote awareness and adoption of some of Microsoft's newer technologies. I sat through the developer track which consisted of three sessions.

Part 1 - Introduction to ASP.NET AJAX

While I was most excited for this session it was, as the name implies, very introductory. The fact that AJAX.NET has been out for so long and they're still doing "What is AJAX?" presentations perhaps speaks to the lack of adoption in the Microsoft community.

They did talk briefly about some of the new features such as AJAX History which can allow for bookmarking and/or use of the back button in the middle of AJAX processes and script combining which can compile your .js files together on the server to decrease download time.

The most exciting topic of discussion however, revolved around Microsoft's recent decision to ship jQuery with Visual Studio. While this is somewhat old news, I did learn that there is an intellisense plugin for jQuery in Visual Studio that was released just yesterday.

Just download jquery-1.2.6-vsdoc.js and then add a reference to it by placing the following line at the top of your jQuery JavaScript file:

/// <reference path="jquery-1.2.6-vsdoc.js" />

Part 2 - Introduction to Silverlight 2

I've never been sold on Silverlight and today's presentation really didn't do much to change that opinion. If you're not familiar with Silverlight, it's a plugin from Microsoft, somewhat similar to Adobe's Flash plugin, except that it's built on the .NET framework. In theory this seems like a great idea but in practical application I'm not sure it's a viable solution just yet. For starters, many people still don't have the plugin. Secondly, the learning curve for designers and developers is much higher than Microsoft would like us to believe. Lastly, most of what Silverlight does can be accomplished through other means like AJAX or Flash.

Overall it's an interesting concept and it's definitely come a long way since it's release last year but I'm still on the fence as to whether I'd acutally use it for a project.

To find out more and to keep tabs on this new technology, visit Silverlight.net

Part 3 - Servers and Services

This talk was largely about the enhancements made in IIS7. This looks to be a complete overhaul of the server environment with ASP.NET baked in directly this time, making it a "first class citizen" as the Microsoft team put it. This will lead to better performance and easier customization. (Never fear, there is a "Classic Mode" to the pipeline for backwards compatibility)

All of the configuration is now XML-driven as well so it's not only easy to update but also easy to move or share configuration options between servers.

Lastly, the new integrated approach to ASP.NET means that all modules can now provide services for all content types since everything runs through the .NET process. So for example, if you enable forms authentication, all of your images, videos, and other non-aspx files will also now be protected.

-----

Overall it was a decent event. The Thursday session has talks about REST services and the new MVC framework so I'm looking forward to that as well.

Using the Constant Contact API with ASP.NET

2008-09-25T22:06:12Z

Several of my clients use Constant Contact to manage their email newsletter subscription lists. It's a cost-effective solution to handle user signups, send and track emails, and manage unsubscribe requests. The default web form that Constant Contact gives you however, leaves a lot to be desired in the design department. For direct integration into your website you need to leverage their API which, at the time of this writing, is somewhat poorly documented and doesn't include any code samples for ASP.NET.

Below is a simple code example of how you can use the API to embed a simple form on your site that will submit a request to Constant Contact and add a user to your list. I'm sure there is much more you can do with the API but this is the basic requirement for most implementations.

Step one is to request an API key from Constant Contact. Go to http://developer.constantcontact.com/apikey/login and input your username and password to generate the key that you'll need for API access.

We can now use this authentication to make an HTTP POST to the Constant Contact server and submit our user's form data.

Step two will be to setup a form with validation controls that will allow a user to enter their first name, last name, email address, and other fields that you may want to capture (like their company name). If you're reading this post I'm assuming you know how to setup an ASP.NET web form. If not, buy Stephen Walther's book.

Step three is the actual code you need to transmit the data that the user entered into the form.

Imports System.Net
Imports System.IO

'Setup your variables
Dim sUsername As String = "CONSTANT_CONTACT_USERNAME"
Dim sPassword As String = "CONSTANT_CONTACT_PASSWORD"
Dim sUri As String = "http://api.constantcontact.com/ws/customers/" & sUsername & "/activities"

Dim sListUri As String = "http://api.constantcontact.com/ws/customers/" & sUsername & "/lists/1" 'If you have more than one list, change this number to whichever list you're targeting
Dim sAPIKey As String = "CONSTANT_CONTACT_API_KEY"

'Setup an HttpWebRequest to send the data
Dim address As New Uri(sUri)

Dim request As HttpWebRequest = TryCast(WebRequest.Create(address), HttpWebRequest)
request.Credentials = New NetworkCredential((sAPIKey & "%" & sUsername), sPassword)
request.Method = "POST"
request.ContentType = "application/x-www-form-urlencoded"

'Build an encoded string of the data to pass to Constant Contact

'More info on this can be found at http://developer.constantcontact.com/doc/activities
Dim data As New StringBuilder()
data.Append("activityType=" + HttpUtility.UrlEncode("SV_ADD", Encoding.UTF8))
data.Append("&data=" + HttpUtility.UrlEncode(("Email Address,Email Type,First Name,Last Name,Company Name" & Chr(10)), Encoding.UTF8))

data.Append(HttpUtility.UrlEncode((txtEmail.Text & ",HTML," & txtFirstName.Text & "," & txtLastName.Text & "," & txtOrganization.Text), Encoding.UTF8))

data.Append("&lists=" + HttpUtility.UrlEncode(sListUri)

'The "guts" of the code to execute the request and return a response
'The response (returned as 'strResponse') will be XML.  You can parse this for status messages if you like, or just ignore it.
Dim byteData As Byte() = UTF8Encoding.UTF8.GetBytes(data.ToString())

Dim st As String = String.Empty

request.ContentLength = byteData.Length
Using postStream As Stream = request.GetRequestStream()
	postStream.Write(byteData, 0, byteData.Length)
End Using

Using response As HttpWebResponse = TryCast(request.GetResponse(), HttpWebResponse)
	Dim reader As New StreamReader(response.GetResponseStream())
	st = reader.ReadToEnd()
End Using

Step four would be to provide the user with some sort of confirmation. Perhaps redirect them to a "thank you page" or turn some panels on and off to signal completion of the process.

That's it! I'm sure there are other ways to do this, probably more elegant ones, and I'd love to hear from anyone who's done more Constant Contact integration work with .NET. If you're just looking to quickly and easily integrate a sign-up form on your site though, this should get you started.

Special thanks to "cbaugh" on the Constant Contact forums who provided a C# example which was the baseline for this VB code example that I've documented here.

The 5 hidden costs of running a CMS

2008-08-13T22:18:29Z

Just a quick post to highlight Paul Boag's great article over on ThinkVitamin entitled The 5 hidden costs of running a CMS. I've blogged about problems with content management systems before so it's good to know that I'm not the only one who feels this way. I won't say that CMSs are always a bad idea but I do think business managers should read this article before making snap decisions and thinking that a CMS will solve all their problems.

Review: Telerik RadControls for ASP.NET AJAX

2008-08-05T03:30:39Z

While the number of 3rd-party components built on the .NET framework seems to rise by the day, Telerik continues to remain an industry leader, delivering a very comprehensive set of tools at a reasonable price. As the owner of a small web business I'm constantly looking for ways to get complicated tasks done quicker and easier thereby providing excellent solutions for my clients at affordable rates. The Telerik RadControls suite allows me to do precisely that.

I'd played around with Telerik's controls in the past and had been impressed so when a recent client project called for a custom ASP.NET CMS setup, I decided that it was time to see what the updated RadControls toolset was all about. In a word... awesome. While the old RadControls for ASP.NET is still a great product, the new RadControls for ASP.NET AJAX versions are just amazing.

The online demos really speak for themselves and say more about the product than this blog post ever could but I'll give it a shot. The Editor control is the best I've seen with it's easily customizable interface and built in asset management and image editing dialogs. The Grid control is everything the .NET GridView control should be with it's almost limitless features. The Dock and Window tools enable you to effortlessly create portal sites with drag and drop windows... and on and on and on. Hit the demo site and see for yourself.

$999 for a license (plus subscription and source code) isn't exactly pocket change but consider what you get for that money. With 22 controls in the suite, that works out to less than 50 bucks per control. Similar components sell for hundreds of dollars apiece. The best part though, in my opinion, is that the license is per developer. So once I buy the toolset, I can use any or all of the controls in as many projects as I want. I can use them across multiple servers and domains and for various different clients.

Lastly, as you would expect there is a slight learning curve to being able to effectively utilize the product. Telerik's immensely detailed documentation, vast library of training videos, and online forums and knowledge base will all help you get up and running as soon as possible however. The few hours you'll spend learning the controls will save you countless hours down the road.

If you're an ASP.NET developer, you owe it to yourself to check out Telerik RadControls. Once you start using them, you'll wonder how you ever got by without them.

Running your own web development business

2008-07-25T20:45:02Z

I few months ago I left my full-time job to start a small web development business of my own... so far so good. Things are going well and I'm learning a lot about business aspects that were foreign to me just a short time ago.

Along the way I've met a lot of folks interested in becoming more serious about their freelancing gigs and/or starting small companies of their own. This post is intended to be a quick resource list for people like that. I quickly learned that I couldn't do everything on my own but thankfully there are lots of websites out there that will help you get the ball rolling quickly.

Freelance Switch
Blog, forum, podcasts, job board, etc. A veritable one-stop-shop for all sorts of information related to getting serious about freelancing. Add it to your Netvibes account today.

MyCorporation.com
When it's time to file the paperwork to register your business as an LLC, get an EIN number, apply for a trademark, etc., these guys can help you sort through all the legal jargon much cheaper than hiring an actual lawyer.

Freshbooks
Once the work comes in you'll need a way to log your hours, track your expenses, and most importantly, invoice your clients. Freshbooks provides an amazing web based service that allows you to do all that and more for a very affordable price. I would be lost without them.

Mozy
If your computer crashes and you lose a client's files they will NOT be happy. Make sure you have a backup plan in place. Mozy is a robust, secure solution that also happens to be cheap and simple to setup.

DropBox
Still in BETA at the time of this post but DropBox looks to be one of the most easy-to-use ways to synchronize files between computers.

Google Docs
An incredibly simple way to share and collaborate on documents with your partners, employees, or clients. It also happens to be free. Watch a great video on Google Docs.

FreeConference.com
Love them or hate them, conference calls are unavoidable in this business. FreeConference.com lets you setup professional conference call lines for free. No need to buy an expensive phone system.

Microsoft Partner Program
If you're an ASP.NET shop, consider becoming a Microsoft partner. You'll get access to news, training materials, and discounted software like the Microsoft Action Pack.

Zazzle
Easily print your new company's logo on a t-shirt, mousepad, coffe cup, etc.

FileTaxes.com
Already so big that you're hiring freelancers of your own? FileTaxes.com can take care of sending the 1099 forms you'll need for tax purposes.

-----

Those are some good resources to get you started. As I become more involved in all things business related I may post a follow-up with anything new I've learned. If you feel I've missed an obvious resource, place it in the comments below.

Compressing Prototype and Script.aculo.us

2008-07-08T14:46:46Z

If you're doing web development these days there's a good chance you've used the Prototype and Script.aculo.us JavaScript libraries. They're both excellent and free libraries which make time-consuming JavaScript tasks much much simpler.

The only problem with them is that they're not exactly small. If you just want to add some simple scrolling or fading effects to a page, you're looking at adding 160KB of JavaScript files... ouch.

Enter Protoaculous, a version of the scripts combined and compressed to minimize load times. The compressed version now adds only 39KB to your site. If all you need is the Script.aculo.us effects library you could use a version which weighs in at only 27KB.

I used it on a site I recently built and everything seems to work great. I highly recommend using this tactic to minimize the load times on your sites.

Download the Protopack zip file here

Side note: A recent post of the WebDriven Blog alerted me to another option to solving this problem in Google's new AJAX library API. With this, you can let Google host the prototype (or jQuery, mooTools, and dojo) libraries for you. In theory since these scripts will be pulled from Google's ultra-fast servers, it should help speed up your load times as well. I've yet to try this approach but would be interested in hearing from anyone who does.

Dreamweaver CS3 - InsertRecord.js Bug

2008-07-01T00:24:00Z

Another day, another random mind-boggling Dreamweaver crash.

A few days ago, I was working on a PHP/MySQL project. The project was simple and the timeline was short so I opted to use Dreamweaver's built-in functions to connect to my database and insert values from my form when a user clicked the submit button. I'd done this before and it's simple enough, but this time when I tried to do it Dreamweaver gave me this lovely error message:

While executing onChange in InsertRecord.htm, the following JavaScript error(s) occurred:

At line 646 of file "C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\ServerBehaviors\PHP_MySQL\InsertRecord.js": TypeError: name has no properties

An hour of searching Google didn't help me find a solution so I finally opened this JavaScript file and decided to figure it out myself.

The answer is surprisingly simple. It turns out that the problem was due to my form elements not having a name attribute. I typically write all my XHTML from scratch and generally just give all my form elements an ID attribute. The JavaScript that Dreamweaver uses to identify the form elements (and match them with their database fields) relies solely on the name attribute. Without it, Dreamweaver throws this not so graceful error message.

So there you have it. If you get this error message, double check that all of your form fields have proper names.