HTML provides specialized input types for dates, colors, files, and more.

Textarea

For multi-line text input:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

Setting Dimensions

<!-- Using attributes -->
<textarea rows="10" cols="50"></textarea>

<!-- Using CSS (preferred) -->
<textarea style="width: 100%; height: 200px;"></textarea>

Default Content

Place text between the tags:

<textarea name="bio">Enter your bio here...</textarea>

Controlling Resize

textarea {
  resize: vertical; /* only vertical resize */
  resize: horizontal; /* only horizontal resize */
  resize: none; /* no resize */
}

Date and Time Inputs

Date

Select a date from a calendar:

<input type="date" name="birthday">

With constraints:

<input type="date" name="appointment" min="2024-01-01" max="2024-12-31">

Time

Select a time:

<input type="time" name="alarm">

Datetime-local

Combined date and time:

<input type="datetime-local" name="meeting">

Month

Select month and year:

<input type="month" name="start-month">

Week

Select week and year:

<input type="week" name="vacation-week">

Color Picker

Select a color:

<input type="color" name="theme-color" value="#3498db">

Returns a hex color value.

Range Slider

Select a value within a range:

<input type="range" name="volume" min="0" max="100" value="50">

With Steps

<input type="range" name="rating" min="1" max="5" step="1">

Displaying the Value

Combine with JavaScript or <output>:

<label for="brightness">Brightness: <output id="brightness-value">50</output>%</label>
<input
  type="range"
  id="brightness"
  name="brightness"
  min="0"
  max="100"
  value="50"
  oninput="document.getElementById('brightness-value').value = this.value"
>

File Upload

Allow file selection:

<input type="file" name="document">

Multiple Files

<input type="file" name="photos" multiple>

Accept Specific Types

<!-- Images only -->
<input type="file" name="avatar" accept="image/*">

<!-- Specific formats -->
<input type="file" name="document" accept=".pdf,.doc,.docx">

<!-- Multiple MIME types -->
<input type="file" name="media" accept="image/*,video/*">

Form Encoding

File uploads require special form encoding:

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="attachment">
  <button type="submit">Upload</button>
</form>

Button Types

Submit

Submits the form:

<button type="submit">Send</button>

Reset

Resets all form fields:

<button type="reset">Clear Form</button>

Button

For JavaScript actions (doesn’t submit the form):

<button type="button" onclick="showPreview()">Preview</button>

Fieldset and Legend

Group related controls:

<fieldset>
  <legend>Personal Information</legend>

  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

Disabling a Group

<fieldset disabled>
  <legend>Premium Features</legend>
  <!-- All inputs inside are disabled -->
</fieldset>

Complete Form Example

<form action="/submit" method="POST" enctype="multipart/form-data">
  <fieldset>
    <legend>Event Registration</legend>

    <label for="event-date">Date:</label>
    <input type="date" id="event-date" name="date" required>

    <label for="event-time">Time:</label>
    <input type="time" id="event-time" name="time" required>

    <label for="guests">Number of Guests:</label>
    <input type="range" id="guests" name="guests" min="1" max="10" value="2">

    <label for="color">Theme Color:</label>
    <input type="color" id="color" name="color" value="#6366f1">

    <label for="notes">Additional Notes:</label>
    <textarea id="notes" name="notes" rows="4"></textarea>

    <label for="photo">Upload Photo:</label>
    <input type="file" id="photo" name="photo" accept="image/*">
  </fieldset>

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

Lessons in this unit:

0:	Introduction
1:	How to Create HTML Forms
2:	How to Use HTML Text Input Types
3:	How to Validate HTML Forms
4:	How to Use Selection Controls in HTML Forms
5:	▶︎ How to Use Advanced HTML Input Types