📬
CC10045 min
Day 19
Forms and Interaction
Let's add some interactivity!
Today's Lesson
Forms collect user input. State tracks what they've typed. When someone fills out your contact form, you'll be able to see what they entered and do something with it.
Today's Tasks
- 1Create a Contact page with a form
- 2Include: Name, Email, Message fields
- 3Add a submit button
- 4For now, just log the data to console
Prompt to Use
Create a Contact page at /contact with a form. Include fields for Name, Email, and Message. When submitted, log the data to the console (we'll save it properly later). Add validation so fields can't be empty. Style it nicely with Tailwind.
Expected Outcome
A working contact form that captures input.
New Terms
- Form
- State
- useState
- Validation
- Console
Pro Tip
Always validate on the frontend (for user experience) AND the backend (for security). We'll add backend validation later.
Coming Tomorrow
We'll learn about environment variables - keeping secrets safe.
P.S. Forms are how websites talk to users. You just built your first conversation.
Your Study Progress
18%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Day 19 of 100
Today's Tasks
0/4