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
HTML Web Forms Tutorial For Coding Beginners
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