FormsLesson 128Free preview
Inline Form
This lesson is part of How To · All levels
Summary
Inline forms place the input and the button in one horizontal line. This pattern is suitable for short forms such as search or newsletter subscriptions. On a narrow screen, the elements can be wrapped into the next row to keep them comfortable to use.
Key points
- The form uses a display: flex to align the input and the button.
- The input is given a flex: 1 to fill the available space.
- Flex-wrap: wrap causes the element to descend to the new line when space runs out.
- Inline forms are less suitable for long forms with many fields.
- Labels remain necessary even though they can be hidden visually.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.