ColdFusion Source:

<cfscript>
request.cftags = StructNew();
request.cftags.cf_sebForm = StructNew();
request.cftags.cf_sebForm.config = StructNew();
request.cftags.cf_sebForm.config.Fields = StructNew();
</cfscript>
<cfsavecontent variable="request.cftags.cf_sebForm.config.layout">[ErrorHeader]<form><table>[Fields]</table></form></cfsavecontent>
<cfsavecontent variable="request.cftags.cf_sebForm.config.Fields.all">
<tr>
	<td align="right" valign="top" style="font-weight:bold;color:#330099">[Label][ReqMark]{:}</td>
	<td>[Input]</td>
</tr>
</cfsavecontent>


<style>
form {
	margin: 0px;
}
form table {
	border: 1px solid gray;
	border-bottom: 2px solid gray;
	border-right: 2px solid gray;
}
</style>

<b>Please Enter Your Information:</b><br />
<cf_sebForm formname="myForm">
<input type="hidden" name="fuseaction" value="circuit.fuseaction"/>
	<cf_sebField type="hidden" fieldname="MyHiddenValue" length="50">
	<cf_sebField type="text" fieldname="Title" length="50" required="true">
	<cf_sebField type="password" fieldname="mypass" label="Your Password" length="50" required="true">
	<cf_sebField type="textarea" fieldname="Contents" required="true">
	<cf_sebField type="yesno" fieldname="isCurrent" Label="Current?">
	<cf_sebField type="checkbox" fieldname="Format">
		<cf_sebSubField value="1" display="HTML">
		<cf_sebSubField value="2" display="Text">
		<cf_sebSubField value="3" display="Mixed">
	</cf_sebField>
	<cf_sebField type="select" fieldname="Format2">
		<cf_sebSubField value="1" display="HTML">
		<cf_sebSubField value="2" display="Text">
		<cf_sebSubField value="3" display="Mixed">
	</cf_sebField>
	<cf_sebField type="radio" fieldname="Format3">
		<cf_sebSubField value="1" display="HTML">
		<cf_sebSubField value="2" display="Text">
		<cf_sebSubField value="3" display="Mixed">
	</cf_sebField>
	<cf_sebField type="file" fieldname="myimage" label="Picture" destination="#ExpandPath('images/people')#" extensions="gif,jpg" accept="image/jpeg,image/gif,image/pjpeg" urlpath="images/people">
	<tr>
		<td></td>
		<td><cf_sebField type="submit" label="Save">[input]</cf_sebField><cf_sebField type="delete" label="Delete">[input]</cf_sebField><cf_sebField type="cancel" label="Cancel">[input]</cf_sebField></td>
	</tr>
</cf_sebForm>

HTML Source:

<b>Please Enter Your Information:</b><br />

<div id="div-Title" class="sebfielddiv"><label id="lbl-Title" for="Title" class="sebform">Title<span class="sebReq">*</span>:</label><input type="text" id="Title" name="Title" value="" class="text" title="Title" size="50" maxlength="50" required><div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-mypass" class="sebfielddiv"><label id="lbl-mypass" for="mypass" class="sebform">Your Password<span class="sebReq">*</span>:</label><input type="password" name="mypass" id="mypass" value="" id="mypass" name="mypass" value="" class="password" title="Your Password" size="50" maxlength="50" required maxlength="50"/><div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-Contents" class="sebfielddiv"><label id="lbl-Contents" for="Contents" class="sebform">Contents<span class="sebReq">*</span>:</label><textarea id="Contents" name="Contents" class="textarea" title="Contents" required cols="40" rows="8"></textarea><div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-isCurrent" class="sebfielddiv"><label id="lbl-isCurrent" for="isCurrent" class="sebform">Current?:</label><fieldset id="isCurrent_set" class="yesno" style="border: 0px solid white;" title="Current?" data-default-value="">
		<input type="radio" id="isCurrent_1" name="isCurrent" value="1" class="yesno"/>&nbsp;<label id="lbl-isCurrent_1" for="isCurrent_1">Yes</label> &nbsp;
		<input type="radio" id="isCurrent_0" name="isCurrent" value="0" class="yesno"/>&nbsp;<label id="lbl-isCurrent_0" for="isCurrent_0">No</label><br/>
		</fieldset><div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-Format" class="sebfielddiv"><label id="lbl-Format" for="Format" class="sebform">Format:</label><fieldset class="checkbox checkbox" id="Format_set" title="Format">
			<div class="sebCheckOption"><input type="checkbox" id="Format_1" name="Format" value="1"/> <label id="lbl-Format_1" for="Format_1">HTML</label></div>
			<div class="sebCheckOption"><input type="checkbox" id="Format_2" name="Format" value="2"/> <label id="lbl-Format_2" for="Format_2">Text</label></div>
			<div class="sebCheckOption"><input type="checkbox" id="Format_3" name="Format" value="3"/> <label id="lbl-Format_3" for="Format_3">Mixed</label></div></fieldset><div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-Format2" class="sebfielddiv"><label id="lbl-Format2" for="Format2" class="sebform">Format2:</label>
<select id="Format2" name="Format2" class="select" title="Format2" data-default-value="" data-value=""><option value="">&nbsp;</option>
	<option value="1">HTML</option>
	<option value="2">Text</option>
	<option value="3">Mixed</option>
</select>
<div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-Format3" class="sebfielddiv"><label id="lbl-Format3" for="Format3" class="sebform">Format3:</label><fieldset id="Format3_set" class="radio" title="Format3">
			<input type="radio" id="Format3_1" name="Format3" value="1" id="Format3" name="Format3" value="" class="radio" title="Format3"/> <label id="lbl-Format3_1" for="Format3_1">HTML</label><br/>
			<input type="radio" id="Format3_2" name="Format3" value="2" id="Format3" name="Format3" value="" class="radio" title="Format3"/> <label id="lbl-Format3_2" for="Format3_2">Text</label><br/>
			<input type="radio" id="Format3_3" name="Format3" value="3" id="Format3" name="Format3" value="" class="radio" title="Format3"/> <label id="lbl-Format3_3" for="Format3_3">Mixed</label><br/></fieldset><div class="sebHelp"></div><div class="sebValidation"></div></div>

<div id="div-myimage" class="sebfielddiv"><label id="lbl-myimage" for="myimage" class="sebform">Picture:</label>
			
			
			<input type="file" id="myimage" name="myimage" value="" class="file" style="padding:0px;margin:0px;" title="Picture"/><div class="sebHelp"></div><div class="sebValidation"></div></div>

/* check extensions function */
function checkExts(field,extensions) {
	var fieldValue = field.value;var arrExtensions = extensions.toLowerCase().split(",");
	var i = 0;var arrFieldValue = fieldValue.toLowerCase().split(".");
	var thisExt = arrFieldValue[arrFieldValue.length-1];
	var missingExt = true;fieldValue = fieldValue.toLowerCase();
	if (fieldValue.length == 0) {missingExt = false;} else {for (i=0; i < arrExtensions.length; i++) {if ( arrExtensions[i].charAt(0) == "." ) {arrExtensions[i] = arrExtensions[i].substring(1, arrExtensions[i].length);}if ( thisExt == arrExtensions[i] ) {missingExt = false;}}}
	
	return missingExt;
}

jsmyForm = new qForm("myForm");

jsmyForm['myimage'].validateExp("checkExts(document.myForm['myimage'],'gif,jpg')", 'Picture must have one of the following extensions: gif,jpg');</script>

cf_sebForm (0.2 Beta 1)

Please Enter Your Information: