Trying Out Form Controls

In this lesson you'll learn the basics of HTML form controls so you can build a screen where a user can enter information. This is for people searching "HTML form input usage" or "HTML how to make a form."

Placing <input> (an input field) or <button> (a button) inside a <form> lets you build a screen where a user can enter information. This is a fundamental building block for almost every web service — contact forms, login screens, and more. The type attribute changes the kind of input field.

The sample code builds a form combining a text field to enter a name (<input type="text">), a <select> to choose a favorite language, and a submit <button>. Attaching a <label> to an input field with a descriptive label makes it clearer what should be entered.

A common beginner stumbling block is choosing the right type attribute. Using the appropriate type for the purpose — text (text), email (email), password (password), and so on — lets the browser automatically show the right keyboard and validation. Using a type that doesn't match the purpose creates a form that's inconvenient for the user.

In real web services, forms play an extremely important role as the point of contact with users. Member registration, contact forms, search — knowledge of form controls is needed in every one of these situations.