This example shows a sample form pieced together using an assortment of ZK input components, including captcha and color picker (colorbox).

The password field is implemented by setting a textbox's "type" attribute to "password". At the field "Birthday", the format of the date picker (datebox) can be adjusted by selecting the available options from a drop-down menu(listbox).

The field "Memo" demonstrates a textbox which has its height dynamically adjustable by the spinner component to its right.

<zk>
	<style src="/widgets/input/form_sample/style.css" />
	<div apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.input.form_sample.FormViewModel')"
		validationMessages="@id('vmsgs')"
		form="@id('fx') @load(vm.user) @save(vm.user, before='submit') @validator('demo.input.form_sample.FormValidator', retypedPassword=vm.retypedPassword, captcha=vm.captcha, captchaInput=vm.captchaInput)">
		<grid>
			<columns>
				<column label="Type" width="120px" />
				<column label="Content" />
				<column label="Component" width="200px" />
			</columns>
			<rows>
				<row>
					<label value="UserName" width="150px" />
					<hlayout>
						<textbox value="@bind(fx.userName)"
							width="150px" tabindex="1" />
					</hlayout>
					<div>
						<label sclass="hightlight">Textbox</label>
					</div>
				</row>
				<row>
					Password
					<textbox type="password" value="@bind(fx.password)"
						width="150px" tabindex="2" />
					<div>
						<label sclass="hightlight">Textbox</label>
						type = "password"
					</div>
				</row>
				<row>
					Re-type Password
					<cell>
						<textbox type="password" value="@bind(vm.retypedPassword)"
							 width="150px"  tabindex="3" />
						<label class="error"
							value="@load(vmsgs['password'])" />
					</cell>
					<div>
						<label sclass="hightlight">Textbox</label>
						with value validate
					</div>
				</row>
				<row>
					Age:
					<cell>
						<intbox value="@bind(fx.age)" width="150px"  tabindex="4" />
						<label class="error"
							value="@load(vmsgs['age'])" />
					</cell>
					<div>
						<label sclass="hightlight">Intbox</label>
						with constraint
					</div>
				</row>
				<row>
					Phone:
					<textbox constraint="no empty" value="@bind(fx.telephone)"
						width="150px" maxlength="15" tabindex="5" />
					<div>
						<label sclass="hightlight">Textbox</label>
						with max length limit
					</div>
				</row>
				<row>
					Weight:
					<cell>
						<decimalbox format="###.##" value="@bind(fx.weight)"
							width="150px"  tabindex="6" />
						<label class="error"
							value="@load(vmsgs['weight'])" />
					</cell>
					<div>
						<label sclass="hightlight">Decimalbox</label>
						with format
					</div>
				</row>
				<row>
					Birthday:
					<hlayout valign="middle">
						<datebox value="@bind(fx.birthday)" 
							format="@load(vm.dateFormat)" width="150px"  tabindex="7"/>
						Format :
						<listbox selectedItem="@bind(vm.dateFormat)"
							mold="select" tabindex="8">
							<listitem label="Default" value="" />
							<listitem label="yyyy/MM/dd hh:mm a"
								value="yyyy/MM/dd hh:mm a" />
							<listitem label="yyyy/MM/dd"
								value="yyyy/MM/dd" />
							<listitem label="MM-dd-yy" value="MM-dd-yy" />
						</listbox>
					</hlayout>
					<div>
						<label sclass="hightlight">Datebox</label>
						and
						<label sclass="hightlight">Listbox</label>
						in select mold
					</div>
				</row>
				<row>
					E-mail:
					<cell>
						<textbox value="@bind(fx.email)" width="150px" tabindex="9" />
						<label class="error"
							value="@load(vmsgs['email'])" />
					</cell>
					<div>
						<label sclass="hightlight">Textbox</label>
						with regexp constraint
					</div>

				</row>
				<row>
					Memo:
					<vlayout>
						<div style="width:375px;text-align:right;padding:0;">
							Adjust Height:
							<spinner constraint="no negative,no zero"
								value="@load(vm.memoHeight)"
								onChanging="@command('changeMemoHeight')" tabindex="10" />
						</div>
						<textbox rows="@load(vm.memoHeight)" value="@bind(fx.memo)"
							width="370px;" tabindex="11" />
					</vlayout>
					<div>
						<label sclass="hightlight">Textbox</label>
						with multiple rows and
						<label sclass="hightlight">Spinner</label>
					</div>
				</row>
				<row>
					Validation:
					<vlayout>
						<hlayout>
							<textbox value="@bind(vm.captchaInput)"
								width="150px"  tabindex="12" />
							<label class="error"
								value="@load(vmsgs['captcha'])" />
						</hlayout>
						<hlayout>
							<captcha value="@load(vm.captcha)"
								bgColor="@load(vm.backgroundColour)" 
								fontColor="@load(vm.foregroundColour)"
								width="150px" height="50px" 
								frame="true" />
							<vlayout>
								<button label="Regenerate"
									onClick="@command('regenerate')" width="100px" />
								<hlayout>
									<colorbox
										value="@bind(vm.backgroundColour)" width="35px" />
									<colorbox
										value="@bind(vm.foregroundColour)" width="35px" />
								</hlayout>
							</vlayout>
						</hlayout>
					</vlayout>
					<div>
						<label sclass="hightlight">Captcha</label>
						and
						<label sclass="hightlight">Colorbox</label>
					</div>
				</row>
				<row>
					Appointment Time
					<timepicker/>
					<label sclass="hightlight">Timepicker</label>
				</row>
				<row>
					<cell colspan="3" style="text-align:center">
						<vlayout>
							<label visible="@load(empty vmsgs)"
								value="@load(empty vmsgs ? 'Form successfully submitted!' : '', before='submit')" />
							<button label="Submit" onClick="@command('submit')"
								width="100px" height="30px" />
						</vlayout>
					</cell>
				</row>
			</rows>
		</grid>
	</div>
</zk>

package demo.input.form_sample;

public class UserForm {
	private RandomStringGenerator rsg = new RandomStringGenerator(4);

	private User user = new User();
	private String retypedPassword;
	private String captcha = rsg.getRandomString(), captchaInput;

	public User getUser() {
		return user;
	}

	public void setUser(User user) {
		this.user = user;
	}

	public String getRetypedPassword() {
		return retypedPassword;
	}

	public void setRetypedPassword(String retypedPassword) {
		this.retypedPassword = retypedPassword;
	}

	public String getCaptcha() {
		return captcha;
	}

	public void setCaptcha(String captcha) {
		this.captcha = captcha;
	}

	public String getCaptchaInput() {
		return captchaInput;
	}

	public void setCaptchaInput(String captchaInput) {
		this.captchaInput = captchaInput;
	}
	
	public void regenerateCaptcha() {
		this.captcha = rsg.getRandomString();
	}

}

package demo.input.form_sample;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.event.InputEvent;

public class FormViewModel extends UserForm {
	private String dateFormat;
	private int memoHeight = 6;
	private String foregroundColour = "#000000", backgroundColour = "#FDC966";

	public String getForegroundColour() {
		return foregroundColour;
	}

	public void setForegroundColour(String foregroundColor) {
		this.foregroundColour = foregroundColor;
	}

	public String getBackgroundColour() {
		return backgroundColour;
	}

	public void setBackgroundColour(String backgroundColor) {
		this.backgroundColour = backgroundColor;
	}

	public String getDateFormat() {
		return dateFormat;
	}

	public void setDateFormat(String dateFormat) {
		this.dateFormat = dateFormat;
	}

	public int getMemoHeight() {
		return memoHeight;
	}

	public void setMemoHeight(int memoHeight) {
		this.memoHeight = memoHeight;
	}

	@Command
	@NotifyChange("memoHeight")
	public void changeMemoHeight(
			@ContextParam(ContextType.TRIGGER_EVENT) InputEvent change) {
		try {
			int parsed = Integer.parseInt(change.getValue());
			if (parsed > 0) {
				this.memoHeight = parsed;
			}
		} catch (NumberFormatException nfe) {
			// nothing that we can do here, the validation should pick it up
		}
	}

	@Command
	@NotifyChange("captcha")
	public void regenerate() {
		this.regenerateCaptcha();
	}

	@Command
	public void submit() {
	}

}

package demo.input.form_sample;

import java.util.Map;

import org.zkoss.bind.Property;
import org.zkoss.bind.ValidationContext;
import org.zkoss.bind.validator.AbstractValidator;

public class FormValidator extends AbstractValidator {
	
	public void validate(ValidationContext ctx) {
		//all the bean properties
		Map<String,Property> beanProps = ctx.getProperties(ctx.getProperty().getBase());
		
		//first let's check the passwords match
		validatePasswords(ctx, (String)beanProps.get("password").getValue(), (String)ctx.getValidatorArg("retypedPassword"));
		validateAge(ctx, (Integer)beanProps.get("age").getValue());
		validateWeight(ctx, (Double)beanProps.get("weight").getValue());
		validateEmail(ctx, (String)beanProps.get("email").getValue());
		validateCaptcha(ctx, (String)ctx.getValidatorArg("captcha"), (String)ctx.getValidatorArg("captchaInput"));
	}
	
	private void validatePasswords(ValidationContext ctx, String password, String retype) {	
		if(password == null || retype == null || (!password.equals(retype))) {
			this.addInvalidMessage(ctx, "password", "Your passwords do not match!");
		}
	}
	
	private void validateAge(ValidationContext ctx, int age) {
		if(age <= 0) {
			this.addInvalidMessage(ctx, "age", "Your age should be > 0!");
		}
	}
	
	private void validateWeight(ValidationContext ctx, double weight) {
		if(weight <= 0) {
			this.addInvalidMessage(ctx, "weight", "Your weight should be > 0!");
		}
	}	
	
	private void validateEmail(ValidationContext ctx, String email) {
		if(email == null || !email.matches(".+@.+\\.[a-z]+")) {
			this.addInvalidMessage(ctx, "email", "Please enter a valid email!");			
		}
	}
	
	private void validateCaptcha(ValidationContext ctx, String captcha, String captchaInput) {
		if(captchaInput == null || !captcha.equals(captchaInput)) {
			this.addInvalidMessage(ctx, "captcha", "The captcha doesn't match!");
		}
	}
	
}

package demo.input.form_sample;

import java.util.Random;

public class RandomStringGenerator {
	private int length;
	private String alphabet = "abcdefghijklmnopqrstuvwxyz";
	private final Random rn = new Random();
	
	public RandomStringGenerator(int length) {
		if(length <= 0)
			throw new IllegalArgumentException("Length cannot be less than or equal to 0");
		
		this.length = length;
	}

	public int getLength() {
		return length;
	}

	public void setLength(int length) {
		this.length = length;
	}
		
	public String getRandomString() {
		StringBuilder sb = new StringBuilder(this.length);
		
		for(int i=0; i<this.length; i++) {
			sb.append(alphabet.charAt(rn.nextInt(alphabet.length())));
		}
		
		return sb.toString();
	}
}

package demo.input.form_sample;

import java.util.Date;

public class User {
	private String userName, password, telephone, email, memo;
	private int age;
	private double weight;
	private Date birthday;

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getTelephone() {
		return telephone;
	}

	public void setTelephone(String telephone) {
		this.telephone = telephone;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getMemo() {
		return memo;
	}

	public void setMemo(String memo) {
		this.memo = memo;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public double getWeight() {
		return weight;
	}

	public void setWeight(double weight) {
		this.weight = weight;
	}

	public Date getBirthday() {
		return birthday;
	}

	public void setBirthday(Date birthday) {
		this.birthday = birthday;
	}

}