Skip to content

Other input types

Passwords, dates, file attachments, and more

  • Lesson
  • 2 min read
  • 6 of 8 in this chapter

There are some other input types, and here are some of the most common.

Password

This is similar to a text input, but the letters are hidden as the user types them.

HTML
<label for="pwd">Enter Password:</label>
<br>
<input id="pwd" type="password" name="pwd">

Large text field

The type="text" input is a single-line text input. If you want to give the user more space to write, use the textarea input type. You can specify the size of the input field using the rows and cols attributes.

HTML
<label for="msg">Message:</label>
<br>
<textarea id="msg" name="message" rows="10" cols="50"></textarea>

Date

A lot of times the browser will show the user a date selector for this type of input.

HTML
<label for="birthday">Your Birthday:</label>
<input id="birthday" type="date" name="birthday">

File

This type of input will allow a user to attach a file.

HTML
<label for="file">Select a file:</label>
<input type="file" id="file" name="attachment">

Range

This is a slider control. In addition to the usual attributes, you can specify the minimum value, the maximum value, and the step (the default range is from 0 to 100 with a step of 1). Note that the user doesn't actually see any of these numbers on the slider, so if you want them to know the min and max, make sure to include that information in the label.

HTML
<label for="candy">Guess how much candy is in the jar! (between 0 and 500):</label>
<input type="range" id="candy" name="guess" min="0" max="500" step="10">