Basic
All Types
Customized
All Types
All Types
Customized
Customized
All Types
Customized
cf_sebForm (0.2 Beta 1)
Skin:
carpediem
graybar
panels
plain
tim
Please Enter Your Information:
Title
*
:
Your Password
*
:
Contents
*
:
Current?:
Yes
No
Format:
HTML
Text
Mixed
Format2:
HTML
Text
Mixed
Format3:
HTML
Text
Mixed
Picture:
ColdFusion Source:
<!--- Normally I would put this code in Application.cfm ---> <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> <!--- /Normally I would put this code in Application.cfm ---> <!--- Normally I would put this code in my .css file for the site ---> <style> form { margin: 0px; } form table { border: 1px solid gray; border-bottom: 2px solid gray; border-right: 2px solid gray; } </style> <!--- /Normally I would put this code in my .css file for the site ---> <b>Please Enter Your Information:</b><br /> <cf_sebForm formname="myForm"> <input type="hidden" name="fuseaction" value="circuit.fuseaction"/><!-- cf_sebForm will ignore this field --> <cf_sebField type="hidden" fieldname="MyHiddenValue" length="50"><!-- cf_sebForm will use this field to update a database table and/or show in an email --> <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:
<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 /> <div><div id="sebForm" class="sebFormat-semantic"> <form name="myForm" id="myForm" class="seb sebform" action="/cftags/examples/index.cfm?ex=7&skin=plain" method="post" enctype="multipart/form-data"><input type="hidden" name="sebformsubmit" value="79417206148B574B7E0198EB5C8843B9"/> <input type="hidden" name="pkfield" value=""/> <input type="hidden" name="MyHiddenValue" id="MyHiddenValue" value=""/> <input type="hidden" name="fuseaction" value="circuit.fuseaction"/><!-- cf_sebForm will ignore this field --> <!-- cf_sebForm will use this field to update a database table and/or show in an email --> <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?"> <input type="radio" id="isCurrent_1" name="isCurrent" value="1" class="yesno"/> <label id="lbl-isCurrent_1" for="isCurrent_1">Yes</label> <input type="radio" id="isCurrent_0" name="isCurrent" value="0" class="yesno"/> <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=""> </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> <tr> <td></td> <td> <div class="sebSubmitBar"><input type="submit" value="Save" id="sebsubmit1" id="sebsubmit1" value="" class="submit" title="Save"/></div> <!-- Delete button only displays when editing a record --> <input type="button" id="sebcancel3" value="Cancel" id="sebcancel3" name="" value="" class="cancel" title="Cancel"/> </td> </tr> </form></div></div> <script language="JavaScript" type="text/javascript">function seb_addEvent(obj, evType, fn) {if (obj.addEventListener) {obj.addEventListener(evType, fn, true);return true;} else if (obj.attachEvent){var r = obj.attachEvent("on"+evType, fn);return r;} else {return false;}} function seb_addEventToId(id, evType, fn) {seb_addEvent(document.getElementById(id), evType, fn);} function seb_setStyleById(i, p, v) {var n = document.getElementById(i);if (n) { n.style[p] = v; }} /* 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>