Form basics

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Form basics—the ideas, syntax, and habits you need before moving on in Pico CSS.

Forms are where users convert and where security mistakes (validation, labels) show up first.

You will apply Form basics in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Form basics in your own words.

Pico styles native <form> controls automatically—no form-control class on every input. Your job is the same as HTML forms fundamentals: meaningful labels, correct type attributes, and a clear submit path.

Labels and helper text

Put the label inside <label> wrapping the control, or associate with for/id. Add hints with <small> below the field—Pico mutes helper copy and keeps vertical rhythm consistent with inputs and buttons.

Compared to Bootstrap or Bulma

Those frameworks wrap inputs in field / mb-3 divs. Pico assumes a flat form stack: label → input → small helper → next field. Full-width inputs match full-width buttons so signup and settings forms align without extra layout classes.

Self-check

Which HTML element carries optional hint text under a field in Pico?
Why do Pico inputs and submit buttons share the same width by default?
What must every control still have for accessibility, with or without Pico?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Native controls only?
fieldset grouping?

No discussion yet. Be the first to ask a question.