Form elements (input, textarea, select)

Hello, students! In this lesson, we will learn about form elements.

Forms are used to collect information from the user.

Form elements are used to create the input fields of the form.

Topics

• What are form elements?
• The input, textarea, and select elements
• Code examples

What are form elements?

Form elements are HTML elements used to create the input fields of the form.

Form elements are used to collect information from the user, such as name, address, email, etc.

The input, textarea, and select elements

The input, textarea, and select elements are the most commonly used form elements.

input Element

The input element is used to create simple input fields.

The input element has many attributes that can be used to control the behavior of the input field.

Some of the most common attributes of the input element are:

• type: Specifies the type of input field.
• value: Specifies the initial value of the input field.
• required: Specifies whether the input field is required.

Here are some code examples to use the input element:

<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email address">
<input type="password" name="password" placeholder="Password">

textarea Element

The textarea element is used to create multiline text input fields.

The textarea element has two main attributes:

• name: Specifies the name of the input field.
• value: Specifies the initial value of the input field.

Here is an example of code to use the textarea element:

<textarea name="message" placeholder="Leave your message here..."></textarea>

select Element

The select element is used to create lists of options.

The select element has two main attributes:

• name: Specifies the name of the input field.
• options: Specifies the available options in the list.

Here is an example of code to use the select element:

<select name="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

Exercises

• Create a form with the input fields name, email, and password.
• Save the document and open it in a browser.

Observe how the browser displays the form.

Good luck!

Conclusion

Form elements are an important tool for collecting user information.

Understanding how to use form elements is essential for creating effective forms.

Ready to learn more?

In the next topic, we will learn about submit and reset buttons.