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:

buttonA push button with no default behavior displaying the value of the value attribute, empty by default.
checkboxA check box allowing single values to be selected/deselected.
dateA 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-localA 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.
emailA 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.
monthA control for entering a month and year, with no time zone.
numberA control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads.
passwordA single-line text field whose value is obscured. Will alert user if site is not secure.
radioA radio button, allowing a single value to be selected out of multiple choices with the same name value.
rangeA 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.
resetA button that resets the contents of the form to default values.
submitA button that submits the form.
textThe default value. A single-line text field. Line-breaks are automatically removed from the input value.
timeA 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.


<!DOCTYPE html>



            <title> </title>



            <h1> INPUT TYPE</h1>

<label> First Name </label>

<input type=”text” name=””><br>


<label> Second Name</label>

<input type=“text” name=””><br>


<input type=“button” value=”save” name=””>

<input type=”reset” name=””>

<input type=”button”  value= “submit”name=””><br>


<label> Age</label>

<input type=“number” name=””><br>


<label> Month</label>

<input type=“month” name=””><br>


<label> Date and Time</label>

<input type=“datetime-local” name=””><br>


<label> date of birth </label>

<input type=“date” name=””><br>


<label> Range</label>

<input type=“range” name=””><br>


<label> Time</label>

<input type=“time” name=””><br>


<label> email </label>

<input type=”email” name=””><br>


<label> password</label>

<input type=“password” name=””><br>


<label> male </label>

<input type=“radio” name=””><br>

<label> female </label>

<input type=”radio” name=””><br>


<label> chapati </label>

<input type=”checkbox” name=””><br>

<label> ugali</label>

<input type=”checkbox” name=””><br>




Scroll to Top