🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

What Is HTML Input and How to Collect It

Reading time 4 min
Published Mar 27, 2019
Updated Sep 30, 2019

TL;DR – HTML input is added by the user and sent to the server. It comes in various types from text to files.

Understanding HTML Input

In HTML, user input can be collected using the <input> element. It does not have any content itself and therefore is an empty element that does not need a closing tag:

Example
<form>
  My favourite food is:
  <input type="text">
  My pet name is:
  <input type="text">
  My pet is:
  <input type="radio" name="specie" checked>
  Dog
  <input type="radio" name="specie">
  Cat
  <input type="radio" name="specie">
  Rabbit
  <input type="submit" value="Add to Database">  
</form>

In terms of display, <input> is an inline element. That means it will stay in the line it was originally placed in, and the default behavior of the browser will be to place a few input elements of little width side by side:

Example
<form>
 <input type="radio" name="day" value="monday" checked>Monday
 <input type="radio" name="day" value="tuesday">Tuesday
 <input type="radio" name="day" value="wednesday">Wednesday
</form>

Using the HTML <input> element, you can collect user input and use it in scripts or databases later. It is one of the most popular HTML form elements.

Using Attributes to Define Input

The reason behind the popularity of <input> is its versatility. Using different attributes and their values, you can get dramatically different results from a simple text field to a submit button or a file upload form.

A huge selection of possible combinations and their specific use makes <input> one of the most complex elements in HTML.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

The type Attribute

The way the <input> element works relies on the assigned type attribute and its value. If you omit this information, the form element will automatically set it to text.

Note: to add an attribute, include a name–value pair in the opening tag.

Here are the most common HTML input types:

Type Definition
text Allows typing a line of text (usually under 32 characters)
date Provides access to a calendar to choose a date
email Allows typing an email address and validates it
checkbox Allows selecting multiple options from a predefined set
radio Allows selecting a single option from a predefined set
submit Creates a submit button needed to send the input to the server

Other Available Attributes

There is a whole bunch of other attributes for input in HTML that get used less often. However, they can be quite useful, so get to know them by using the table below:

Attribute Definition
accesskey Defines an access key (a keyboard shortcut)
autocomplete Defines if the input field should be completed automatically by the browser
autofocus Defines if the input field should be focused automatically by the browser
border DEPRECATED. Defined the border for the input element
checked Defines if an option should be selected automatically by the browser
disabled Disables the input element
form Connects the input element to an HTML form
formaction Defines the URL address for data submission
formenctype Defines how the user input will be sent to the server
formmethod Defines the method to be used when sending user input
formtarget Defines where the server response should be opened by the browser
height Defines the height if the user input is an image
language DEPRECATED. Defined the language used for input-related events
list Defines the ID the the <datalist> element
max Defines maximum value for the input element
maxlength Defines maximum text length for the input element
multiple Allows entering multiple values
min Defines minimum value for the input element
name Defines the name of the input element
pattern Defines a regular expression used in validation
placeholder Defines places holder text to textual input elements
readonly Forbids the user to modify input value
required Forbids the user to submit the form if the required field has no input
size Defines input size in characters
src Defines the image input source
step Defines the interval between valid numeric values
value Defines a default value or selection

HTML input: Useful Tips

  • Be careful when using the autofocus attribute: it can cause issues for screen readers, as they will automatically move to the form control without warning the user.
  • Some browsers have an automatic translation functionality. However, they do not translate attributes. That's why using a <label> element to explain input in HTML makes much more sense than a placeholder in many cases.