Input Control Elements 2

Input control elements of different type of input and example code:

HTML control element Submit input

A submit input creates a button which submits the form it is inside when clicked. You can also use the <button> element if you require a submit button that can be more easily styled or contain other elements:

HTML Reset type

An input of type reset creates a button which, when clicked, resets all inputs in the form it is contained in to their default state.

• Text in an input field will be reset to blank or its default value (specified using the value attribute).
• Any option(s) in a selection menu will be deselected unless they have the selected attribute.
• All checkboxes and radio boxes will be deselected unless they have the checked attribute.

HTML Hidden Input

A hidden input won't be visible to the user, but its value will be sent to the server when the form is submitted nonetheless.

HTML Tel Input field

The input element with a type attribute whose value is tel represents a one-line plain-text edit control for entering a telephone number.

HTML Email  Input field

The <input type="email"> is used for input fields that should contain an e-mail address.

E-mail address can be automatically validated when submitted depending on browser support.

HTML Number Input field

The Input element with a type attribute whose value is number represents a precise control for setting the element’s value to a string representing a number.

Please note that this field does not guarantee to have a correct number. It just allows all the symbols which could be used in any real number, for example user will be able to enter value like e1e-,0.

HTML Range Input field

A control for entering a number whose exact value is not important.

• min -Minimum value for range - 0
• max-Maximum value for range - 100
• step- Amount to increase by on each increment -1

Search Input field

Input type search is used for textual search. It will add magnifier symbol next to space for text on most browsers

Image Input field

An Image. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

Week Input field

Dependent on browser support, a control will show for entering a week-year number and a week number with no time zone.

Url Input field

This is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

DateTime-Local Input field

Dependent on browser support, a date and time picker will pop up on screen for you to choose a date and time.

Month Input field

Dependent on browser support, a control will show to pick the month.

Time Input field

The time input marks this element as accepting a string representing a time. The format is defined in RFC 3339 and should be a partial-time such as

Currently, all versions of Edge, Chrome, Opera, and Chrome for Android support type="time". The newer versions of Android Browser, specifically 4.4 and up support it. Safari for iOS offers partial support, not supporting min, max, and step attributes.

DateTime (Global) Input field

The input element with a type attribute whose value is "datetime" represents a control for setting the element’s value to a string representing a global date and time (with timezone information).

Permitted attributes:

• global attributes
• name
• disabled
• form
• type
• autocomplete
• autofocus
• list
• min & max
• step (float)
• readonly
• required value

Date Input field

Version ≥ 5

A date picker will pop up on screen for you to choose a date. This is not supported in Firefox or Internet Explorer.

Example:

Atutorialhub demo title