Skip to main content

Different Kinds of User Input in HTML/HTML5 using Bootstrap Templates


User Input in HTML/HTML5 using Bootstrap Templates

Using HTML/HTML5 you can enabled to create new input elements for the HTML Forms. In this tutorial, we are going to learn HTML forms used to select different kinds of user input and pass this information to a server. They are Color, Date, DateTime, Time, Month, Week, Email, Number, Range, Search, Tel and URL. . A form can also contain select lists, textarea, fieldset, legend, and label elements. Try the Live Demo. Kindly click the button below. The
tag is used to create an HTML form:

The Input Element

An input element is used to select user information and can vary in many ways, depending on the type attribute. An input element can be text field, checkbox, password, radio button, submit button, and more.

Text Field

A text field is a one-line input field that a user can enter text into. It is defined by .

Password Field

A password field is the same as text field except the entered characters are masked (shown as asterisks or circles). It is defined as .

Radio Buttons

Radio buttons are used to allow the user to select only one from a number of choices. It is defined as .

Checkboxes

Checkboxes are used to allow a user to select zero or more options from a number of choices. It is defined as .

Submit Button

A submit button is used to send form data to a server. The submit button causes the page specified by the action attribute of the
element to be executed. It is defined as .

HTML5 New Form Attributes

HTML5 added new attributes for the
and elements. The new attributes for
are:
  • autocomplete - specifies that the form should have an autocomplete function
  • novalidate - specifies that the form should not be validated when submitted

HTML5 New Input Types

HTML5 added several new input types for forms to provide better input control and validation. The new input types are:
Color
  • color - specifies that the input field should contain a color
Date
  • date - specifies that the input field should contain a date (date, month, year)
  • datetime - specifies that the input field should contain time and date (time, date, month, year in UTC time)
  • datetime-local - specifies that the input field should contain time and date (time, date, month, year in local time)
  • month - specifies that the input field should contain a month and year
  • week - specifies that the input field should contain a week and year
  • time - specifies that the input field should contain a time (hour and minute)
Email
  • email - specifies that the input field should contain an e-mail address
Search
  • search - specifies the input field should appear as a search field
  • URL: - specifies the input field should contain a URL
Number
  • number - specifies the input field should contain a numeric value
Range
  • range - specifies the input field should contain a value from a range of numbers (slider bar)
Telephone
  • tel - specifies the input field should contain a telephone number

Output

Result

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.