Form input patterns in Tailwind - Mini Project: Build & Apply

Form Input Patterns with Tailwind CSS

📖 Scenario: You are building a simple contact form for a website. The form should have fields for the user's name, email, and phone number. You want to make sure the phone number input only accepts numbers in a specific pattern.

🎯 Goal: Create a form using Tailwind CSS with input fields for name, email, and phone. Add a pattern to the phone input that only allows 10 digits.

📋 What You'll Learn

Create a form with three input fields: name, email, and phone.

Use Tailwind CSS classes to style the inputs with padding, border, and rounded corners.

Add a pattern attribute to the phone input to accept exactly 10 digits.

Add a required attribute to all inputs.

Use semantic HTML elements and accessible labels.

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites for collecting user information. Using input patterns helps ensure users enter data correctly, improving user experience and data quality.

💼 Career

Web developers often build forms and need to style them with CSS frameworks like Tailwind. They also need to add validation patterns and accessibility features to make forms usable by everyone.

1

Create the basic form structure

Create a <form> element with three input fields: name, email, and phone. Each input should have a matching <label> with the for attribute. Use type="text" for name, type="email" for email, and type="tel" for phone.

Tailwind

Need a hint?

Use <label> and <input> tags with matching for and id attributes.

2

Add Tailwind CSS classes for styling

Add Tailwind CSS classes p-2, border, and rounded to each <input> element to give padding, border, and rounded corners.

Tailwind

  Name
  
  Email
  
  Phone
  
  

Need a hint?

Add the classes inside the class attribute of each input.

3

Add pattern and required attributes

Add the required attribute to all three inputs. Add a pattern attribute to the phone input with the value \d{10} to allow exactly 10 digits.

Tailwind

  Name
  
  Email
  
  Phone
  
  

Need a hint?

The pattern \d{10} means exactly 10 digits.

4

Add accessibility and spacing

Wrap each label and input pair inside a <div> with the Tailwind class mb-4 for spacing. Add aria-label attributes to each input matching their label text for better accessibility.

Tailwind

  
    Name
    
  
  
    Email
    
  
  
    Phone
    
  
  

Need a hint?

Use aria-label on inputs and wrap each label-input pair in a div with mb-4 for spacing.