Form controls

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 controls—the ideas, syntax, and habits you need before moving on in Bulma.

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

You will apply Form controls in contexts like: Smaller marketing sites, internal dashboards, and projects that need quick responsive layout with minimal JS.

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

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Native elements get Bulma classes: input for text fields, textarea for multiline copy, checkbox / radio inside control, and select wrapping <select>.

Sizing and grouping

Scale with is-small, is-medium, or is-large on the control element.
Inline radios/checkboxes: sibling control blocks inside one field.
Submit rows: field is-grouped with multiple control children for button clusters.

Disabled controls use the native disabled attribute—Bulma dims them automatically. Read-only text can use input is-static inside a field.

Self-check

Which class belongs on a <select> wrapper?
How do you lay out two buttons side by side at the end of a form?

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

Control you had not used?
Sizing helpers?

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