Semantic HTML forms (2)

Earlier this week I wrote about (un)semantic HTML forms. I think I'll go for a definition list for the fields. The HTML is more semantic this way. I'll use the definition title for the form label and the definition data for the form control. The remark and the error div will go inside the definition data:

<dt class="required error"><label for="surname">Surname</label></dt>
<dd class="text">
  <input name="surname" id="surname" maxlength="50" type="text"/>
  <div class="remark">Optional remark for this field</div>
  <div class="error">Text in case of an error</div>
</dd>

It's easy to get the label left of the control. I don't know why I was using floating labels all the time. Absolute and relative positioning is much easier:

form dt {
  position: absolute;
  z-index: 2;
}

form dd {
  position: relative;
  padding-left: 100px;
}

I'm unable to use one class for both the label and the control. Or as you might like: too bad that IE doesn't support the adjacent selector (example: form dt.error + dd). This means that I need to put the class in both tags (I might use Javascript for that) or simply don't care too much about IE.

Tags:

• HTML
• Forms
• Semantic
• Definition list

IE overflow auto scrollbar overlap

Internet Explorer has the annoying habit to render overflow: auto scrollbars on top of it's content. This would leave you with two scrollbars in the first place. You could fix this by using either overflow-x or overflow-y, but still a part of the text is covered by a scrollbar. This could be your last line in case of overflow-x! Here is a nice little CSS trick to fix this:

html>body pre {
  overflow: auto;
}
* html pre {
  overflow-x: auto;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 19 : 4);
}

pre is the block that I want to be scrollable. For none IE browsers I use overflow: auto, for IE I use overflow-x: auto. The expression sets the bottom padding to 19 if a scrollbar has been rendered. If no scrollbar is found the default padding (4 in my style sheet) will be used.

Tags:

• CSS
• Overflow auto
• Internet Explorer
• Scrollbar
• Expression

Custom Blogger comments form

The only customization Blogger offers for it's comments form is to open it in a popup or not. A bit disappointing. There is however an easy way embed the form into your template.

<form action="http://www.blogger.com/login-comment.do" method="post">
<div>
  <input type="hidden" name="blogID" value="<$BlogID$>"/>
  <input type="hidden" name="postID" value="<$BlogItemNumber$>"/>
  <input type="hidden" name="isPopup" value="false"/>
  <input type="hidden" name="iden" value="Other"/>
  <label for="uname">Name</label>
  <input type="text" id="uname" name="anonName" maxlength="100"/><br/>
  <label for="url">http: mailto:</label>
  <input type="text" id="url" name="anonURL" maxlength="100"/><br />
  <label for="comment-body">Comment</label>
  <textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea><br />
  <input type="submit" name="post" value="Post"/>
</div>
</form>

The ugly bit is that a user will end up in a different looking Blogger screen after the post has been processed. I'm afraid that there's a way to avoid that.

Update, 2005-06-06: see Custom Blogger comments form (2)

Tags:

• Blogger
• Comment form
• Comments form

Empty lists do not validate

My Blogger template uses ordered and unordered lists. The list items are generated by a Blogger iterator tag. When there is no data, no list items will be generated. In this case my page will no longer validate as strict while list require at least one list item. Until Blogger provides a way to check for data, I'll start my lists with <li class="hide"></li>.

Tags:

• XHTML
• Valide

This page is was valid XHTML 1.0 Strict!

The Blogger navbar was, a part from being annoying, something what caused Blogger pages not to be valid XHTML 1.0. There is a simple way to fix this. Blogger appends the code for the navbar to the last occurrence of the body tag. Putting a second body in HTML comment doesn't work, CDATA will do the trick. Note that you need the div for a valid CDATA block:

<body>
<div><![CDATA[<body>]]></div>

Update: Internet Explorer doesn't handle the CDATA correctly. You might want to add a class to the div in order to set it's display value to none.

<body>
<div class="hide"><![CDATA[<body>]]></div>

Update 2006-01-11: Removed these hacks. The flag button and BlogThis scripts caused to many problems. Also, you can't get your whole blog valid XHTML 1.0 Strict because of the HTML used in the comments. I now use a CSS rule to hide the navbar:

body #b-navbar { display: none !important; }

Tags:

• Blogger
• XHTML
• Strict
• Valid
• Navbar
• CDATA

Semantic HTML forms

I wrote some HTML for a database application. When I view the source of a generated page I've got the feeling it is somewhat unsemantic. Is it? Here's the main structure:

<form action="action.do" class="edit error">
  <h2>Edit itemname</h2>

  <ul>
    <!-- fields -->
  </ul>

  <div class="buttons">
    <input type="submit" value="OK"/>
    <input type="button" value="Cancel" onClick="doCancel()"/>
  </div>
</form>

The ul allows me to put each form row in a li. It also allows me to keep the <div class="buttons"> relatively close the the form by setting the overflow to auto for the ul.

Since the cancel button needs Javascript to work I think I'll add it to the form dynamically using Javascript. For simple single pages forms it'll go to the previous page.

Here's how the fields would look like:

<li class="text required error">
  <div class="label"><label for="surname">Surname</label></div>
  <div class="control">
    <input name="surname" id="surname" maxlength="50" type="text"/>
  </div>
  <div class="remark">Optional remark for this field</div>
  <div class="error">Text in case of an error</div>
</li>

This is a bit of a div fest. I could leave out the <div class="label"> you might think. Too bad that in case of a group of radio buttons or checkboxes I don't want to have a label tag in it. So, is this semantic or isn't it?

Update: see Semantic HTML forms (2)

Tags:

• HTML
• Forms
• Semantic

Blogvulsel

Since my @home account is gone, I decided to create a Blogger account for the time being. Just to see if I'm any good at this blogging thing. I might get a hosting account later and switch to WordPress. Ok, Blogger is free, but it's too bad that you need use inline styles and that you're unable to host images for your template. Then again, at least Blogger enables you to hack your own style sheet. Much more fun than a MSN space (I think).

Tags:

• First post