How To Use Input To Create Form Fields In HTML: Easy Tutorial

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

Element of
Building HTML Forms Is Easy: Tutorial With Copy-And-Paste Code
What does How To Use Input To Create Form Fields In HTML: Easy Tutorial do?
The <input> element is used to create form fields that accept user input. Form <input> elements can be presented many different ways, including simple text fields, buttons, checkboxes, drop-down menus, and more, by setting the type attribute of the input element to the appropriate value.
Null element
This element must not contain any content, and does not need a closing tag.

Code Example


The most basic form field

The <input> element is the fundamental form element for gathering user info through forms. The vast majority of form fields are the <input> element, and there are only a handful of form field types — <select>, for example — that are actually a different element. From range sliders to date selectorsto submit buttons, the <input> element covers a lot of different cases.

Because of that, it also has a huge number of attributes and potential values. Many of them are only applicable to certain types of inputs. There are a handful that are universally important, though:

  • The type attribute determines the type, or style, of the element. This is the most important attribute, as it determines everything else about how the <input> element behaves.
  • The name is used in conjunction with the value attribute to send user data to the server.
  • Setting the value attribute in your HTML document allows you to pre-specify the content of the input field, or its default value
  • Both readonly and disable stop the user from editing the value of the input, but there are some important difference to know about.
  • Including the required stops the form from accepting submission if the field has no value.

See the lists below for more details about <input> options.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for input