What You'll Build

A comparison form that showcases the differences between textbox, email, and textarea inputs. You'll see each type in action and learn when to use each one.

What You'll Learn

Differences between textbox, email, and textarea fields
When to use each input type
How email validation works automatically
Setting default values for all input types
Controlling textarea height with rows

🔧

Understanding Input Types

Different input types serve different purposes and provide different user experiences. Each type has unique validation rules and user interface elements.

Experiment with the code snippets below to see how each input type behaves differently!

Tutorial Steps

Step 1: Start with a Textbox

Let's start with a simple textbox. This is the most basic input type - it accepts any text and has no special validation.

💡 Tip:

addTextbox() creates a single-line text input with no special validation. It's perfect for names, usernames, IDs, or any short text.

Step 2: Add Email Field with Validation

Now let's add an email field. Try entering "invalid-email" in the email field and attempt to submit - see the automatic validation!

💡 Tip:

addEmail() automatically validates email format (requiring @ symbol and valid domain). The browser may also show email suggestions and optimize mobile keyboards.

Step 3: Add Textarea for Longer Text

Finally, let's add a textarea for longer content. Try typing multiple lines and notice how it expands!

💡 Tip:

addTextarea() creates multi-line inputs that automatically expand as users type. The rows property sets initial height. Perfect for comments, descriptions, addresses.

Step 4: Pre-filled Forms with Default Values

Now see how defaultValue works across all input types. Notice how each field is pre-filled but still editable!

💡 Tip:

Default values work identically for textbox, email, and textarea. They're perfect for demo forms, pre-filling known data, or providing examples. Users can always modify or clear them.

When to Use Each Input Type

Textbox: Short, single-line text (names, usernames, phone numbers, IDs)
Email: Email addresses (provides automatic validation and mobile keyboard optimization)
Textarea: Long, multi-line text (descriptions, comments, addresses, messages)

Try It Yourself

Challenge 1: Add a textarea for "Address" with 3 rows
Challenge 2: Set a default value for the bio that describes a hobby
Challenge 3: Try changing the email field to a textbox - what validation do you lose?
Challenge 4: Experiment with different row counts for the textarea

Next Steps

Great job completing this tutorial! You've learned about different text input types. Ready to explore form layout techniques?

Continue to Checkboxes & Checkbox Lists Tutorial

Other learning paths:

Learn about number inputs and validation
Explore dropdown selects and checkboxes
Master advanced form layout techniques
Add conditional logic to show/hide fields