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).
- global attributes
- min & max
- step (float)
- 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.
Atutorialhub demo title
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
HTML Tutorials Comments (9)
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website