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

Submitted by: 
Language: 
Visitors have accessed this post 855 times.

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 <form> tag is used to create an HTML form:

  1. <!--- input elements -->
  2. </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

  1. <input type="text" />

.

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

  1. <input type="password" />

.

Radio Buttons

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

  1. <input type="radio" />

.

Checkboxes

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

  1. <input type="checkbox" />

.

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 <form> element to be executed. It is defined as

  1. <input type="submit" />

.

HTML5 New Form Attributes

HTML5 added new attributes for the <form> and <input> elements.

The new attributes for <form> 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
  1. <input type="color" placeholder="e.g. #c0c0c0" />
Date
  • date - specifies that the input field should contain a date (date, month, year)
  1. <input type="date" min="2010-11-01" max="2011-11-01" value="2010-11-01"/>
  • 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
  1. <input type="email" placeholder="[email protected]" />
Search
  • search - specifies the input field should appear as a search field
  1. <input type="search" results="10" placeholder="Search..." />
  • URL: - specifies the input field should contain a URL
Number
  • number - specifies the input field should contain a numeric value
  1. <input type="number" step="1" min="-5" max="10" value="0" />
Range
  • range - specifies the input field should contain a value from a range of numbers (slider bar)
  1. <input type="range" min="0" max="50" value="10" />
Telephone
  • tel - specifies the input field should contain a telephone number
  1. <input type="tel" placeholder="(101) 555-1212" pattern="^\(?\d{3}\)?[-\s]\d{3} [-\s]\d{4}.*?$" />

Output

Result


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.