html
/

HTML Forms: Collecting User Input

Last Sync: Today

On this page

12
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Forms: Collecting User Input

What is an HTML Form?

HTML forms are used to collect user input such as text, selections, and files. The data is typically sent to a server for processing.

Basic Form Structure

HTMLRead-only
1
<form action="/submit" method="POST">
  <label>Name:</label>
  <input type="text" name="name">

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

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

Common Input Types

TypePurpose
textSingle line text
emailEmail input with validation
passwordHidden text input
numberNumeric input
dateDate picker
fileFile upload
checkboxMultiple selection
radioSingle selection
submitSubmit button

Input Field Examples

HTMLRead-only
1
<input type="text" placeholder="Enter name">
<input type="email" placeholder="Enter email">
<input type="password" placeholder="Enter password">

Checkbox and Radio Buttons

HTMLRead-only
1
<label><input type="checkbox"> Accept Terms</label>

<label><input type="radio" name="gender"> Male</label>
<label><input type="radio" name="gender"> Female</label>

Select Dropdown

HTMLRead-only
1
<select>
  <option>India</option>
  <option>USA</option>
  <option>UK</option>
</select>

Textarea

HTMLRead-only
1
<textarea rows="4" cols="30" placeholder="Enter message"></textarea>

Form Attributes

AttributeDescription
actionURL where data is sent
methodHTTP method (GET or POST)
nameField identifier
requiredMandatory field
placeholderHint text

Form Validation

HTML provides built-in validation using attributes like required, minlength, maxlength, and pattern.

HTMLRead-only
1
<input type="email" required>
<input type="password" minlength="6">

Complete Form Example

HTMLRead-only
1
<form>
  <input type="text" placeholder="Name" required>
  <input type="email" placeholder="Email" required>
  <input type="password" placeholder="Password" minlength="6">

  <select>
    <option>Choose Country</option>
    <option>India</option>
    <option>USA</option>
  </select>

  <textarea placeholder="Message"></textarea>

  <button type="submit">Register</button>
</form>

Best Practices

  • Always use labels for accessibility
  • Use proper input types for better UX
  • Validate inputs before submission
  • Group related fields logically
  • Keep forms simple and user-friendly

Conclusion

HTML forms are essential for user interaction in web applications. Mastering forms allows you to collect and process user data effectively.

Try it yourself

<form>
  <input type="text" placeholder="Name" required>
  <input type="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

Test Your Knowledge

Q1
of 3

Which tag is used to create a form?

A
<form>
B
<input>
C
<fieldset>
D
<label>
Q2
of 3

Which input type is used for email validation?

A
text
B
email
C
password
D
number
Q3
of 3

Which attribute makes a field mandatory?

A
validate
B
required
C
must
D
needed

Frequently Asked Questions

What is the difference between GET and POST?

GET sends data in the URL, while POST sends data securely in the request body.

What does required do?

It ensures the user must fill the field before submitting the form.

Can HTML validate forms without JavaScript?

Yes, HTML has built-in validation using input attributes.

Previous

html iframe

Next

html input types

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.