DONATE  
MENU
JSON
JAVASCRIPT
AJAX
HTML

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Html Forms » Input Elements
Share Tweet WhatsApp

Input Elements

The HTML <input> tag is used in creating elements that can be used in collecting information of different kind from users. With the advent of HTML5, more input types that can be used in collecting almost every form of information were added. All input elements are inline - block meaning their width can be adjusted and can also be display beside other elements. In this page, we shall be discussing some of such input types and their key features. INPUT TYPE = TEXT The input type of text can be used in collecting whatever form of text (usernames, names, password & etcetera) from a user.
<input type='text'/>

Copy PRACTICE IT

INPUT TYPE = NUMBER The input type of number is used in collecting numbers(PIN, mobile numbers & etcetera) from a user. It is different from the input type of text because it accepts only numbers and few special characters(.-) as values.
<input type='number'/>

Copy PRACTICE IT

INPUT TYPE = PASSWORD The input type of password is used in collecting password information from a user. In this case, when a user types into the input box, the characters immediately transform to a dot (•) or asterisk(*) according to the browser.
<input type='password'/>

Copy PRACTICE IT

INPUT TYPE = RADIO The input type of radio is used in creating radio buttons displaying options that a user is expected to select from by clicking any of such buttons. For example, gender.
<input type='radio'/>Male <br/>
<input type='radio'/>Female

Copy PRACTICE IT

Notice from the above example that a user can select both options but then, radio buttons are primarily suppose to display options for a user to select one. To achieve this, we link both of them together by assigning same value to their name attribute as show below,
<p><b>Select Gender:</b><br/><input name='gender' type='radio'/>Male <br/>
<input name='gender' type='radio'/>Female</p>

Copy PRACTICE IT

We can now select just one option. You can also specify a default value using the "checked" attribute on any of the inputs of type "radio". The checked attribute is an empty attribute.
<p><b>Select Gender:</b><br/><input name='gender' type='radio'/>Male <br/>
<input name='gender' type='radio' checked/>Female</p>

Copy PRACTICE IT

INPUT TYPE = CHECKBOX The input type of checkbox is used in creating check box buttons that enable a user select one or more or all values in an option list.
<input name='order' type='checkbox'/> Rice<br/>
<input name='order' type='checkbox'/> Beans<br/>
<input name='order' type='checkbox'/> Pizza<br/>
<input name='order' type='checkbox'/> Fruits<br/>

Copy PRACTICE IT

You can check some inputs by default using the checked attribute, an empty attribute.
<input name='order' type='checkbox'/> Rice<br/>
<input name='order' type='checkbox' checked/> Beans<br/>
<input name='order' type='checkbox'/> Pizza<br/>
<input name='order' type='checkbox' checked/> Fruits<br/>

Copy PRACTICE IT

INPUT TYPE = RESET The input of type "reset" is used in emptying the various fields of a form.
<form>
<input type='text'/>
<input type='password'>
<p><input type='reset'></p>
</form>

Copy PRACTICE IT

NOTE:
  • The input of type "reset" won't work on form elements not contained in the <form> element.
INPUT TYPE = SUBMIT The input of type "submit" is used in creating a button that can be used in submitting HTML form. Only create this button for form submission purposes only.
<input type='submit' value='SUBMIT'/>

Copy PRACTICE IT

INPUT TYPE = BUTTON The input of type "button" is used in creating just any other kind of buttons that are not met for the form submission. This means a form cannot be submitted with the input of type "button" except you are using JavaScript to process your forms.
<input type='button' value='Click Me' onclick='alert("Yes");'/>

Copy PRACTICE IT

INPUT TYPE = DATE The input of type "date is an HTML5 addon used in creating a date picker or an element where a user can select a day, month and a year. If a browser does not support it, it display just a text input field as alternative.
<input type='date'/>

Copy PRACTICE IT

You can set the minimum and maximum dates that are acceptable using the max and min attributes with values in the order of year-month-day.
<input type='date' min='2021-01-01' max='2021-12-31'/>

Copy PRACTICE IT

INPUT TYPE = MONTH The input of type "month" is an HTML5 addon for creating a month - picker. You can set it minimum and maximum values as well.
<input type='month'/><br/><br/>
<input type='month' min='2020-01' max='2021-12'/>

Copy PRACTICE IT

INPUT TYPE = COLOR The input of type "color" is also an HTML5 addon that is used in accepting color values from a user.
<input type='color'/>

Copy PRACTICE IT

Other HTML5 addons are:
  • email
  • range
  • search
  • tel
  • time
  • url
  • week
SUMMARY
  1. HTML input elements helps us collect data of various kind from our website's users.
  2. There are a lot of input types available and with the advent of HTML5, it only got better.
Take a short quiz on Input Elements.
Ask a question or tell us if Input Elements is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode