<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="form.css"?>
<body>
	<form>

	<!--
	
	CONTROL tag will guarantee the association
	between LABEL and INPUT, without nesting
	INPUT in LABEL, which used to make form styling more difficult,
	or using FOR attribute at all, since no one maintains 
	brotherhood better than parent!

	Using ID instead of NAME.
	Notice that storing ID in CONTROL instead of INPUT
	will prevent repeating ID/NAME in radio INPUTs.
	
	OUTPUT should contain input instructions and/or validation status.
	
	-->

		<control id="name">
			<label>Name:</label>
			<input type="text" />
			<output></output>
		</control>

		<control id="id">
			<label>ID Number:</label>
			<input type="number" />
			<output></output>
		</control>
		
		<control id="email">
			<label>Email:</label>
			<input type="email" />
			<output></output>
		</control>

		<control id="website">
			<label>Website:</label>
			<input type="url" />
			<output></output>
		</control>

		<control id="tel">
			<label>Phone:</label>
			<input type="tel" />
			<output></output>
		</control>

		<control id="attachment">
			<label>Attachment:</label>
			<input type="file" />
			<output></output>
		</control>

		<control id="message">
			<label>Comment:</label>
			<textarea></textarea>
			<output></output>
		</control>

		<control id="country">
			<label>Country:</label>
			<select>
					<li value="Syria">Syria</li>
					<li value="Jordan">Jordan</li>
					<li value="KSA">KSA</li>
			</select>
			<output></output>
		</control>

	<!-- CL: Checklist -->
	<!--
		I think it's wrong to deal with checkboxes and radio buttons
		as input elements.
		
		The right input element here is the text itself,
		think of it as a button, but with a simple indicator
		(checkbox or radio button) on the left to show its status.
		
		Notice that using List structure will allow
		the child element to set its status (disabled/enabled)
		depending on its parent's status (checked/unchecked or
		selected/unselected).
		
		Also the appearance of checkboxes and radio buttons can
		be changed using CSS as images.
		
	-->
		<control>
			<label>Marital Status:</label>
			<cl>
				<li id="married">Married
					<cl>
					<li id="hasKids">Has kids</li>
					</cl>
				</li>
				<li id="smoking">Smoking</li>
			</cl>
			<output></output>
		</control>

	<!-- RL: Radiolist -->

		<control id="gender">
			<label>Gender:</label>
			<rl>
				<li value="male">Male</li>
				<li value="female">Female</li>
			</rl>
			<output></output>
		</control>

	<!-- RESET button should also reset OUTPUT contents. -->

		<control>
			<input type="submit">Submit</input>
			<input type="reset">Reset</input>
		</control>

	</form>
</body>