Intermediate HTML/CSS

Forms & User Input

CSCI 4513

Week 1, Lecture 2

Today's Learning Objectives

🎯 Master HTML form elements
🎯 Understand form validation
🎯 Style forms with CSS
🎯 Create accessible forms

Norse Mythology Connection

Odin's Sacrifice at Mimir's Well

Odin sacrificed his eye to gain profound wisdom, just as learning web development demands sacrifice of time and comfort for deep understanding.

The Tale:

At the roots of Yggdrasil lies Mimir's Well, a spring of profound wisdom guarded by Mimir. Though already the Allfather and wisest of the Aesir, Odin sought even greater knowledge. When he journeyed to drink from the well, Mimir demanded a steep price: one of Odin's eyes.

Without hesitation, Odin plucked out his own eye and cast it into the well's depths. In exchange, he gained wisdom that transformed him from a powerful god into the wisest being in all the Nine Realms—foresight to see beyond the immediate and prepare for Ragnarök itself.

Odin's Sacrifice

Watch the Story

Tip: Click the gear icon to set playback speed to 1.5x

The Price of Wisdom

Odin's Sacrifice

Gave up his eye permanently
Traded comfort for knowledge
Gained power to shape worlds
Never questioned the decision

Your Commitment

Sacrifice time for practice
Trade easy solutions for understanding
Gain power to shape digital experiences
Build permanent skills and projects

💡 Key Insight: Like Odin's sacrifice, the hours you invest in learning can't be reclaimed—but the wisdom gained transforms how you see and create digital experiences.

Reflection Questions

Click each card to reveal thoughts!

❓ Question 1

What are you willing to "sacrifice" this semester to gain web development skills?

❓ Question 2

Odin already had significant power before seeking Mimir's Well. Why do experienced developers continue learning new technologies?

❓ Question 3

What "permanent testaments" will you create this semester—projects, portfolios, or skills that remain after the course ends?

❓ Question 4

Like Mimir's head and Odin's eye, what are you willing to leave in the "knowledge well" for those who may drink from the waters in the future? Or did you think you were the only Odin?

Why Forms Matter

Forms are your user's gateway into your backend—the user provides data in a form, and you do stuff with it.

Critical Considerations:

Use the proper input types for each data item
Make forms as dead-stupid-simple as possible
Provide clear feedback and validation
Protect backend systems from incorrect data

Our Class API

I've built a real API for this class! You can submit forms to it and see actual responses.

Available Endpoints:

GET /api/search

Search programming resources

Query params: ?q=javascript

POST /api/messages

Post to our class message board

Fields: username, message

📚 Full Documentation: API Playground - Test endpoints and see code examples!

Base URL: https://aw.profbobby.com/api/

Testing APIs with Postman

What is Postman?

A tool for testing APIs without writing code. Perfect for exploring endpoints before building forms.

Try It Now:

Download from postman.com/downloads
Create a new request
Set method to GET
Enter: https://aw.profbobby.com/api/search?q=javascript
Click Send

POST Request Setup:

Set method to POST
URL: https://aw.profbobby.com/api/messages
Go to Body tab
Select raw and JSON
Enter:

{
  "username": "YourName",
  "message": "Hello from Postman!"
}

Base URL: https://aw.profbobby.com/api/

⚡ Code Along with Me!

This is a hands-on lecture! You should be coding as we go.

Your Task:

🖥️ Create a new HTML file for a demo form
✍️ Add each example we cover to your form
💪 Practice every concept as I teach it
👀 See the results in your browser

🚨 Can't keep up? RAISE YOUR HAND!

Don't fall behind silently. Ask questions until you figure out the issue. That's what I'm here for!

The Form Element

The <form> element is a container that wraps all inputs users interact with.

<!-- Using our class API! -->
<form action="https://aw.profbobby.com/api/messages" method="post">
  <!-- form controls go here -->
</form>

Essential Attributes:

action: URL where form data is sent
method: HTTP request method (GET or POST)
- GET: Retrieve something (e.g., search results)
- POST: Change something (e.g., create account)

Base URL: https://aw.profbobby.com/api/

Input Elements & Labels

<form action="https://aw.profbobby.com/api/messages" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
</form>

Key Points:

Label for attribute matches input id
Clicking label focuses the input (accessibility!)
Input name attribute is required for submission
Name acts as variable name when data is sent to server

Essential Input Attributes

<label for="username">Username:</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="Enter your username..."
>

id: Unique identifier, links to label
name: Variable name sent to server (required!)
placeholder: Hint text showing expected format
type: Determines input behavior and validation

⚠️ Important: Without a name attribute, the input will be ignored when the form is submitted!

Common Input Types

<!-- Text Input -->
<input type="text" name="username">

<!-- Email Input (validates format) -->
<input type="email" name="email" placeholder="you@example.com">

<!-- Password Input (masks characters) -->
<input type="password" name="password">

<!-- Number Input (only accepts numbers) -->
<input type="number" name="quantity" min="1" max="10">

<!-- Date Input (date picker calendar) -->
<input type="date" name="dob">

Text Area

For multi-line text input (comments, reviews, descriptions):

<label for="bio">Biography:</label>
<textarea
  id="bio"
  name="bio"
  rows="20"
  cols="60"
>Some initial content</textarea>

rows: Initial height of text area
cols: Initial width of text area
User can resize by dragging bottom-right corner
Has closing tag (unlike input elements)

Select Dropdowns

<select name="car">
  <option value="tesla">Tesla</option>
  <option value="volvo" selected>Volvo</option>
  <option value="bmw">BMW</option>
</select>

<!-- Grouped Options -->
<select name="fashion">
  <optgroup label="Clothing">
    <option value="t_shirt">T-Shirts</option>
    <option value="sweater">Sweaters</option>
  </optgroup>
  <optgroup label="Foot Wear">
    <option value="sneakers">Sneakers</option>
    <option value="boots">Boots</option>
  </optgroup>
</select>

Radio Buttons & Checkboxes

Radio Buttons (choose one)

<input type="radio"
  id="adult"
  name="ticket_type"
  value="adult"
  checked>
<label for="adult">Adult</label>

<input type="radio"
  id="child"
  name="ticket_type"
  value="child">
<label for="child">Child</label>

Same name = same group

Checkboxes (choose many)

<input type="checkbox"
  id="sausage"
  name="topping"
  value="sausage">
<label for="sausage">
  Sausage
</label>

<input type="checkbox"
  id="pepperoni"
  name="topping"
  value="pepperoni">
<label for="pepperoni">
  Pepperoni
</label>

Button Types

<!-- Submit Button (submits form) -->
<button type="submit">Submit</button>

<!-- Reset Button (clears all form data) -->
<button type="reset">Reset</button>

<!-- Generic Button (for JavaScript) -->
<button type="button">Click to Toggle</button>

⚠️ Important: Default button type is "submit". Always specify type="button" for non-submit buttons in forms to avoid unwanted form submissions!

Organizing Forms: Fieldset & Legend

<fieldset>
  <legend>Contact Details</legend>

  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

<fieldset>
  <legend>Delivery Details</legend>

  <label for="address">Street Address:</label>
  <input type="text" id="address" name="address">

  <label for="city">City:</label>
  <input type="text" id="city" name="city">
</fieldset>

Groups related inputs into logical, visually distinct sections

Styling Forms: Challenges

1. Default Browser Styles

Each browser has different default styles for form controls. Must override for consistency.

2. Difficult Elements

Easy: Text inputs, textareas, email, password
Tricky: Radio buttons and checkboxes (require custom CSS)
Impossible: Date pickers, file uploads (need JavaScript libraries)

💡 Tip: For complex custom styling, consider JavaScript libraries that provide ready-made solutions.

Form Validation

Validations set constraints that determine what data users can enter. When rules are broken, feedback appears to help users fix the issue.

Why Validate?

Protect backend systems from incorrect data
Improve user experience with immediate feedback
Meet accessibility guidelines
Prevent common data entry errors

Required & Length Validations

<!-- Required Field -->
<label for="email">Email: *</label>
<input type="email" id="email" name="email" required>

<!-- Minimum Length -->
<label for="username">Username:</label>
<input type="text" id="username" name="username"
       minlength="3">

<!-- Maximum Length -->
<textarea name="post" maxlength="280"></textarea>

<!-- Combined Validations -->
<textarea name="comment"
          minlength="10"
          maxlength="500"
          required></textarea>

Always indicate required fields with * and explain what it means!

Number Range & Pattern Validations

<!-- Min/Max for Numbers -->
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity"
       min="1" max="6">

<!-- Pattern Validation (Regular Expression) -->
<label for="zipcode">Zip Code:</label>
<input type="text"
       id="zipcode"
       name="zipcode"
       pattern="[0-9]{5}(-[0-9]{4})?"
       placeholder="12345 or 12345-6789">

<!-- Email & URL have built-in patterns -->
<input type="email" name="email">
<input type="url" name="website">

Understanding Patterns (Regex)

Pattern breakdown: [0-9]{5}(-[0-9]{4})?

[0-9] = any digit 0-9
{5} = exactly 5 times
(-[0-9]{4}) = dash + 4 digits
? = optional (0 or 1 times)

Result: Matches 12345 or 12345-6789

Common Pattern Symbols:

[a-z] = lowercase letter
[A-Z] = uppercase letter
[a-zA-Z] = any letter
. = any character
+ = one or more
* = zero or more

Styling Valid & Invalid Inputs

/* Valid inputs get green border */
input:valid {
  border: 2px solid green;
}

/* Invalid inputs get red border */
input:invalid {
  border: 2px solid red;
}

/* Focused inputs get blue border and shadow */
input:focus {
  border: 2px solid blue;
  box-shadow: 0 0 5px rgba(0, 100, 255, 0.5);
}

/* Password confirmation doesn't match */
input[type="password"]:invalid {
  border: 2px solid #cc0000;
}

Use :valid, :invalid, and :focus pseudo-classes for visual feedback

Validation Limitations

Built-in HTML Validations:

✅ Quick and easy to implement
✅ Provide immediate user feedback
❌ Limited customization of error messages
❌ Can't validate complex rules (e.g., password match)

⚠️ Important Security Note:

Client-side validation improves UX but is NOT secure. Always validate on the server too! Users can bypass client-side validations.

🚀 Live Demo: Post to Class API!

Let's test our knowledge with a real form submission!

What's Happening:

Form sends POST to aw.profbobby.com/api/messages
Server validates username and message
Data stored in PostgreSQL database
Server returns JSON response

View all messages: aw.profbobby.com/api/messages

Base URL: https://aw.profbobby.com/api/

Project: Sign-up Form

Your Assignment:

Build a sign-up form for an imaginary service that demonstrates everything you've learned about HTML forms, validation, and styling.

Key Requirements:

Large background image section
Logo with semi-transparent overlay
Multiple form inputs with proper labels
Password validation (red border if invalid)
Focus states with blue border and box-shadow
Organized with fieldset/legend elements

Project Tips & Assets

Assets Needed:

Background image from Unsplash (credit the creator!)
External font (e.g., Norse Bold) for logo
Odin logo image for sidebar

Styling Hints:

Button color: #596D48 (matches background tones)
Default border: #E5E7EB (light gray)
Invalid password: red border using :invalid
Focus state: blue border using :focus

💡 Note: Don't worry about mobile responsiveness yet. JavaScript password matching will be covered in a future lesson.

Today's Takeaways

You Can Now:

✅ Create well-structured HTML forms
✅ Validate user input
✅ Style forms effectively
✅ Submit data to a real API!

📅 Next Class: Intermediate CSS - Grid

📝 Homework: Sign-up Form

🔗 Resource: API Playground - Practice API calls anytime!