HTML input tag

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 TYPE	DEFINITION	EXAMPLE
text	Specifies a text box	<input type="text"/>
email	Specifies an email input field	<input type="email"/>
password	Specifies a password field	<input type="password"/>
tel	Specifies a telephone field	<input type="tel"/>
date	Specifies a date picker	<input type="date"/>
file	Specifies a file picker	<input type="file"/>
submit	Specifies a form submit button	<input type="submit"/>
datetime-local	Specifies a date-time chooser	<input type="datetime-local"/>
url	Specifies a URL input field	<input type="url"/>
week	Specifies a week input filed	<input type="week"/>
imge	Specifies an image filled	<input type="image"/>
month	Specifies a month input filed	<input type="month"/>
range	Specifies a range selector	<input type="range"/>
reset	Specifies a form reset button	<input type="reset"/>
radio	Specifies a radio button	<input type="radio"/>
checkbox	Specifies 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.
CODE	OUTPUT
<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"/>Check	Check
<input type="checkbox"/>Select	Select
Select file<input type="file"/>	Select file
<input type="hidden"/>

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>

Common attributes

ATTRIBUTE	DEFINITION	IMPORTANCE
name	Specify the name of the element. More than one tags may have the same name.	Required
id	Specify an id for the element. Not more than one element should have the same id.	Optional in some cases
required	Specify that element must be filled	Optional
placeholder	Used to display a temporary text	Optional
value	The value attribute is used to set a default value for the element.	Optional in some cases
style	Used to specify the CSS properties.	Optional
class	Used to specify CSS class.	Optional
checked	Marks a radio button or checkbox as checked.	Optional
min	Specify a minimum value for the element.	Optional
max	Specify 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

Output
Username
Password