What is an input tag?

In HTML, an input tag is used to specify an input field where users can provide data. The input elements are usually declared within an HTML form. Input tags do not have a closing tag.

Using Input tag

<input type="type" name="myname" id="myid" value="v"/>

Input tags

INPUT TYPEDEFINITIONEXAMPLE
textSpecifies a text box<input type=”text”/>
emailSpecifies an email input field <input type=”email”/>
passwordSpecifies a password field <input type=”password”/>
telSpecifies a telephone field <input type=”tel”/>
dateSpecifies a date picker <input type=”date”/>
fileSpecifies a file picker <input type=”file”/>
submitSpecifies a form submit button <input type=”submit”/>
datetime-localSpecifies a date-time chooser <input type=”datetime-local”/>
urlSpecifies a URL input field <input type=”url”/>
weekSpecifies a week input filed <input type=”week”/>
imgeSpecifies an image filled <input type=”image”/>
month Specifies a month input filed <input type=”month”/>
rangeSpecifies a range selector <input type=”range”/>
resetSpecifies a form reset button <input type=”reset”/>
radioSpecifies a radio button <input type=”radio”/>
checkboxSpecifies a checkbox <input type=”checkbox”/>
search Specifies a search-box
<input type=”search”/>
hidden Specifies a hidden input field
<input type=”hidden”/>
color Specifies a color picker
<input type=”color”/>
If you are not using Google chrome or an old version of the browser, some of these tags may not work.
CODEOUTPUT
<input type=”text”/>
<input type=”email”/>
<input type=”password”/>
<input type=”tel”/>
<input type=”color”/>
<input type=”image” src=”img.jpg” alt=”select image”/>
<input type=”range” min=”0″ max=”10″/>
<input type=”month”/>
<input type=”week”/>
<input type=”datetime-local”/>
<input type=”search”/>
<input type=”url”/>
<input type=”radio”/>CheckCheck
<input type=”checkbox”/>SelectSelect
Select file<input type=”file”/>Select file
<input type=”hidden”/>

The submit and reset elements

The submit and reset elements are used for form handling. An example is shown below:

<form action="" method="">
<table class="wp-block table">
    <tr>
        <td>Username</td>
        <td><input type="text" placeholder="Please enter your Username"></td>
    </tr>
    <tr>
        <td>Password</td>
        <td><input type="password" placeholder="Please enter your password"></td>
    </tr>
    <tr>
        <td>
            <input type="reset" value="Reset Form">
        </td>
        <td>
            <input type="submit" value="Login">
        </td>
    </tr>
</table>    
</form>
Output
Username
Password

Common attributes

ATTRIBUTEDEFINITIONIMPORTANCE
nameSpecify the name of the element. More than one tags may have the same name.Required
idSpecify an id for the element. Not more than one element should have the same id.Optional in some cases
requiredSpecify that element must be filledOptional
placeholderUsed to display a temporary textOptional
valueThe value attribute is used to set a default value for the element.Optional in some cases
styleUsed to specify the CSS properties.Optional
classUsed to specify CSS class.Optional
checkedMarks a radio button or checkbox as checked.Optional
minSpecify a minimum value for the element.Optional
maxSpecify the maximum value for the element.Optional

Example:

<form>
<input type=text name="username" id="name" placeholder="Please enter your name" style="border: 1px solid green" required/>
<br />
<input type="checkbox" checked> I agree to terms and conditions
<br />
<input type="submit" value="Save">
</form>

Output


I agree to terms and conditions