Skip to main content
WPFSharp Academy
Syllabus
On this page

HTML Form Elements (input, select, textarea, button)

Badar KhalilUpdated September 27, 2026 1 min read
Share X Facebook LinkedIn WhatsApp

HTML Form Elements (input, select, textarea, button)

This HTML form elements tutorial covers the four core building blocks used inside almost every form: <input>, <select>, <textarea>, and <button>.

The input Element

The most versatile form element. Its behavior changes completely based on the type attribute (covered in depth in the next topic). Common attributes include name, id, value, and placeholder.

The select Element (Dropdowns)

Creates a dropdown list using nested <option> tags. Add the multiple attribute to allow selecting more than one option, and use <optgroup> to organize long lists — a technique commonly used in modern e-commerce filter UIs.

Code
<select name="country">
  <option value="pk">Pakistan</option>
  <option value="us">United States</option>
</select>

The textarea Element

Used for multi-line text input like comments or messages. Unlike <input>, its default value goes between the opening and closing tags, not in a value attribute. Control its size using the rows and cols attributes, or CSS resize property.

The button Element

Represents a clickable button with three possible type values: submit (default inside forms), reset, and button (does nothing by itself — used for custom JavaScript actions, a very common pattern in modern React-style interactive UIs).

Custom styled form controls are trending heavily in 2026 as designers move away from default browser styling toward fully branded, CSS-styled inputs, selects, and buttons while preserving native accessibility.

Live Example

Edit the example below to add your own dropdown options or textarea placeholder text.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself JAVASCRIPT
Output

Press Run to execute.

Exercise: Create a Feedback FormHTML

Build a feedback form containing: a select dropdown with three rating options (Good, Average, Poor), a textarea for comments, and a submit button.

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
A form with a select (3 options), a textarea, and a submit button.

This is a self-check — compare your result with the expected output above.

Was this page helpful?