Improving Form Markup

HTML & CSS
1

I have a web page that allows members to see and change their profile picture.

While it looks good to me, I fear that from an HTML semantics standpoint and an accessibility standpoint, I could do a better job! :blush:

The page is kind of busy, and seems to have 3 logical sections;

1.) See your current photo

2.) Decide if you want to delete your current photo OR upload a new one

3.) If you want to upload a new one, then choose the file and add a label.

Here is code for my “Change Photo” script…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- ################## DEBBIE ##################### -->
	<!-- HTML Metadata -->
	<title>Change Photo</title>

	<!-- Page Stylesheets -->
	<style>
		form label{
			display: block;
			padding: 1.5em 0 0 0;		/**/
			font-weight: bold;
		}

		#changePhoto{
			width: 640px;
			margin: 0 auto;
			padding: 30px 0 30px 0;
		}
		
		fieldset{
			border: 1.5px solid #AAA;	/**/
		}
		
		#changePhoto fieldset{
			padding: 0 3em 2em 3em;
		}

		#changePhoto fieldset legend{
			margin: 0 0 0 -2em;
		}

		form#changePhoto fieldset p#currentPhoto{
			margin: 20px 0 0 0;
			padding: 5px 0px 0px 2px;
			font-weight: bold;
		}

		form#changePhoto fieldset img{
			margin: 5px 0 0 20px;
		}

		form#changePhoto fieldset label#photoAction{
			margin: 30px 0 5px 0px;
			padding: 5px 0px 0px 2px;
			border-top: 1px solid #AAA;
			font-weight: bold;
		}

		form#changePhoto fieldset label.photoAction{
			display: block;
			margin: 0 0 8px 15px;
			padding: 0;
			font-weight: normal;
		}

		form#changePhoto fieldset div#upload{
			width: 70%;
			margin: 0 0 0 60px;
			padding: 10px 20px 20px 20px;
			border: 1px solid #AAA;			/**/
		}

		form#changePhoto fieldset p{
			margin: 0 0 0 0px;
			padding: 0 0 0 0px;
		}

		form#changePhoto fieldset div#upload label{
			display: block;
			margin: 0;
			padding: 15px 0 5px 0;
		}

		form#changePhoto fieldset div#upload label#newPhotoLabel span{
			font-weight: normal;
		}

		form#changePhoto fieldset input#savePhotoChanges{
			margin: 2em 0 1em 20px;
		}

	</style>
</head>

<body>

				<!-- CHANGE-PHOTO FORM -->
				<form id="changePhoto" enctype="multipart/form-data"
							action="" method="post">
					<fieldset>
						<legend>Change Photo</legend>

						<!-- Display Current-Photo -->
						<p id="currentPhoto">Current Photo</p>
						<img src='/uploads/'
												width='100'
												alt='Thumbnail of DoubleDee'
												title='Debbie sitting outside.' />
						
						<!-- Choose an Action -->
						<label id="photoAction" for="photoAction">Choose an action...</label>
						
						<label class="photoAction" for="photoAction">
							<input type="radio" name="photoAction" value="1"  />
							Do Not use a Photo
						</label>
						
						<label class="photoAction" for="photoAction">
							<input type="radio" name="photoAction" value="2" checked="checked" />
							Use a Custom Photo
						</label>

						<!--  Choose File to Upload -->
						<div id="upload">
							<p>For a custom photo, please...</p>

							<!-- Choose New Photo -->
							<label for="newPhoto">Select a Photo:</label>
							<input name="newPhoto" type="file" />
														
							<!-- Enter New Photo-Label -->
							<label id="newPhotoLabel" for="newPhotoLabel">Add a Photo-Label:</label>
							<input name="newPhotoLabel" type="text" maxlength="40" value="" />
						</div>

						<!-- Submit Form -->
						<input id="savePhotoChanges" type="submit" name="savePhotoChanges" class="button" value="Save Changes"/>

					</fieldset>
				</form>

</body>
</html>

Could you guys please help figure out how to improve the semantics and accessibility of the web page?

I am almost thinking that I need a nested Fieldset and Legend for the “Select a Photo” and “Add a Photo-Label” parts…

Sincerely,

Debbie

2

See your photo could simply be a part of the user’s area where the photo is, with a checkbox for the I-would-like-to-change-it. Could also be a link to the form or, as you have it, part of the form already.

I think ideally all the stuff about uploading and labelling the photo would only appear (whether ajaxy-loaded or simply CSS-hidden at first) if the user has checked the box I-want-to-change-my-photo. This could make the form more usable/sensible/easier cognitively.

Probably simply showing the upload input is fine, and again the labelleing part doesn’t mean or do anything unless the photo was successfully uploaded.

The labelling stuff could in fact be entirely separate: users might have uploaded a photo earlier and now want a (different) label.

I gotta run but what do you think of those ideas?

3

Thanks for the thoughts.

I don’t do JavaScript/AJAX. :wink:

I think my form looks good as is. (I see what you are saying, but since I am not using JavaScript and want this to be a “one-stop shop”, I think my design/layout makes the most sense.)

To clarify, what I was looking for help on is my HTML…

The form looks great to me, and the code also works fine, HOWEVER, I don’t know that I would win any Semantics awards!!

For example, I am wondering if I should have a Fieldset nested inside my current Fieldset?

And what about having 2 Legends?

Part of the reason I am asking for help here, is that in an earlier thread, Ralph got me to thinking that maybe I wasn’t doing my HTML correctly…

Stacked Radio Buttons

Sincerely,

Debbie

4

Ah ok.

Still going with the these-are-almost-three-separate-questions idea, I wouldn’t nest fieldsets, but if you want to define your input groups more separately then you can have two or three next to each other.

Looking at your form again, I’d say two: one for the I-want-to-add/change-a-picture, and another with the upload-and-label parts.
The legend for your second fieldset would be your p (though I’d have both choices in there then: Select Existing Or Upload New Photo or something. Though that’s just a personal feeling. You’re totally allowed to have ellipses and sentence fragments in legends.

I use fieldsets to group related questions but also often for radio groups very much like ralph mentioned, because there the labels are the choices rather than the question. It’s sort of a verbose solution to a problem people inventing markup didn’t seem to look hard at back then.