Form labels

clog-form.lisp

@@ -49,18 +49,88 @@ elements."))
     :file :hidden :image :month :number :password :radio :range
     :reset :search :submit :tel :text :time :url :week))
   
-(defgeneric create-form-element (clog-form element-type &key name value)
+(defgeneric create-form-element (clog-form element-type &key name value label)
   (:documentation "Create a new clog-form-element as child of CLOG-FORM.
 clog-form-elements are always placed with in the CLOG-FORM in the DOM"))
 
 (defmethod create-form-element ((obj clog-form) element-type
-				&key (name nil) (value ""))
-  (create-child obj (format nil "<input type='~A' form='~A' value='~A' ~A/>"
+				&key (name nil) (value "") (label nil))
+  (let ((element (create-child
+		  obj (format nil "<input type='~A' form='~A' value='~A' ~A/>"
 			      (escape-string element-type)
 			      (html-id obj)
 			      value
 			      (if name
 				  (format nil "name='~A'" name)
 				  ""))
-		:clog-type 'clog-form-element :auto-place t))
+		  :clog-type 'clog-form-element :auto-place t)))
+    (when label
+      (label-for label element))
+    element))
 
+;;;;;;;;;;;
+;; value ;;
+;;;;;;;;;;;
+
+(defgeneric value (clog-form-element)
+  (:documentation "Get/Setf from element value."))
+
+(defmethod value ((obj clog-form-element))
+  (property obj "value"))
+
+(defgeneric set-value (clog-form-element value)
+  (:documentation "Set value VALUE for CLOG-FORM-ELEMENT"))
+
+(defmethod set-value ((obj clog-form-element) value)
+  (setf (property obj "value") value))
+(defsetf value set-value)
+
+;;;;;;;;;;;;;;;;;;
+;; place-holder ;;
+;;;;;;;;;;;;;;;;;;
+
+(defgeneric place-holder (clog-form-element)
+  (:documentation "Get/Setf from element place holder."))
+
+(defmethod place-holder ((obj clog-form-element))
+  (property obj "placeholder"))
+
+(defgeneric set-place-holder (clog-form-element place-holder)
+  (:documentation "Set placeholder PLACE-HOLDER for CLOG-FORM-ELEMENT"))
+
+(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
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-label (clog-element)()
+  (:documentation "CLOG Form Element Label Object"));
+
+;;;;;;;;;;;;;;;;;;
+;; create-label ;;
+;;;;;;;;;;;;;;;;;;
+
+
+(defgeneric create-label (clog-form &key content label-for)
+  (:documentation "Create a new clog-label as child of CLOG-FORM."))
+
+(defmethod create-label ((obj clog-form) &key (content "") (label-for nil))
+  (create-child obj (format nil "<label for='~A'>~A</label>"
+			    (if label-for
+				(html-id label-for)
+				"")
+			    (escape-string content))
+		:clog-type 'clog-label :auto-place t))
+
+;;;;;;;;;;;;;;;
+;; label-for ;;
+;;;;;;;;;;;;;;;
+
+(defgeneric label-for (clog-label element)
+  (:documentation "Set label is for ELEMENT."))
+
+(defmethod label-for ((obj clog-label) element)
+  (setf (attribute obj "for") element))

clog.lisp

@@ -292,8 +292,17 @@ application."
   (clog-form   class)
   (create-form generic-function)
 
+  "CLOG-Form-Element - Class for form elements"
   (clog-form-element   class)
-  (create-form-element generic-function))
+  (create-form-element generic-function)
+
+  (value               generic-function)
+  (place-holder        generic-function)
+
+  "CLOG-Label - Class for CLOG Labels"
+  (clog-label   class)
+  (create-label generic-function)
+  (label-for    generic-function))
 
 (defsection @clog-body (:title "CLOG Body Objects")
   "CLOG-Body - CLOG Body Objects"

tutorial/09-tutorial.lisp

@@ -9,20 +9,23 @@
 	 (t1 (create-button body :content "Tab1"))
 	 (t2 (create-button body :content "Tab2"))
 	 (t3 (create-button body :content "Tab3"))
-	 (p1 (create-div body :content "Panel1 - Type here"))
+	 (p1 (create-div body))
 	 (p2 (create-div body :content "Panel2 - Type here"))
 	 (p3 (create-div body :content "Panel3 - Type here"))
 	 (f1 (create-form p1))
-	 (fe1 (create-form-element f1 :text :value "Stuff"))
+	 (l1  (create-label f1 :content "Fill in blank:"))
+	 (fe1 (create-form-element f1 :text :label l1))
 	 (fe2 (create-form-element f1 :submit :value "OK"))
 	 (fe3 (create-form-element f1 :reset :value "Start Again")))
 
     (place-after t3 (create-br body))
     (place-after fe1 (create-br body))
 
+    (setf (place-holder fe1) "type here..")
+    
     (set-on-submit f1
 		   (lambda (obj)
-		     (setf (title (html-document body)) (attribute fe1 "value"))
+		     (setf (title (html-document body)) (value fe1))
 		     (setf (hiddenp f1) t)
 		     (create-span p1 "<br><b>Your form has been submitted</b>")))
     
@@ -38,7 +41,6 @@
     (set-border p2 :thin :solid :black)
     (set-border p3 :thin :solid :black)
 
-    (setf (editablep p1) t)
     (setf (editablep p2) t)
     (setf (editablep p3) t)