Responsive Design + Forms
---
theme: seriph
title: Responsive Design + Forms
info: "Module F-CSS-003: viewport meta, mobile-first media queries, basic form elements, label, form UX patterns"
---
# Responsive Design + Forms
---
# What Is Responsive Design?
Websites that **adapt** to different screen sizes:
- Desktop monitors
- Laptops
- Tablets
- Mobile phones
> One website, many devices.
---
# The Viewport Meta Tag
**Essential** for responsive design:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Without this, mobile browsers assume your site is desktop-only!
Open your `index.html`. Is this in your `<head>`?
> AI tip: AI generates desktop-width layouts by default. Always test your page on mobile using DevTools.
---
# Mobile-First Approach
1. Design for **mobile** first (smallest screen)
2. Add complexity for **larger** screens
3. Results in faster mobile sites
4. Forces you to prioritize content
```css
/* Base styles (mobile) */
.container { width: 100%; }
/* Tablet and up */
@media (min-width: 768px) {
.container { width: 750px; }
}
```
---
# Media Query Syntax
```css
@media (condition) {
/* Styles that apply when condition is true */
}
```
**Common conditions:**
```css
@media (min-width: 768px) { } /* 768px and wider */
@media (max-width: 767px) { } /* 767px and narrower */
```
Mobile-first = use `min-width` (start small, add up).
> AI tip: When you ask AI for responsive CSS, specify "mobile-first with min-width media queries." Otherwise it may generate desktop-first code.
---
# Common Breakpoints
| Device | Width |
|--------|-------|
| Mobile | < 576px |
| Tablet | 576px - 768px |
| Desktop | 768px - 1024px |
| Large Desktop | > 1024px |
> These are guidelines, not rules. Test on real devices!
---
# Media Query Example
```css
/* Mobile first (default): single column */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* Tablet: 2 columns */
@media (min-width: 576px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 columns */
@media (min-width: 992px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
```
---
# Fluid Layouts + Responsive Images
Use **percentages** and **max-width** to stay flexible:
```css
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
```
Make images behave:
```css
img {
max-width: 100%; /* never wider than container */
height: auto; /* maintain aspect ratio */
}
```
---
# Testing in DevTools
1. Open DevTools (**F12**)
2. Click the **device icon** (or Ctrl+Shift+M)
3. Select a device or enter a custom size
**Check:**
- Does content fit without horizontal scroll?
- Are fonts readable without zooming?
- Are tap targets at least 48px?
---
# Why Forms Matter
Forms let users **send data** to a website:
- Sign up / Login
- Search bars
- Contact forms
- Settings & checkout
Open any site you use daily. Find a form, then inspect it in DevTools. What HTML elements are inside?
---
# The `<form>` Element
```html
<form action="/submit" method="POST">
<!-- form fields go here -->
<button type="submit">Submit</button>
</form>
```
- `action`: where to send the data (a URL or server endpoint)
- `method`: **GET** puts data in the URL; **POST** puts data in the request body
> Use POST for anything sensitive (login, checkout). We will cover this more with JavaScript.
---
# Labels + Text Input
```html
<label for="full-name">Name:</label>
<input type="text" id="full-name" name="name"
placeholder="Enter your name">
```
**Always use `<label>`!**
- Improves accessibility (screen readers need it)
- Clicking the label focuses the input
> `for` matches the input's `id`. The `name` attribute is the key sent to the server.
> AI tip: AI sometimes forgets `<label>` elements or skips the `for` attribute. Always check that every input has a matching label.
---
# Input Types
| Type | Use for |
|------|---------|
| `text` | Single line text |
| `email` | Email with validation |
| `password` | Hidden characters |
| `number` | Numeric input |
| `tel` | Phone numbers |
| `date` | Date picker |
```html
<input type="email" placeholder="email@example.com">
<input type="password" placeholder="Password">
<input type="number" min="0" max="100">
<input type="date">
```
---
# Textarea, Select, Checkbox, Radio
```html
<!-- Multi-line text -->
<textarea id="msg" name="msg" rows="4"></textarea>
<!-- Dropdown -->
<select id="country" name="country">
<option value="">Choose...</option>
<option value="us">United States</option>
</select>
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>
<!-- Radio (same name = one choice) -->
<input type="radio" id="r1" name="contact" value="email">
<label for="r1">Email</label>
<input type="radio" id="r2" name="contact" value="phone">
<label for="r2">Phone</label>
```
---
# HTML5 Validation
The browser validates for you, no JavaScript needed:
```html
<input type="text" required>
<input type="text" minlength="3" maxlength="50">
<input type="number" min="1" max="100">
<input type="email" required>
```
Try submitting a form with an empty `required` field. What happens?
> Custom validation logic comes later with JavaScript.
> AI tip: AI may skip `required` and other validation attributes. Always add them yourself after reviewing the generated form.
---
# Grouping Fields
You can wrap related inputs in `<fieldset>` with a `<legend>` label. This helps screen readers and adds visual structure.
```html
<fieldset>
<legend>Shipping Address</legend>
<label for="street">Street:</label>
<input type="text" id="street" name="street">
</fieldset>
```
You will not need `<fieldset>` often in this course, but know it exists for longer forms.
---
# Styling Forms
```css
input, textarea, select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px; /* prevents mobile zoom */
}
input:focus, textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}
```
> Setting `font-size: 16px` on inputs prevents iOS Safari from zooming in on focus.
> AI tip: AI-generated forms often look fine on desktop but break on mobile. Always resize the browser to check.
---
# Your Turn
Create `contact.html` in your course repo. Build a responsive contact form with:
1. Fields: name, email, message (use appropriate `type` attributes)
2. Add `required` validation on each field
3. Style with CSS: spacing, focus states, hover on submit button
4. Make it responsive: full-width on mobile, narrower on desktop
5. Test in DevTools device mode at different sizes
**Try with Copilot:** "Add a styled, responsive contact form."
Then review every attribute and element it generated.
---
# References
- [MDN: Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
- [MDN: Web Forms](https://developer.mozilla.org/en-US/docs/Learn/Forms)
- [MDN: Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
- [Chrome DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/)
Topics Covered
- viewport meta
- mobile-first media queries
- basic form elements
- <label>
- form UX patterns
Content Slides Open fullscreen ↗
Taught In
- Monday, 6/8 — Responsive design · Forms