04 - Forms

Replace the fixed draft value with a text input. This chapter only teaches how input writes to draft.

Code

<script src="/sercrod.js"></script>

<serc-rod data='{"draft":"","todos":[]}'>
	<h2>Todo</h2>
	<p>
		<label>
			Title:
			<input type="text" *input="draft">
		</label>
	</p>
	<p>Draft: %draft%</p>
</serc-rod>

How to read the form

*input="draft" writes the input value into draft.
%draft% shows the value that was written.
This input updates immediately, so the draft paragraph changes while you type.
No Todo is added yet. That keeps input behavior separate from button behavior.

Result

Todo Title: Draft: %draft%

The next step will show different messages based on Todo state.

Previous: Events

Next: Conditions

Back to Tutorial index