Basic form controls

This page shows how to bind common form controls to Sercrod data with *input, and how to share the same form state between parent and child hosts.

If you mainly want to see parent/child binding in action, you can skip ahead:

Skip to parent/child binding examples

Single checkbox

A single checkbox usually maps to a boolean field.

Code

<serc-rod data='{"form":{"agree":false}}'>
	<p>
		<label>
			<input type="checkbox" *input="form.agree">
			I agree to the terms
		</label>
	</p>

	<p>
		Status:
		<span *print="form.agree ? 'Agreed' : 'Not agreed'"></span>
	</p>
</serc-rod>

Sample

I agree to the terms Status:

Checkbox group (array)

When you bind a checkbox group to an array, Sercrod keeps the checked values in that array.

Code

<serc-rod data='{"form":{"hobbies":["music"]}}'>
	<p>Choose your hobbies:</p>

	<p>
		<label>
			<input type="checkbox" value="music" *input="form.hobbies">
			Music
		</label>
		<label>
			<input type="checkbox" value="sports" *input="form.hobbies">
			Sports
		</label>
		<label>
			<input type="checkbox" value="reading" *input="form.hobbies">
			Reading
		</label>
	</p>

	<p>
		Selected:
		<span *print="form.hobbies.join(', ')"></span>
	</p>
</serc-rod>

Sample

Choose your hobbies: Music Sports Reading Selected:

Radio group

A radio group usually maps to a single string field.

Code

<serc-rod data='{"form":{"plan":"basic"}}'>
	<p>Choose your plan:</p>

	<p>
		<label>
			<input type="radio" name="plan" value="basic" *input="form.plan">
			Basic
		</label>
		<label>
			<input type="radio" name="plan" value="pro" *input="form.plan">
			Pro
		</label>
		<label>
			<input type="radio" name="plan" value="team" *input="form.plan">
			Team
		</label>
	</p>

	<p>
		Current plan:
		<span *print="form.plan"></span>
	</p>
</serc-rod>

Sample

Choose your plan: Basic Pro Team Current plan:

Select (single)

A single select works like a radio group, but with one control.

Code

<serc-rod data='{"form":{"country":"jp"}}'>
	<p>Select your country:</p>

	<p>
		<select *input="form.country">
			<option value="jp">Japan</option>
			<option value="us">United States</option>
			<option value="fr">France</option>
		</select>
	</p>

	<p>
		Value:
		<span *print="form.country"></span>
	</p>
</serc-rod>

Sample

Select your country: Value:

Select (multiple)

A multi select binds to an array of values, similar to a checkbox group.

Code

<serc-rod data='{"form":{"langs":["js"]}}'>
	<p>Choose languages:</p>

	<p>
		<select *input="form.langs" multiple size="4">
			<option value="js">JavaScript</option>
			<option value="py">Python</option>
			<option value="rb">Ruby</option>
			<option value="php">PHP</option>
		</select>
	</p>

	<p>
		Selected:
		<span *print="form.langs.join(', ')"></span>
	</p>
</serc-rod>

Sample

Choose languages: Selected:

Parent/child binding

You can nest Sercrod hosts to share the same form state between parent and child sections. Both hosts see the same data object, so changes in one place are reflected in the other.

In the examples below, the parent and the child both have form controls. Typing or clicking in either host updates the same field, so values and UI state (checked, selected, and so on) stay in sync.

Text input
Textarea
Single checkbox
Checkbox group
Radio group
Select (single)
Select (multiple)

Text input (parent and child both editable)

Both parent and child have an input bound to the same field. Typing in either box updates the other.

Code

<serc-rod data='{"form":{"name":"Sercrod"}}'>
	<h4>Parent</h4>
	<p>
		Name:
		<input type="text" *input="form.name">
	</p>
	<p>Parent preview: %form.name%</p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			Name:
			<input type="text" *input="form.name">
		</p>
		<p>Child preview: %form.name%</p>
	</serc-rod>
</serc-rod>

Sample

Parent Name: Parent preview: %form.name% Child Name: Child preview: %form.name%

Textarea (parent and child both editable)

Parent and child share the same textarea content. Editing in one area updates the other and the previews.

Code

<serc-rod data='{"form":{"note":"Initial text"}}'>
	<h4>Parent</h4>
	<p>
		<textarea rows="3" cols="30" *input="form.note"></textarea>
	</p>
	<p>Parent preview: %form.note%</p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			<textarea rows="3" cols="30" *input="form.note"></textarea>
		</p>
		<p>Child preview: %form.note%</p>
	</serc-rod>
</serc-rod>

Sample

Parent Parent preview: %form.note% Child Child preview: %form.note%

Single checkbox (parent and child both clickable)

Both parent and child checkboxes are bound to the same boolean field. Checking either box updates both.

Code

<serc-rod data='{"form":{"subscribe":false}}'>
	<h4>Parent</h4>
	<p>
		<label>
			<input type="checkbox" *input="form.subscribe">
			Subscribe to updates
		</label>
	</p>
	<p>Parent status: <span *print="form.subscribe ? 'Subscribed' : 'Not subscribed'"></span></p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			<label>
				<input type="checkbox" *input="form.subscribe">
				Child subscribe
			</label>
		</p>
		<p>Child status: <span *print="form.subscribe ? 'Subscribed' : 'Not subscribed'"></span></p>
	</serc-rod>
</serc-rod>

Sample

Parent Subscribe to updates Parent status: Child Child subscribe Child status:

Checkbox group (parent and child both editable)

Parent and child share the same array of tags. Clicking any checkbox adds or removes that value for both sides.

Code

<serc-rod data='{"form":{"tags":["important"]}}'>
	<h4>Parent</h4>
	<p>
		<label>
			<input type="checkbox" value="important" *input="form.tags">
			Important
		</label>
		<label>
			<input type="checkbox" value="todo" *input="form.tags">
			Todo
		</label>
		<label>
			<input type="checkbox" value="archived" *input="form.tags">
			Archived
		</label>
	</p>
	<p>Parent tags: <span *print="form.tags.join(', ')"></span></p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			<label>
				<input type="checkbox" value="important" *input="form.tags">
				Important (child)
			</label>
			<label>
				<input type="checkbox" value="todo" *input="form.tags">
				Todo (child)
			</label>
			<label>
				<input type="checkbox" value="archived" *input="form.tags">
				Archived (child)
			</label>
		</p>
		<p>Child tags: <span *print="form.tags.join(', ')"></span></p>
	</serc-rod>
</serc-rod>

Sample

Parent Important Todo Archived Parent tags: Child Important (child) Todo (child) Archived (child) Child tags:

Radio group (parent and child both clickable)

The parent and child each have their own radio group, but both are bound to the same field. A change on one side updates the choice on the other side.

Code

<serc-rod data='{"form":{"theme":"light"}}'>
	<h4>Parent</h4>
	<p>
		<label>
			<input type="radio" name="theme-parent" value="light" *input="form.theme">
			Light
		</label>
		<label>
			<input type="radio" name="theme-parent" value="dark" *input="form.theme">
			Dark
		</label>
	</p>
	<p>Parent theme: <span *print="form.theme"></span></p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			<label>
				<input type="radio" name="theme-child" value="light" *input="form.theme">
				Light (child)
			</label>
			<label>
				<input type="radio" name="theme-child" value="dark" *input="form.theme">
				Dark (child)
			</label>
		</p>
		<p>Child theme: <span *print="form.theme"></span></p>
	</serc-rod>
</serc-rod>

Sample

Parent Light Dark Parent theme: Child Light (child) Dark (child) Child theme:

Select (single, parent and child both editable)

Parent and child each have a select bound to the same field. Selecting a value in one control updates the other.

Code

<serc-rod data='{"form":{"fruit":"orange"}}'>
	<h4>Parent</h4>
	<p>
		<select *input="form.fruit">
			<option value="apple">Apple</option>
			<option value="banana">Banana</option>
			<option value="orange">Orange</option>
		</select>
	</p>
	<p>Parent selection: <span *print="form.fruit"></span></p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			<select *input="form.fruit">
				<option value="apple">Apple (child)</option>
				<option value="banana">Banana (child)</option>
				<option value="orange">Orange (child)</option>
			</select>
		</p>
		<p>Child selection: <span *print="form.fruit"></span></p>
	</serc-rod>
</serc-rod>

Sample

Parent Parent selection: Child Child selection:

Select (multiple, parent and child both editable)

Parent and child share the same array for a multi select. Selecting or deselecting options in either control updates the other.

Code

<serc-rod data='{"form":{"langs":["js"]}}'>
	<h4>Parent</h4>
	<p>
		<select *input="form.langs" multiple size="4">
			<option value="js">JavaScript</option>
			<option value="py">Python</option>
			<option value="rb">Ruby</option>
			<option value="php">PHP</option>
		</select>
	</p>
	<p>Parent languages: <span *print="form.langs.join(', ')"></span></p>

	<serc-rod>
		<h4>Child</h4>
		<p>
			<select *input="form.langs" multiple size="4">
				<option value="js">JavaScript (child)</option>
				<option value="py">Python (child)</option>
				<option value="rb">Ruby (child)</option>
				<option value="php">PHP (child)</option>
			</select>
		</p>
		<p>Child languages: <span *print="form.langs.join(', ')"></span></p>
	</serc-rod>
</serc-rod>

Sample

Parent Parent languages: Child Child languages:

Next: Lifecycle basics

After conditions and loops, the next step is to look at basic lifecycle patterns such as loading and saving data.

Next: Lifecycle basics