HTML Forms and Input

CMU422: Fundamentals of Web Design - Session 2

Birmingham Newman University

Lecturer: James Williams

Collecting and processing user data

3-hour session • 28 slides • 2 interactive tasks

Session Timeline:

10 min: Registration & waiting
20 min: Opening slides
45 min: Task 1
15 min: Break/Catch up
20 min: Secondary slides
45 min: Task 2
Remaining: Self-study

Learning Objectives

Understand the purpose and structure of HTML forms
Master different input types and their attributes
Learn form validation techniques
Create accessible and user-friendly forms
Handle form submission and data processing

What are HTML Forms?

                    Forms allow users to input data that can be sent to a server
                    for processing
                

Essential for user interaction on websites
Used for login, registration, contact forms, surveys
Can collect various types of data
Provide validation and user feedback

                    <form action="/submit" method="post">

                      <input type="text" name="username">

                      <button type="submit">Submit</button>

                    </form>

Watch: HTML Forms Tutorial

Comprehensive guide to creating and styling HTML forms

Basic Form Structure

                    <form action="destination.php" method="post">

                      <!-- Form elements go here -->

                      <input type="text" name="field_name">

                      <button type="submit">Submit Form</button>

                    </form>

action: Where the form data is sent
method: How the data is sent (GET or POST)
name: Identifies the field for processing

Form Methods: GET vs POST

                    <!-- GET Method -->

                    <form action="/search" method="get">

                      <input type="text" name="query">

                    </form>

                    <!-- POST Method -->

                    <form action="/register" method="post">

                      <input type="text" name="username">

                    </form>

GET: Data visible in URL, limited size, for searches
POST: Data hidden, unlimited size, for sensitive data

Text Input Fields

                    <input type="text" name="username" placeholder="Enter username">

                    <input type="email" name="email" placeholder="Enter email">

                    <input type="password" name="password" placeholder="Enter
                    password">

                    <input type="tel" name="phone" placeholder="Enter phone number">

Watch: HTML Form Elements Tutorial

Learn about different HTML form input types and their attributes

Common Input Attributes

                    <input type="text"

                      name="username"

                      placeholder="Enter username"

                      required

                      maxlength="20"

                      minlength="3"

                      value="default_value"

                      disabled

                    >

required: Field must be filled
placeholder: Hint text
maxlength/minlength: Character limits
value: Default value

Textarea for Long Text

                    <textarea name="message" rows="4" cols="50" placeholder="Enter your
                    message"></textarea>
                

Used for longer text input
rows and cols set dimensions
Can be resized by users

Select Dropdown

                    <select name="country">

                      <option value="">Select a country</option>

                      <option value="us">United States</option>

                      <option value="uk">United Kingdom</option>

                      <option value="ca">Canada</option>

                    </select>

Radio Buttons

                    <p>Select your gender:</p>

                    <input type="radio" name="gender" value="male" id="male">

                    <label for="male">Male</label>

                    <input type="radio" name="gender" value="female" id="female">

                    <label for="female">Female</label>

                    <input type="radio" name="gender" value="other" id="other">

                    <label for="other">Other</label>

Select your gender:

Male
Female
Other

Checkboxes

                    <p>Select your interests:</p>

                    <input type="checkbox" name="interests" value="sports" id="sports">

                    <label for="sports">Sports</label>

                    <input type="checkbox" name="interests" value="music" id="music">

                    <label for="music">Music</label>

                    <input type="checkbox" name="interests" value="reading" id="reading">

                    <label for="reading">Reading</label>

Select your interests:

Sports
Music
Reading

File Upload

                    <input type="file" name="upload" accept="image/*">

                    <input type="file" name="document" accept=".pdf,.doc,.docx">

                    <input type="file" name="multiple" multiple>

accept specifies allowed file types
multiple allows multiple file selection

Date and Time Inputs

                    <input type="date" name="birthdate">

                    <input type="time" name="meeting_time">

                    <input type="datetime-local" name="event_datetime">

                    <input type="month" name="start_month">

Number and Range Inputs

                    <input type="number" name="age" min="0" max="120" step="1">

                    <input type="range" name="rating" min="1" max="10" value="5">

                    <input type="color" name="favorite_color">

Age:

Rating:

Color:

Proper Label Usage

                    <!-- Method 1: Label with for attribute -->

                    <label for="username">Username:</label>

                    <input type="text" id="username" name="username">

                    <!-- Method 2: Wrapping label -->

                    <label>

                      Email: <input type="email" name="email">

                    </label>

Labels improve accessibility
Clicking label focuses the input
Required for screen readers

HTML5 Form Validation

                    <input type="email" name="email" required>

                    <input type="text" name="username" pattern="[A-Za-z]{3,}" title="3+ letters
                    only">

                    <input type="number" name="age" min="18" max="65">

                    <input type="url" name="website">

required: Field must be filled
pattern: Custom validation with regex
min/max: Numeric limits
Browser provides automatic validation

Try It: Real-time Form Validation

Username:

Email:

Password:

Age:

Try typing in the fields to see real-time validation in action!

Fieldset and Legend

                    <fieldset>

                      <legend>Personal Information</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>

Groups related form fields
Improves form organization
Better accessibility

Form Buttons

                    <button type="submit">Submit Form</button>

                    <button type="reset">Clear Form</button>

                    <button type="button">Custom Action</button>

                    <input type="submit" value="Submit">

                    <input type="reset" value="Reset">

Task 1: Create a Contact Form

Instructions:

Create a new HTML file called contact-form.html
Build a contact form with the following fields:

Name (text, required)
Email (email, required)
Phone (tel)
Subject (select dropdown with 3 options)
Message (textarea, required)
Newsletter subscription (checkbox)

Add proper labels and validation
Include submit and reset buttons
Use fieldset to group related fields

Time: 45 minutes

This task will help you understand form structure and input types

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

Form Accessibility Best Practices

Always use <label> elements
Provide clear error messages
Use semantic HTML elements
Ensure keyboard navigation works
Add ARIA attributes when needed
Test with screen readers

                    Remember: Accessible forms are better for all users, not just
                    those with disabilities.
                

Form Styling Considerations

Use consistent spacing and alignment
Make inputs large enough to click/tap
Provide visual feedback for focus states
Use clear, readable fonts
Ensure sufficient color contrast
Make forms responsive for mobile devices

Form Security Considerations

Always validate on the server side
Use HTTPS for sensitive data
Implement CSRF protection
Sanitize user input
Use appropriate input types
Consider rate limiting

                    Important: Client-side validation is for user experience, not
                    security!
                

Form Processing Options

Server-side: PHP, Python, Node.js, etc.
Client-side: JavaScript form handling
Third-party services: Formspree, Netlify Forms
Email: mailto: links for simple forms

                    <!-- Simple email form -->

                    <form action="mailto:contact@example.com" method="post"
                    enctype="text/plain">

                      <input type="text" name="name">

                      <button type="submit">Send Email</button>

                    </form>

Common Form Patterns

Login forms: Username/email + password
Registration forms: Multiple fields with validation
Contact forms: Name, email, message
Search forms: Query input + filters
Survey forms: Multiple question types
File upload forms: File input + metadata

Testing Your Forms

Test all input types and validation
Check form submission and data handling
Test with different browsers and devices
Verify accessibility with screen readers
Test error handling and edge cases
Check form performance and loading times

Task 2: Advanced Registration Form

Instructions:

Create a comprehensive registration form
Include the following sections:

Personal Info: Name, email, password, confirm password
Profile: Age, gender, interests (checkboxes)
Preferences: Newsletter, notifications, theme color
Security: Profile picture upload, terms acceptance

Implement proper validation for all fields
Add password strength requirements
Create a responsive design
Test form accessibility

Time: 45 minutes

This task will help you understand advanced form features and validation

Common Form Issues and Solutions

Form not submitting: Check action URL and method
Validation not working: Verify input types and attributes
Styling issues: Check CSS specificity and browser compatibility
Accessibility problems: Ensure proper labels and ARIA attributes
Mobile issues: Test touch targets and viewport settings

Session Summary

Forms are essential for user interaction
Use appropriate input types for better UX
Always implement proper validation
Accessibility should be a priority
Test thoroughly across different devices

Next Session:

CSS Fundamentals - Styling your HTML content