HTML Input Types

The HTML input types feature is used to create interactive controls for accepting data from users on web-based forms. The user may enter data in different formats, such as alphabets, digits, or a combination of both, such as an email. These various HTML input form elements describe the type of data that a user may insert into an input area. It makes it easier for the browser to find out what data is permissible to enter in a given field and what data is not.

HTML Input Type text

A single line text input field is defined by the <input type="text"> tag. A field text can be up to 20 characters long by default.

<form action="handle_name.php" method="post">
  First name:<input required type="text" name="firstName">
  Last name:<input required type="text" name="lastName">
  <button type="submit">Submit</button>
</form>

Output:

HTML Input Type Password

A password field is described by the <input type="password">. During input, it will show bullets instead of real characters.

<form action="handle_password.php" method="post">
  Enter password:<input required type="password" name="password">
  <button type="submit">Submit</button>
</form>

Output:

HTML Input Type Submit

A Submit button is defined by the <input type="submit">, which submits form data to a form-handler. The form-handler is a server page that has a script for processing form input data and is defined in the form's action attribute.

<input type="submit">

HTML Input Type Radio

A radio button is defined by the <input type="radio">. It's used when only one choice has to be chosen from a list of many. Only a distinct value will be chosen if the name attribute in all of the buttons has the same value. The radio buttons allow the user to choose ONLY ONE option from a limited collection of options.

<form action="handle_radio.php" method="post">
  <input type="radio" name="level" value="Level 1" checked> Level 1<br>
  <input type="radio" name="level" value="Level 2"> Level 2<br>
  <input type="radio" name="level" value="Level 3"> Level 3<br>
  <input type="submit">
</form>

Output:

HTML Input Type Checkbox

A checkbox is specified by the <input type="checkbox">.

Checkboxes allow a user to choose ZERO or MORE options from a restricted set of options.

<form action="handle_checkboxes.php" method="post">
  <input type="checkbox" name="mobile[]" value="Samsung">Samsung</input>
  <input type="checkbox" name="mobile[]" value="Pixel">Google Pixel</input>
  <br>
  <button type="submit" name="button">Submit</button>
</form>

Output:

HTML Input Type Button

The <input type="button"> is used to define a button.

<form>
  <input type="text" name="name" value="Test">
  <br>
  <input type="button" onclick="alert('Welcome to Website IQ!')" name="button" value="button">
</form>

Output:

Html Input Type Number

A numeric input field is identified by the <input type="number"> tag. The number attribute limits the types of numbers that can be used. You can choose between a minimum and maximum value.

<form action="handle_number.php" method="post">
  Quantity (between 1 and 10):
  <input type="number" name="quantity" min="1" max="10">
  <br>
  <input type="submit">
</form>

Output:

HTML Input Type Color

The color input type is used to input color using a color picker.

<form>
  <label for="colorInput">Pick a color:</label>
  <input type="color" id="colorInput" name="colorInput" />
</form>

Output:

HTML Input Type Date

The date input type is used when a date input is needed. A date picker will show up when this input is used. This allows the user to easily pick a date.

<form>
  <label for="dateOfBirth">Date of Birth:</label>
  <input type="date" id="dateOfBirth" name="dateOfBirth"/>
</form>

Output:

HTML Input Type Email

The email input type is used to input an email. When the email type is set, the email address is checked when the form is submitted. The email address must be in valid format to submit the form.

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

Output:

HTML Input Type File

The File input allows the user to select a file to upload it.

<form>
  <label for="theFile">Choose a file:</label>
  <input type="file" id="theFile" name="theFile" />
</form>

Output:

HTML Input Type Range

The range input creates a slider control to set a value from a range. The default range is 0 – 100 but this can be modified using the min, max and step attributes as shown in the example below.

<form>
  <label for="rangeInpt">Slide to pick:</label>
  <input type="range" id="rangeInpt" name="rangeInpt" min="0" max="120" />
</form>

Output:

HTML Input Type Time

The time input type allows the user to pick a time using the time picker that is provided when this input type is used.

<form>
  <label for="timeInp">Pick time:</label>
  <input type="time" id="timeInp" name="timeInp" />
</form>

Output:

HTML Input Type url

The url input type is used when the input is supposed to be a url. It performs a basic check to see if the entered value is a url.

<form>
  <label for="urlInp">URL Input:</label>
  <input type="url" id="urlInp" name="urlInp" />
</form>

Output: