INPUT TYPE
The <input> tag is used within the <form> element and defines fields for user input. The type of the field (text, checkbox, radio button, password field, etc.) is determined by the value of the type attribute. The tag doesn’t have a text content, it contains only attributes.
To associate text with a specific element, we use the <label> tag which sets a text label for it an <input> works depending on the value of its type attribute. If this attribute is not specified, the default type adopted is text.
The available types are as follows:
| Type | Description |
| button | A push button with no default behavior displaying the value of the value attribute, empty by default. |
| checkbox | A check box allowing single values to be selected/deselected. |
| date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
| datetime-local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
| A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. | |
| month | A control for entering a month and year, with no time zone. |
| number | A control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. |
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. |
| radio | A radio button, allowing a single value to be selected out of multiple choices with the same name value. |
| range | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values. |
| reset | A button that resets the contents of the form to default values. |
| submit | A button that submits the form. |
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
| time | A control for entering a time value with no time zone. |
| datetime | A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. |
Text input
The <input type=”text”> specifies a one-line input field for text input.
Radio Button Input
The <input type=”radio”> specifies a radio button with the help of which you can select one of many choices.
Submit input
The <input type=”submit”> submits the form data to a form-handler.
The form-handler is a server page with a script to process input data, which is defined in the action attribute of the form.
Example
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<h1> INPUT TYPE</h1>
<label> First Name </label>
<input type=”text” name=””><br>
<br>
<label> Second Name</label>
<input type=“text” name=””><br>
<br>
<input type=“button” value=”save” name=””>
<input type=”reset” name=””>
<input type=”button” value= “submit”name=””><br>
<br>
<label> Age</label>
<input type=“number” name=””><br>
<br>
<label> Month</label>
<input type=“month” name=””><br>
<br>
<label> Date and Time</label>
<input type=“datetime-local” name=””><br>
<br>
<label> date of birth </label>
<input type=“date” name=””><br>
<br>
<label> Range</label>
<input type=“range” name=””><br>
<br>
<label> Time</label>
<input type=“time” name=””><br>
<br>
<label> email </label>
<input type=”email” name=””><br>
<br>
<label> password</label>
<input type=“password” name=””><br>
<br>
<label> male </label>
<input type=“radio” name=””><br>
<label> female </label>
<input type=”radio” name=””><br>
<br>
<label> chapati </label>
<input type=”checkbox” name=””><br>
<label> ugali</label>
<input type=”checkbox” name=””><br>
<br>
</body>
</html>
