Input Control Elements 2

Input control elements of different type of input and example code:
HTML control element Submit input
<input type="submit" value="Submit">
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:
<button type="submit">
<img src="submit-icon.jpg" /> Submit
</button>
HTML Reset type
<input type="reset" value="Reset">
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.
Note: A reset button must be inside or attached to (via the form attribute) a <form> element in order to have any effect. The button will only reset the elements within this form.
HTML Hidden Input
<input type="hidden" name="inputName" value="inputValue">
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
<input type="tel" value="+8400000000">
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.
<form>
<label>E-mail: <label>
<input type="email" name="email">
</form>
E-mail address can be automatically validated when submitted depending on browser support.
HTML Number Input field
<input type="number" value="0" name="quantity">
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
<input type="range" min="" max="" step="" />
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
<input type="search" name="googlesearch">
Image Input field
<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>
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
<input type="week" />
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
<input type="url" name="Homepage">
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
<input type="datetime-local" />
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
Version ≥ 5
<input type="month" />
Dependent on browser support, a control will show to pick the month.
Time Input field
Version ≥ 5
<input type="time" />
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
19:04:39
08:20:39.04
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).
<fieldset>
<p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>
Permitted attributes:
- global attributes
- name
- disabled
- form
- type
- autocomplete
- autofocus
- list
- min & max
- step (float)
- readonly
- required value
Date Input field
Version ≥ 5
<input type="date" />
A date picker will pop up on screen for you to choose a date. This is not supported in Firefox or Internet Explorer.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<form>
<fieldset>
<legend>1st field set:</legend>
Field one:<br>
<input type="text"><br>Field two:<br>
<input type="text"><br>
<input type="date" />
</fieldset><br>
<fieldset>
<p><label>Meeting time: <input type=datetime name="meeting.start"></label>
<input type="tel" value="+8400000000">
</fieldset>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Atutorialhub demo title
ATutorialHub Related Guide
HTML Tutorials Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment