diff --git a/clog-form.lisp b/clog-form.lisp
index 083cdd8..d2cb80e 100644
--- a/clog-form.lisp
+++ b/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 ""
- (escape-string element-type)
- (html-id obj)
- value
- (if name
- (format nil "name='~A'" name)
- ""))
- :clog-type 'clog-form-element :auto-place t))
-
+ &key (name nil) (value "") (label nil))
+ (let ((element (create-child
+ obj (format nil ""
+ (escape-string element-type)
+ (html-id obj)
+ value
+ (if name
+ (format nil "name='~A'" name)
+ ""))
+ :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 ""
+ (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))
diff --git a/clog.lisp b/clog.lisp
index 726d201..2e0726f 100644
--- a/clog.lisp
+++ b/clog.lisp
@@ -292,8 +292,17 @@ application."
(clog-form class)
(create-form generic-function)
- (clog-form-element class)
- (create-form-element generic-function))
+ "CLOG-Form-Element - Class for form elements"
+ (clog-form-element class)
+ (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"
diff --git a/tutorial/09-tutorial.lisp b/tutorial/09-tutorial.lisp
index 41782e2..5a3daa4 100644
--- a/tutorial/09-tutorial.lisp
+++ b/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 "
Your form has been submitted")))
@@ -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)