Added additonal form element properties and datalists

clog-base.lisp

@@ -478,7 +478,8 @@ is nil unbind the event."))
 (defgeneric set-on-submit (clog-obj on-submit-handler)
   (:documentation "Set the ON-SUBMIT-HANDLER for CLOG-OBJ. If ON-SUBMIT-HANDLER
 is nil unbind the event. This event is activated by using submit on a form. If
-this even is bound, you must call the form submit manually."))
+this event is bound, you must call the (submit clog-form) manually if wish the
+form action to be run. See CLOG-Form SUBMIT for more details."))
 
 (defmethod set-on-submit ((obj clog-obj) handler)
   (set-event obj "submit"

clog-body.lisp

@@ -56,8 +56,7 @@ or global objects."))
   (loop
 	(if (validp obj)
 	    (sleep 10)
-	    (return (format t "Closing id ~A~%"
+	    (return))))
-			    (connection-id obj))))))
 
 ;;;;;;;;;;;;
 ;; window ;;

clog-element.lisp

@@ -115,6 +115,12 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
 (defmethod attribute ((obj clog-element) attribute-name)
   (jquery-query obj (format nil "attr('~A')" attribute-name)))
 
+(defgeneric remove-attribute (clog-element attribute-name)
+  (:documentation "Get/Setf html tag attribute. (eg. src on img tag)"))
+
+(defmethod remove-attribute ((obj clog-element) attribute-name)
+  (jquery-execute obj (format nil "removeAttr('~A')" attribute-name)))
+
 (defgeneric set-attribute (clog-element attribute-name value)
   (:documentation "Set html tag attribute."))
 
@@ -296,7 +302,7 @@ setting display (None)."))
 (defmethod set-hiddenp ((obj clog-element) value)
   (if value
       (setf (property obj "hidden") t)
-      (jquery-execute obj "removeAttr('hidden')")))
+      (remove-attribute obj "hidden")))
 (defsetf hiddenp set-hiddenp)
 
 ;;;;;;;;;;;;;;

clog-form.lisp

@@ -21,16 +21,108 @@
 ;; create-form ;;
 ;;;;;;;;;;;;;;;;;
 
-(defgeneric create-form (clog-obj &key auto-place)
+(defgeneric create-form (clog-obj &key action method target auto-place)
   (:documentation "Create a new CLOG-Form as child of CLOG-OBJ that organizes
-a collection of form elements in to a singnle form if :AUTO-PLACE (default t)
+a collection of form elements in to a single form if :AUTO-PLACE (default t)
 place-inside-bottom-of CLOG-OBJ. In CLOG a form's on-submit handler should be
-set and the form elelement values handled in that handler as opposed to the
+set and the form element values handled in that handler as opposed to the
-HTML model of submitting to a new \"page\"."))
+HTML model of submitting to a new \"page\". If though one wishes to submit to
+another page can use the :ACTION :METHOD and :TARGET keys and either do not
+set an on-submit handler or call (submit CLOG-FORM) to perform the form
+action."))
 
-(defmethod create-form ((obj clog-obj) &key (auto-place t))
+(defmethod create-form ((obj clog-obj)
-  (create-child obj "<form />" :clog-type 'clog-form :auto-place auto-place))
+			&key (action "")
+			  (method "get")
+			  (target "_self")
+			  (auto-place t))
+  (create-child obj (format nil "<form action='~A' method='~A' target='~A'/>"
+			    action method target)
+		:clog-type 'clog-form :auto-place auto-place))
 
+;;;;;;;;;;;;;;;;;;;;;;;;
+;; form-element-count ;;
+;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric form-element-count (clog-formt)
+  (:documentation "Get form element count."))
+
+(defmethod form-element-count ((obj clog-form))
+  (property obj "length"))
+
+;;;;;;;;;;;;
+;; submit ;;
+;;;;;;;;;;;;
+
+(defgeneric submit (clog-formt)
+  (:documentation "Submit form."))
+
+(defmethod submit ((obj clog-form))
+  (execute obj "submit()"))
+
+;;;;;;;;;;;
+;; reset ;;
+;;;;;;;;;;;
+
+(defgeneric reset (clog-formt)
+  (:documentation "Reset form."))
+
+(defmethod reset ((obj clog-form))
+  (execute obj "reset()"))
+
+;;;;;;;;;;;;;;;;;;;
+;; autocompletep ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric autocompletep (clog-form)
+  (:documentation "Get/Setf form autocompletep."))
+
+(defmethod autocompletep ((obj clog-form))
+  (js-on-p (property obj "autocompletep")))
+
+(defgeneric set-autocompletep (clog-form autocompletep)
+  (:documentation "Set autocompletep for CLOG-FORM"))
+
+(defmethod set-autocompletep ((obj clog-form) autocompletep)
+  (setf (property obj "autocompletep") (p-on-js autocompletep)))
+(defsetf autocompletep set-autocompletep)
+
+;;;;;;;;;;;;;;
+;; encoding ;;
+;;;;;;;;;;;;;;
+
+(defgeneric encoding (clog-form)
+  (:documentation "Get/Setf form encoding. Comming values are:
+      application/x-www-form-urlencoded
+      multipart/form-data
+      text/plain"))
+
+(defmethod encoding ((obj clog-form))
+  (property obj "encoding"))
+
+(defgeneric set-encoding (clog-form encoding)
+  (:documentation "Set encoding for CLOG-FORM"))
+
+(defmethod set-encoding ((obj clog-form) encoding)
+  (setf (property obj "encoding") encoding))
+(defsetf encoding set-encoding)
+
+;;;;;;;;;;;;;;;;;;;;;;;;
+;; validate-on-submit ;;
+;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric validate-on-submit (clog-form)
+  (:documentation "Get/Setf form validate-on-submit."))
+
+(defmethod validate-on-submit ((obj clog-form))
+  (not (js-true-p (property obj "noValidate"))))
+
+(defgeneric set-validate-on-submit (clog-form value)
+  (:documentation "Set VALIDATE-ON-SUBMIT for CLOG-FORM"))
+
+(defmethod set-validate-on-submit ((obj clog-form) value)
+  (setf (property obj "noValidate") (p-true-js (not value))))
+(defsetf validate-on-submit set-validate-on-submit)
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Implementation - clog-form-clement
@@ -68,12 +160,159 @@ clog-form-elements are always placed with in the CLOG-FORM in the DOM"))
       (label-for label element))
     element))
 
+;;;;;;;;;;;;;;;;;;
+;; autocomplete ;;
+;;;;;;;;;;;;;;;;;;
+
+(defgeneric autocomplete (clog-form-element)
+  (:documentation "Get/Setf form element autocomplete."))
+
+(defmethod autocomplete ((obj clog-form-element))
+  (property obj "autocomplete"))
+
+(defgeneric set-autocomplete (clog-form-element value)
+  (:documentation "Set autocomplete AUTOCOMPLETE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-autocomplete ((obj clog-form-element) value)
+  (setf (property obj "autocomplete") value))
+(defsetf autocomplete set-autocomplete)
+
+;;;;;;;;;;;;;;;;
+;; autofocusp ;;
+;;;;;;;;;;;;;;;;
+
+(defgeneric autofocusp (clog-form-element)
+  (:documentation "Get/Setf form element autofocusp. Only one element should
+have this set true. Autofocus on element when form loaded. "))
+
+(defmethod autofocusp ((obj clog-form-element))
+  (js-true-p (attribute obj "autofocus")))
+
+(defgeneric set-autofocusp (clog-form-element value)
+  (:documentation "Set autofocusp AUTOFOCUSP for CLOG-FORM-ELEMENT"))
+
+(defmethod set-autofocusp ((obj clog-form-element) value)
+  (if value
+      (setf (attribute obj "autofocus") "true")
+      (remove-attribute obj "autofocus")))
+(defsetf autofocusp set-autofocusp)
+
+;;;;;;;;;;;;;;;;;;
+;; place-holder ;;
+;;;;;;;;;;;;;;;;;;
+
+(defgeneric place-holder (clog-form-element)
+  (:documentation "Get/Setf form element place holder."))
+
+(defmethod place-holder ((obj clog-form-element))
+  (property obj "placeholder"))
+
+(defgeneric set-place-holder (clog-form-element value)
+  (:documentation "Set placeholder PLACE-HOLDER for CLOG-FORM-ELEMENT"))
+
+(defmethod set-place-holder ((obj clog-form-element) value)
+  (setf (property obj "placeholder") value))
+(defsetf place-holder set-place-holder)
+
+;;;;;;;;;;;;;;;
+;; disabledp ;;
+;;;;;;;;;;;;;;;
+
+(defgeneric disabledp (clog-form-element)
+  (:documentation "Get/Setf form element disabledp."))
+
+(defmethod disabledp ((obj clog-form-element))
+  (js-true-p (property obj "disabled")))
+
+(defgeneric set-disabledp (clog-form-element value)
+  (:documentation "Set disabledp DISABLEDP for CLOG-FORM-ELEMENT"))
+
+(defmethod set-disabledp ((obj clog-form-element) value)
+  (setf (property obj "disabled") (p-true-js value)))
+(defsetf disabledp set-disabledp)
+
+;;;;;;;;;;;;;;;;;
+;; read-only-p ;;
+;;;;;;;;;;;;;;;;;
+
+(defgeneric read-only-p (clog-form-element)
+  (:documentation "Get/Setf form element read-only-p."))
+
+(defmethod read-only-p ((obj clog-form-element))
+  (js-true-p (property obj "readonly")))
+
+(defgeneric set-read-only-p (clog-form-element value)
+  (:documentation "Set read-only-p READ-ONLY-P for CLOG-FORM-ELEMENT"))
+
+(defmethod set-read-only-p ((obj clog-form-element) value)
+  (setf (property obj "readonly") (p-true-js value)))
+(defsetf read-only-p set-read-only-p)
+
+;;;;;;;;;;;;;;;
+;; requiredp ;;
+;;;;;;;;;;;;;;;
+
+(defgeneric requiredp (clog-form-element)
+  (:documentation "Get/Setf form element requiredp."))
+
+(defmethod requiredp ((obj clog-form-element))
+  (js-true-p (property obj "required")))
+
+(defgeneric set-requiredp (clog-form-element value)
+  (:documentation "Set requiredp REQUIREDP for CLOG-FORM-ELEMENT"))
+
+(defmethod set-requiredp ((obj clog-form-element) value)
+  (setf (property obj "required") (p-true-js value)))
+(defsetf requiredp set-requiredp)
+
+;;;;;;;;;;
+;; name ;;
+;;;;;;;;;;
+
+(defgeneric name (clog-form-element)
+  (:documentation "Get/Setf form element name.
+   Form element name, name is not the id of the element but rather how
+   the data returned from the element will be named in the submit to a
+   server. For example if Name is My_Field a GET request could look like
+   http://localhost:8080?My_Field=xxxx"))
+
+(defmethod name ((obj clog-form-element))
+  (property obj "name"))
+
+(defgeneric set-name (clog-form-element value)
+  (:documentation "Set name VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-name ((obj clog-form-element) value)
+  (setf (property obj "name") value))
+(defsetf name set-name)
+
+;;;;;;;;;;;;;;;;;;;
+;; default-value ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric default-value (clog-form-element)
+  (:documentation "Get/Setf form element default-value.
+   If the form is reset the value will be set to default value
+   If Value is set at time of creation it also sets it as the Default_Value"))
+
+(defmethod default-value ((obj clog-form-element))
+  (property obj "defaultValue"))
+
+(defgeneric set-default-value (clog-form-element value)
+  (:documentation "Set default-value VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-default-value ((obj clog-form-element) value)
+  (setf (property obj "defaultValue") value))
+(defsetf default-value set-default-value)
+
 ;;;;;;;;;;;
 ;; value ;;
 ;;;;;;;;;;;
 
 (defgeneric value (clog-form-element)
-  (:documentation "Get/Setf from element value."))
+  (:documentation "Get/Setf form element value.
+   Form element values are not accessible through the Text property but
+   instead through the value property."))
 
 (defmethod value ((obj clog-form-element))
   (property obj "value"))
@@ -85,22 +324,117 @@ clog-form-elements are always placed with in the CLOG-FORM in the DOM"))
   (setf (property obj "value") value))
 (defsetf value set-value)
 
+;;;;;;;;;;;;;
+;; pattern ;;
+;;;;;;;;;;;;;
+
+(defgeneric pattern (clog-form-element)
+  (:documentation "Get/Setf form element regular expression pattern.
+   (see JavaScript RegExp object for specifics)
+   Form validation pattern. validate-on-submit fields with input
+   will validate against their pattern if set on submit.
+   In cases where a specific input type is not supported like
+   (date, week, etc.) Pattern can be set to ensure the expected results.
+   This works since Input type will fall back to a text input."))
+
+(defmethod pattern ((obj clog-form-element))
+  (property obj "pattern"))
+
+(defgeneric set-pattern (clog-form-element value)
+  (:documentation "Set pattern VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-pattern ((obj clog-form-element) value)
+  (setf (property obj "pattern") value))
+(defsetf pattern set-pattern)
+
+;;;;;;;;;;;;;
+;; minimum ;;
+;;;;;;;;;;;;;
+
+(defgeneric minimum (clog-form-element)
+  (:documentation "Get/Setf form element minimum."))
+
+(defmethod minimum ((obj clog-form-element))
+  (property obj "min"))
+
+(defgeneric set-minimum (clog-form-element value)
+  (:documentation "Set minimum VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-minimum ((obj clog-form-element) value)
+  (setf (property obj "min") value))
+(defsetf minimum set-minimum)
+
+;;;;;;;;;;;;;
+;; maximum ;;
+;;;;;;;;;;;;;
+
+(defgeneric maximum (clog-form-element)
+  (:documentation "Get/Setf form element maximum."))
+
+(defmethod maximum ((obj clog-form-element))
+  (property obj "max"))
+
+(defgeneric set-maximum (clog-form-element value)
+  (:documentation "Set maximum VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-maximum ((obj clog-form-element) value)
+  (setf (property obj "max") value))
+(defsetf maximum set-maximum)
+
 ;;;;;;;;;;;;;;;;;;
-;; place-holder ;;
+;; element-step ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric place-holder (clog-form-element)
+(defgeneric element-step (clog-form-element)
-  (:documentation "Get/Setf from element place holder."))
+  (:documentation "Get/Setf form element step."))
 
-(defmethod place-holder ((obj clog-form-element))
+(defmethod element-step ((obj clog-form-element))
-  (property obj "placeholder"))
+  (property obj "step"))
 
-(defgeneric set-place-holder (clog-form-element place-holder)
+(defgeneric set-element-step (clog-form-element value)
-  (:documentation "Set placeholder PLACE-HOLDER for CLOG-FORM-ELEMENT"))
+  (:documentation "Set element-step VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-element-step ((obj clog-form-element) value)
+  (setf (property obj "step") value))
+(defsetf element-step set-element-step)
+
+;;;;;;;;;;
+;; size ;;
+;;;;;;;;;;
+
+(defgeneric size (clog-form-element)
+  (:documentation "Get/Setf form element size."))
+
+(defmethod size ((obj clog-form-element))
+  (property obj "size"))
+
+(defgeneric set-size (clog-form-element value)
+  (:documentation "Set size VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-size ((obj clog-form-element) value)
+  (setf (property obj "size") value))
+(defsetf size set-size)
+
+;;;;;;;;;;;;
+;; select ;;
+;;;;;;;;;;;;
+
+(defgeneric select (clog-form-element)
+  (:documentation "Select and highlight the contents of element."))
+
+(defmethod select ((obj clog-form-element))
+  (execute obj "select()"))
+
+;;;;;;;;;;;;;;;;;;;
+;; set-data-list ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric set-data-list (clog-form-element data-list)
+  (:documentation "Set the option data list to use for this element."))
+
+(defmethod set-data-list ((obj clog-form-element) data-list)
+  (setf (attribute obj "list") (html-id data-list)))
 
-(defmethod set-place-holder ((obj clog-form-element) place-holder)
-  (setf (property obj "placeholder") place-holder))
-(defsetf place-holder set-place-holder)
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Implementation - clog-label
@@ -134,3 +468,32 @@ clog-form-elements are always placed with in the CLOG-FORM in the DOM"))
 
 (defmethod label-for ((obj clog-label) element)
   (setf (attribute obj "for") element))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Implementation - clog-data-list
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-data-list (clog-element)()
+  (:documentation "CLOG Form Element Data-List Options Object"));
+
+;;;;;;;;;;;;;;;;;;;;;;
+;; create-data-list ;;
+;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric create-data-list (clog-obj)
+  (:documentation "Create a new clog-data-list as child of CLOG-FORM."))
+
+(defmethod create-data-list ((obj clog-obj))
+  (create-child obj "<datalist />" :clog-type 'clog-data-list :auto-place t))
+
+;;;;;;;;;;;;;;;;
+;; add-option ;;
+;;;;;;;;;;;;;;;;
+
+(defgeneric add-option (clog-data-list value)
+  (:documentation "Add option VALUE to data-list."))
+
+(defmethod add-option ((obj clog-data-list) value)
+  (create-child obj (format nil "<option value='~A'>" (escape-string value))
+		:clog-type 'clog-element :auto-place t))
+

clog-utilities.lisp

@@ -26,11 +26,29 @@
 ;;;;;;;;;;;;;;;
 
 (defun p-true-js (value)
-  "Return \"true\" if VALUE true"
+  "Return \"true\" if VALUE t"
   (if value
       "true"
       "false"))
 
+;;;;;;;;;;;;;
+;; js-on-p ;;
+;;;;;;;;;;;;;
+
+(defun js-on-p (value)
+  "Return true if VALUE equalp the string on"
+  (equalp value "on"))
+
+;;;;;;;;;;;;;
+;; p-on-js ;;
+;;;;;;;;;;;;;
+
+(defun p-on-js (value)
+  "Return \"on\" if VALUE t or return \"off\""
+  (if value
+      "on"
+      "off"))
+
 ;;;;;;;;;;;;;;;;;;
 ;; open-browser ;;
 ;;;;;;;;;;;;;;;;;;

clog.lisp

@@ -49,6 +49,8 @@ application."
   "CLOG utilities"
   (js-true-p     function)
   (p-true-js     function)
+  (js-on-p       function)
+  (p-on-js       function)
   (open-browser  function)
   (escape-string function))
 
@@ -120,8 +122,9 @@ application."
   (place-inside-bottom-of generic-function)
 
   "CLOG-Element - General Properties"
-  (style     generic-function)
+  (style            generic-function)
-  (attribute generic-function)
+  (attribute        generic-function)
+  (remove-attribute generic-function)
 
   "CLOG-Element - Properties"
   (access-key          generic-function)
@@ -290,19 +293,45 @@ application."
 (defsection @clog-form (:title "CLOG Form Objects")
   "CLOG-Form - Class for organizing Form Elements in to a From"
   (clog-form   class)
-  (create-form generic-function)
+  (create-form        generic-function)
+  
+  (form-element-count generic-function)
+  (submit             generic-function)
+  (reset              generic-function)
+  (autocompletep      generic-function)
+  (encoding           generic-function)
+  (validate-on-submit generic-function)
 
   "CLOG-Form-Element - Class for form elements"
   (clog-form-element   class)
   (create-form-element generic-function)
 
-  (value               generic-function)
+  (autocomplete        generic-function)
+  (autofocusp          generic-function)
   (place-holder        generic-function)
+  (disabledp           generic-function)
+  (read-only-p         generic-function)
+  (requiredp           generic-function)
+  (name                generic-function)
+  (default-value       generic-function)
+  (value               generic-function)
+  (pattern             generic-function)
+  (minimum             generic-function)
+  (maximum             generic-function)
+  (size                generic-function)
+  (element-step        generic-function)
+  (select              generic-function)
+  (set-data-list       generic-function)
 
   "CLOG-Label - Class for CLOG Labels"
   (clog-label   class)
   (create-label generic-function)
-  (label-for    generic-function))
+  (label-for    generic-function)
+
+  "CLOG-Data-List - Class for CLOG Option Data Lists"
+  (clog-data-list   class)
+  (create-data-list generic-function)
+  (add-option       generic-function))
 
 (defsection @clog-body (:title "CLOG Body Objects")
   "CLOG-Body - CLOG Body Objects"

doc/clog-manual.html

@@ -125,7 +125,23 @@ down, this function does the same as set-on-new-window.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-3AP-TRUE-JS-20FUNCTION-29" >P-TRUE-JS</a></span></span> <span class="locative-args">VALUE</span></span></p>
 
-<p>Return &quot;true&quot; if <code>VALUE</code> true</p></li>
+<p>Return &quot;true&quot; if <code>VALUE</code> t</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AJS-ON-P-20FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-3AJS-ON-P-20FUNCTION-29" >JS-ON-P</a></span></span> <span class="locative-args">VALUE</span></span></p>
+
+<p>Return true if <code>VALUE</code> equalp the string on</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AP-ON-JS-20FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-3AP-ON-JS-20FUNCTION-29" >P-ON-JS</a></span></span> <span class="locative-args">VALUE</span></span></p>
+
+<p>Return &quot;on&quot; if <code>VALUE</code> t or return &quot;off&quot;</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOPEN-BROWSER-20FUNCTION-29'></a></p>
@@ -333,7 +349,8 @@ is nil unbind the event.</p></li>
 
 <p>Set the <code>ON-SUBMIT-HANDLER</code> for <code>CLOG-OBJ</code>. If <code>ON-SUBMIT-HANDLER</code>
 is nil unbind the event. This event is activated by using submit on a form. If
-this even is bound, you must call the form submit manually.</p></li>
+this event is bound, you must call the (submit clog-form) manually if wish the
+form action to be run. See CLOG-Form <a href="#x-28CLOG-3ASUBMIT-20GENERIC-FUNCTION-29" title="(CLOG:SUBMIT GENERIC-FUNCTION)"><code>SUBMIT</code></a> for more details.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ASET-ON-SELECT-20GENERIC-FUNCTION-29'></a></p>
@@ -622,6 +639,14 @@ an existing element with <code>HTML-ID</code>. The <code>HTML-ID</code> must be
 <p>Get/Setf html tag attribute. (eg. src on img tag)</p></li>
 </ul>
 
+<p><a id='x-28CLOG-3AREMOVE-ATTRIBUTE-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AREMOVE-ATTRIBUTE-20GENERIC-FUNCTION-29" >REMOVE-ATTRIBUTE</a></span></span> <span class="locative-args">CLOG-ELEMENT ATTRIBUTE-NAME</span></span></p>
+
+<p>Get/Setf html tag attribute. (eg. src on img tag)</p></li>
+</ul>
+
 <p>CLOG-Element - Properties</p>
 
 <p><a id='x-28CLOG-3AACCESS-KEY-20GENERIC-FUNCTION-29'></a></p>
@@ -1840,13 +1865,67 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of
 <p><a id='x-28CLOG-3ACREATE-FORM-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-FORM-20GENERIC-FUNCTION-29" >CREATE-FORM</a></span></span> <span class="locative-args">CLOG-OBJ &amp;KEY AUTO-PLACE</span></span></p>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-FORM-20GENERIC-FUNCTION-29" >CREATE-FORM</a></span></span> <span class="locative-args">CLOG-OBJ &amp;KEY ACTION METHOD TARGET AUTO-PLACE</span></span></p>
 
 <p>Create a new CLOG-Form as child of <code>CLOG-OBJ</code> that organizes
-a collection of form elements in to a singnle form if <code>:AUTO-PLACE</code> (default t)
+a collection of form elements in to a single form if <code>:AUTO-PLACE</code> (default t)
 place-inside-bottom-of <code>CLOG-OBJ</code>. In <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> a form's on-submit handler should be
-set and the form elelement values handled in that handler as opposed to the
+set and the form element values handled in that handler as opposed to the
-<code>HTML</code> model of submitting to a new &quot;page&quot;.</p></li>
+<code>HTML</code> model of submitting to a new &quot;page&quot;. If though one wishes to submit to
+another page can use the <code>:ACTION</code> <code>:METHOD</code> and <code>:TARGET</code> keys and either do not
+set an on-submit handler or call (submit <a href="#x-28CLOG-3ACLOG-FORM-20CLASS-29" title="(CLOG:CLOG-FORM CLASS)"><code>CLOG-FORM</code></a>) to perform the form
+action.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29" >FORM-ELEMENT-COUNT</a></span></span> <span class="locative-args">CLOG-FORMT</span></span></p>
+
+<p>Get form element count.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASUBMIT-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASUBMIT-20GENERIC-FUNCTION-29" >SUBMIT</a></span></span> <span class="locative-args">CLOG-FORMT</span></span></p>
+
+<p>Submit form.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ARESET-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ARESET-20GENERIC-FUNCTION-29" >RESET</a></span></span> <span class="locative-args">CLOG-FORMT</span></span></p>
+
+<p>Reset form.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AAUTOCOMPLETEP-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AAUTOCOMPLETEP-20GENERIC-FUNCTION-29" >AUTOCOMPLETEP</a></span></span> <span class="locative-args">CLOG-FORM</span></span></p>
+
+<p>Get/Setf form autocompletep.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AENCODING-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AENCODING-20GENERIC-FUNCTION-29" >ENCODING</a></span></span> <span class="locative-args">CLOG-FORM</span></span></p>
+
+<p>Get/Setf form encoding. Comming values are:
+application/x-www-form-urlencoded
+multipart/form-data
+text/plain</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AVALIDATE-ON-SUBMIT-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AVALIDATE-ON-SUBMIT-20GENERIC-FUNCTION-29" >VALIDATE-ON-SUBMIT</a></span></span> <span class="locative-args">CLOG-FORM</span></span></p>
+
+<p>Get/Setf form validate-on-submit.</p></li>
 </ul>
 
 <p>CLOG-Form-Element - Class for form elements</p>
@@ -1869,6 +1948,77 @@ elements.</p></li>
 clog-form-elements are always placed with in the <code>CLOG-FORM</code> in the DOM</p></li>
 </ul>
 
+<p><a id='x-28CLOG-3AAUTOCOMPLETE-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AAUTOCOMPLETE-20GENERIC-FUNCTION-29" >AUTOCOMPLETE</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element autocomplete.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AAUTOFOCUSP-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AAUTOFOCUSP-20GENERIC-FUNCTION-29" >AUTOFOCUSP</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element autofocusp. Only one element should
+have this set true. Autofocus on element when form loaded. </p></li>
+</ul>
+
+<p><a id='x-28CLOG-3APLACE-HOLDER-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3APLACE-HOLDER-20GENERIC-FUNCTION-29" >PLACE-HOLDER</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element place holder.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ADISABLEDP-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ADISABLEDP-20GENERIC-FUNCTION-29" >DISABLEDP</a></span></span> <span class="locative-args">CLOG-BUTTON</span></span></p>
+
+<p>Get/Setf disabled status of button.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AREAD-ONLY-P-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AREAD-ONLY-P-20GENERIC-FUNCTION-29" >READ-ONLY-P</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element read-only-p.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AREQUIREDP-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AREQUIREDP-20GENERIC-FUNCTION-29" >REQUIREDP</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element requiredp.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ANAME-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ANAME-20GENERIC-FUNCTION-29" >NAME</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element name.
+Form element name, name is not the id of the element but rather how
+the data returned from the element will be named in the submit to a
+server. For example if Name is My_Field a <code>GET</code> request could look like
+http://localhost:8080?My_Field=xxxx</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ADEFAULT-VALUE-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ADEFAULT-VALUE-20GENERIC-FUNCTION-29" >DEFAULT-VALUE</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element default-value.
+If the form is reset the value will be set to default value
+If Value is set at time of creation it also sets it as the Default_Value</p></li>
+</ul>
+
 <p><a id='x-28CLOG-3AVALUE-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
@@ -1877,12 +2027,66 @@ clog-form-elements are always placed with in the <code>CLOG-FORM</code> in the D
 <p>Get/Setf the value of the progress-bar.</p></li>
 </ul>
 
-<p><a id='x-28CLOG-3APLACE-HOLDER-20GENERIC-FUNCTION-29'></a></p>
+<p><a id='x-28CLOG-3APATTERN-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3APLACE-HOLDER-20GENERIC-FUNCTION-29" >PLACE-HOLDER</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3APATTERN-20GENERIC-FUNCTION-29" >PATTERN</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
 
-<p>Get/Setf from element place holder.</p></li>
+<p>Get/Setf form element regular expression pattern.
+(see JavaScript RegExp object for specifics)
+Form validation pattern. validate-on-submit fields with input
+will validate against their pattern if set on submit.
+In cases where a specific input type is not supported like
+(date, week, etc.) Pattern can be set to ensure the expected results.
+This works since Input type will fall back to a text input.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AMINIMUM-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AMINIMUM-20GENERIC-FUNCTION-29" >MINIMUM</a></span></span> <span class="locative-args">CLOG-METER</span></span></p>
+
+<p>Get/Setf the minimum of the meter.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AMAXIMUM-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AMAXIMUM-20GENERIC-FUNCTION-29" >MAXIMUM</a></span></span> <span class="locative-args">CLOG-PROGRESS-BAR</span></span></p>
+
+<p>Get/Setf the maximum of the progress-bar.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASIZE-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASIZE-20GENERIC-FUNCTION-29" >SIZE</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element size.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AELEMENT-STEP-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AELEMENT-STEP-20GENERIC-FUNCTION-29" >ELEMENT-STEP</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Get/Setf form element step.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASELECT-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASELECT-20GENERIC-FUNCTION-29" >SELECT</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT</span></span></p>
+
+<p>Select and highlight the contents of element.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASET-DATA-LIST-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-DATA-LIST-20GENERIC-FUNCTION-29" >SET-DATA-LIST</a></span></span> <span class="locative-args">CLOG-FORM-ELEMENT DATA-LIST</span></span></p>
+
+<p>Set the option data list to use for this element.</p></li>
 </ul>
 
 <p>CLOG-Label - Class for <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Labels</p>
@@ -1911,6 +2115,32 @@ clog-form-elements are always placed with in the <code>CLOG-FORM</code> in the D
 <p>Set label is for <code>ELEMENT</code>.</p></li>
 </ul>
 
+<p>CLOG-Data-List - Class for <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Option Data Lists</p>
+
+<p><a id='x-28CLOG-3ACLOG-DATA-LIST-20CLASS-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLOG-DATA-LIST-20CLASS-29" >CLOG-DATA-LIST</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-ELEMENT-20CLASS-29" title="(CLOG:CLOG-ELEMENT CLASS)">CLOG-ELEMENT</a></span></span></p>
+
+<p><a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Form Element Data-List Options Object</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ACREATE-DATA-LIST-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-DATA-LIST-20GENERIC-FUNCTION-29" >CREATE-DATA-LIST</a></span></span> <span class="locative-args">CLOG-OBJ</span></span></p>
+
+<p>Create a new clog-data-list as child of <a href="#x-28CLOG-3ACLOG-FORM-20CLASS-29" title="(CLOG:CLOG-FORM CLASS)"><code>CLOG-FORM</code></a>.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AADD-OPTION-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AADD-OPTION-20GENERIC-FUNCTION-29" >ADD-OPTION</a></span></span> <span class="locative-args">CLOG-DATA-LIST VALUE</span></span></p>
+
+<p>Add option <code>VALUE</code> to data-list.</p></li>
+</ul>
+
 <p><a id='x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29'></a></p>
 
 <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8634;</a></span></span></p>

tutorial/09-tutorial.lisp

@@ -30,9 +30,16 @@
 	 (fe2 (create-form-element f1 :color :label tmp))
 	 (tmp (create-br f1))
 	 (tmp (create-form-element f1 :submit :value "OK"))
-	 (tmp (create-form-element f1 :reset :value "Start Again")))
+	 (tmp (create-form-element f1 :reset :value "Start Again"))
+	 (dl1 (create-data-list f1)))
     
     (setf (place-holder fe1) "type here..")
+    (setf (requiredp fe1) t)
+    
+    (add-option dl1 "Cool Title")
+    (add-option dl1 "Not So Cool Title")
+    (add-option dl1 "Why Not Another Title")
+    (set-data-list fe1 dl1)
     
     (set-on-submit f1
 		   (lambda (obj)
@@ -61,9 +68,9 @@
 	     (setf (hiddenp p2) t)
 	     (setf (hiddenp p3) t)
 
-	     (setf (background-color t1) :grey)
+	     (setf (background-color t1) :lightgrey)
-	     (setf (background-color t2) :grey)
+	     (setf (background-color t2) :lightgrey)
-	     (setf (background-color t3) :grey)
+	     (setf (background-color t3) :lightgrey)
 	     
 	     (setf (background-color last-tab) :lightblue)
 	     (setf (hiddenp obj) nil)