Sitecore Page Editor showing input tags

Have you ever tried using the Sitecore page editor, only to find that when you click on edit you are presented with a screen full of tags:
<input id="fld_D2999F2E1BD441FA915E61CD65D09392_D3844EAD201947AF9D8C3BD340F05E8A_en_1_d2b36cfd9efc4068abcca16e543734c0_84" name="fld_D2999F2E1BD441FA915E61CD65D09392_D3844EAD201947AF9D8C3BD340F05E8A_en_1_d2b36cfd9efc4068abcca16e543734c0_84" value="privacy" type="hidden"><span class="scWebEditFrame" onmouseover="javascript:event.cancelBubble=true" style="display: none;"><span class="scWebEditFrameBorder"></span><span class="scWebEditFrameButtons"><span onmouseout="javascript:this.className='scWebEditFrameButton'" onclick="'javascript:return" onmouseover="javascript:this.className='scWebEditFrameButtonHover'" type="common" class="scWebEditFrameButton" title="Edit the related item"><img src="http://www.blogger.com/sitecore/images/blank.gif" class="scWebEditFrameButtonIcon" style="" alt="Edit the related item" border="0" /></span></span></span><span id="fld_D2999F2E1BD441FA915E61CD65D09392_D3844EAD201947AF9D8C3BD340F05E8A_en_1_d2b36cfd9efc4068abcca16e543734c0_84_edit" class="scWebEditInput" scfieldtype="single-line text" onkeyup="javascript:Sitecore.WebEdit.update(this,event)" oncut="javascript:Sitecore.WebEdit.update(this,event)" onpaste="javascript:Sitecore.WebEdit.update(this,event)" onmouseover="javascript:Sitecore.WebEdit.mouseOver(this,event)" onfocus="javascript:Sitecore.WebEdit.focus(this,event)" onblur="javascript:Sitecore.WebEdit.blur(this,event)" onclick="javascript:Sitecore.WebEdit.click(this,event,'sitecore://master/{D2999F2E-1BD4-41FA-915E-61CD65D09392}?lang=en&ver=1');" contenteditable="true">privacy</span>

To resolve this issue, you have to make sure that you disable output escaping:
<xsl:value-of select="$field" escaping="yes" />