The available types are as follows:
| Attribute | Details | Basic Example |
|---|---|---|
| button | A pushbutton with no default behavior that displays the value of the value attribute, empty by default. | |
| checkbox | A check box with which individual values can be selected / deselected. | |
| color | A control to specify a color; open a color picker when active in supported browsers. | |
| date | A control to enter a date (year, month and day, without time). Opens a date picker or number wheels for year, month, day when active in supported browsers. | |
| datetime-local | A control for entering a date and time without a time zone. Opens a date picker or numeric wheels for date and time components if these are active in supporting browsers. | |
| A field to edit an email address. It looks like text input, but has validation parameters and a relevant keyboard in browsers and devices that support dynamic keyboards. | ||
| file | A control that allows the user to select a file. Use the accept attribute to define the types of files that the control can select. | |
| hidden | A control that is not displayed, but has its value sent to the server. An example is shown in the next column, but it is hidden. | |
| image | A graphical submit button. Displays an image defined by the src attribute. The alt attribute is displayed when the src image is missing. |
any image can be used ad submit button , we used our logo for example. |
| month | A control for entering a month and a year without a time zone. | |
| number | A control to enter a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keyboards. | |
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. | |
| radio | A radio button that allows you to select a single value from multiple options with the same name value. | |
| range | A control for entering a number whose exact value is not important. Appears as a range widget that defaults to the middle value. Used in conjunction with min and max to define the range of acceptable values. | |
| reset | A button that resets the content of the form to the default values. Not recommended. | |
| search | A single-line text field for entering search strings. Line breaks are automatically removed from the input value. May include a delete icon in supported browsers that can be used to clear the field. Displays a search icon instead of the Enter key on some devices with dynamic keyboards. | |
| submit | A button that submits the form. | |
| tel | A control to enter a phone number. Displays a telephone keypad on some devices with dynamic keyboards. | |
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. | |
| time | A control to enter a time value without a time zone. | |
| url | A field for entering a URL. Looks like a text input but has validation parameters and a relevant keyboard to support browsers and devices with dynamic keyboards. | |
| week | A control for entering a date consisting of a week year number and a week number without a time zone. |
Clickable button, standard button functionality.
Button elements are represented as simple pushbuttons, which can be programmed to control custom functionality anywhere on a web page as needed when assigned an event handler function (usually for the click event).
<form>
<!--type button without value attribute-->
<input type="button" > <br>
<!--type button with value attribute -->
<input type="button" value="Click me"> <br>
<!--type button with javascript -->
<input type="button" value="Click me" onclick="alert('Hello')">
</form>
This above code will be displayed in a browser as:
By default, check boxes for items of type are rendered as check boxes that are checked (checked) when active, as you may see in an official government document. The exact appearance depends on the operating system configuration under which the browser is running. In general this is a square, but it can have rounded corners. A check box allows you to select (or not) individual values for submission in a form.
<form>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">are you a programmer</label> <br>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">are you stil learning</label> <br>
</form>
This above code will be displayed in a browser as:
Elements of type color provide a user interface element that allows the user to specify a color, either by using a visual color picker interface or by entering the color in a text field in hexadecimal format #rrggbb Only they allow simple colors (no alpha channel) although CSS colors have more formats, e.color names, functional notations and a hexadecimal format with alpha channel.
<form>
<input type="color" ><br>
with value attribute (#e66465)
<input type="color" value="#e66465">
</form>
This above code will be displayed in a browser as:
An example demonstrating the use of the <input type="color">
control.
Watch the paragraph colors change when you adjust the color picker.
As you make changes in the color picker, the first paragraph's
color changes, as a preview (this uses the input
event). When you close the color picker, the change
event fires, and we detect that to change every paragraph to
the selected color.
Elements of type = "date" create input fields that allow the user to enter a date, either with a text box that validates the input or a special date selection interface.
The resulting value includes the year, month, and day, but not the time. The time and date and local time input types support time and date + time input.
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
<form>
<label for="datemax">Enter a date before 2000-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1999-12-31"><br><br>
<label for="datemin">Enter a date after 2021-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2020-01-02">
</form>
This above code will be displayed in a browser as:
Datetime-local elements create input controls that allow the user to easily enter both a date and time, including the year, month, and day, and the time in hours and minutes.
<form>
<input type="datetime-local">
</form>
This above code will be displayed in a browser as:
The input value is automatically validated to ensure it is empty or a properly formatted email address (or a list of addresses) before the form can be submitted. Visually denote whether the current value of the field is a valid email address or not.
<form>
<input type="email" id="email" Placeholder="contact@tdbschool.com">
</form>
This above code will be displayed in a browser as:
The input value is automatically validated to ensure it is empty or a properly formatted email address (or a list of addresses) before the form can be submitted. Visually denote whether the current value of the field is a valid email address or not.
<form>
<input type="file" >
</form>
This above code will be displayed in a browser as:
The input value is automatically validated to ensure it is empty or a properly formatted email address (or a list of addresses) before the form can be submitted. Visually denote whether the current value of the field is a valid email address or not.
<form>
<input type="hidden" value="data use in serverside">
</form>
Image-type elements are used to create graphical submit buttons; H. Submit buttons that are in the shape of an image instead of text.
<form method="post" action="form_action.php" style="text-align:center">
<fieldset>
<legend>Details:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="image" src="../img/tdb-logo.jpg" width="50px">
</fieldset>
</form>
This above code will be displayed in a browser as:
Month type elements create input fields in which the user can enter a month and year so that a month and year can be easily entered. The value is a string whose value is in the format YYYY-MM, where YYYY is the four-digit year and MM is the month.
<form>
<input type="month" value="2000-01" >
</form>
This above code will be displayed in a browser as:
Number elements are used to allow the user to enter a number. They contain built-in validation to reject non-numeric entries. The browser can provide step arrows that the user can use to increase and decrease the value with the mouse or by tapping with a fingertip.
<form>
<input type="number" min="10" max="100">
</form>
This above code will be displayed in a browser as:
Input type password provide a way for the user to enter a password securely. The element is presented as a one-line plain text editor control in which the text is hidden so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a period ("• "). This character will vary depending on the user agent and operating system.
<form>
<label for="pass">Password: </label>
<input type="password" id="pass">
</form>
This above code will be displayed in a browser as:
Radio-type items are generally used in radio groups: collections of radio buttons that describe a set of related options. Only one radio button can be selected in a given group at a time. Radio buttons are typically represented as small circles, which or highlighted when selected.
<form>
<input type="radio" id="huey" name="drone" value="huey" checked>
<label for="huey">Huey</label> <br>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</form>
This above code will be displayed in a browser as:
Input elements of the type range, the user can specify a numerical value that cannot be less than a certain value or greater than another certain value. However, the exact value is not considered important. This is usually represented with a slider or dial instead of a text entry box like the number entry type. Since this type of widget is imprecise, it should normally not be used unless the exact value of the control is not important.
<form>
<input type="range" id="volume" name="volume"
min="0" max="11">
<label for="volume">Volume</label>
<input type="range" id="base" name="cowbell"
min="0" max="100" value="90" step="10">
<label for="base">Base</label>
</form>
This above code will be displayed in a browser as:
A button that resets the content of the form to the default values. Not recommended.
<form method="post" action="form_action.php" style="text-align:center">
<fieldset>
<legend>Details:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="submit">
<input type="reset">
</fieldset>
</form>
This above code will be displayed in a browser as:
Search-type elements are text fields designed for the user to enter search queries. They are functionally identical to text inputs, but may be designed differently by the user agent.
<form method="post" action="form_action.php" style="text-align:center">
<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q"
aria-label="Search through site content">
<button>Search</button>
</form>
This above code will be displayed in a browser as:
A button that submits the form.Default value is submit but you can change this value by adding value attribute.
<form method="post" action="form_action_datalist.php" style="text-align:center">
<!--we are using hidden input to send backend script a value to avoid error ,this example of input type hidden -->
<input type="hidden" name="language" value="use this to avoid backend error">
<input type="submit" value="login">
</form>
This above code will be displayed in a browser as:
A control to enter a phone number. Displays a telephone keypad on some devices with dynamic keyboards.
<form method="post" action="form_action_datalist.php" style="text-align:center">
<label for="tell">Phone no: </label>
<input type="tel" id="tell" name="phone">
</form>
This above code will be displayed in a browser as:
The default value A single-line text field Line breaks are automatically removed from the input value.
<form>
<label for="name">Your name: </label>
<input type="text" id="name" name="anytext">
</form>
This above code will be displayed in a browser as:
Time input elements create input fields designed to allow the user to easily enter an hour (hours and minutes, and optionally seconds) . The user interface of the control will vary from browser to browser Support is good in modern browsers , Safari being the only main one, the browser has not yet implemented it; in Safari and any other unsupported browser, it gracefully <input type="text">.
<form>
<label for="time">enter time: </label>
<input type="time" id="time" name="time">
</form>
This above code will be displayed in a browser as:
URL input type is used to allow the user to enter and edit a URL
<form>
<label for="url">enter URL: </label>
<input type="url" id="url" name="url">
</form>
This above code will be displayed in a browser as:
Week input type create input fields that allow easy entry of a year plus the ISO 8601 week number during that year (i.e. week 1 through 52 or 53).
<form>
<label for="week">enter Week: </label>
<input type="week" id="week" name="week">
</form>
This above code will be displayed in a browser as:
Share TDB SCHOOL
Share this E-Learning Website on social media platforms with your friends and followers