HTML <input> with type Attribute

❮ Prev Next ❯
You are Here:

HTML <input> with type Attribute

The type attribute specifies the type of <input> element to display.

button

Specifies a dummy button.
Use JavaScript to add functionality.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <input type="button" onclick="myFunction()" value="Say Hello"> <script> function myFunction(){ alert("Hello, you are welcome"); } </script> </body> </html>
Run

Attribute Value

ValueExplanation
buttonSpecifies a dummy button.
Use JavaScript to add functionality.
checkboxA checkbox allows the user to choose a single value to be selected/deselected.
colorA control for choosing a color.
dateA control for entering year, month, and day, with no time.
datetime-localA control for entering year, month, day and time, with no timezone.
emailA field to input email address.
fileA field to upload files like image, .txt, .pdf etc.
hiddenA field that is not displayed but whose value is submitted to the server.
imageUsed to create graphical submit buttons.
monthA control for entering month and year only.
NumberA control for entering numbers only.
passwordA control for masking a character immediately when a user is typed, either by * or •.
radioDefines a radio button.
rangeSpecify a numeric value which must be no less than the min value, and no more than the max value.
resetResets all form values to default values.
searchA text field designed for the user to enter search queries into.
submitSubmits the form to the specified URL, when clicked.
telA text field used to let the user enter and edit a telephone number. Here the input value is not automatically validated.
textA text field used to create a basic single-line text field.
timeA control for entering time.
urlA text field used to let the user enter and edit a URL.
weekA control which allows easy entry of a year plus the number of the week during that year.

checkbox

A checkbox allows the user to choose a single value to be selected/deselected.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>What do you like to have?</p> <form action="/user-choice.php"> <input type="checkbox" name="hot" value="Tea">A cup of tea<br><br> <input type="checkbox" name="cold" value="Ice Cream"> A bowl of ice cream<br><br> <input type="submit" value="Order"> </form> </body> </html>
Run

color

Specifies a control for choosing a color.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Choose your favourite color</p> <form action="/user-color.php"> <input type="color" name="myColor"> <input type="submit"> </form> </body> </html>
Run

date

Specifies a control for entering year, month, and day, with no time.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>When is your birthday?</p> <form action="/user-birthday.php"> <input type="date" name="myBday"> <input type="submit"> </form> </body> </html>
Run

datetime-local

Specifies a control for entering year, month, day and time, with no timezone.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>When is your birthday(date and time)?</p> <form action="/user-birthday.php"> <input type="datetime-local" name="myBday"> <input type="submit"> </form> </body> </html>
Run

email

Specifies a field to input email address.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Input your email</p> <form action="/user-email.php"> <input type="email" name="myEmail"> <input type="submit" value="Submit"> </form> </body> </html>
Run

file

Specifies a field to upload files like image, .txt, .pdf etc.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Upload your image</p> <form action="/user-image.php"> <input type="file" name="myImg"> <input type="submit" value="Submit"> </form> </body> </html>
Run

hidden

Specifies a field that is not displayed but whose value is submitted to the server.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form action="/user-hidden.php"> <input type="hidden" name="myHidden" value="xyz"> <input type="text" name="myName" placeholder="Brendon"> <input type="submit" value="Submit"> </form> </body> </html>
Run

image

Used to create graphical submit buttons.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form action="/user-name.php"> Name: <input type="text" name="name"><br><br> <input type="image" src="/submit.png" alt="Submit" width="158" height="48"> </form> </body> </html>
Run

month

Specifies a control for entering month and year only.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>When is your birthday(month and year)?</p> <form action="/user-birthday.php"> <input type="month" name="myBday"> <input type="submit"> </form> </body> </html>
Run

number

Specifies a control for entering numbers only.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Choose any number</p> <form action="/user-number.php"> <input type="number" name="myNumber"> <input type="submit" value="Submit"> </form> </body> </html>
Run

password

Specifies a control for masking a character immediately when a user is typed, either by * or •.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Enter your password</p> <form action="/user-password.php"> <input type="password" name="myPassword"> <input type="submit" value="Submit"> </form> </body> </html>
Run

radio

Defines a radio button.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form action="/gender.php"> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other<br> <input type="submit"> </form> </body> </html>
Run

range

Specify a numeric value which must be no less than a min value, and no more than the max value.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form action="/user-number.php"> <input type="range" name="myNumber" min="0" max="10"> <input type="submit"> </form> </body> </html>
Run

reset

Resets all form values to default values.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form> Name: <input type="text" value="Brenden Eich"> Age : <input type="text" value=57> <input type="reset"> </form> </body> </html>
Run

search

Specifies a text field designed for the user to enter search queries into.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form> <input type="search" placeholder="Google Search..."> </form> </body> </html>
Run

submit

Submits the form to the specified URL, when clicked.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Choose any number</p> <form action="/user-number.php"> <input type="number" name="myNumber"> <input type="submit" value="Submit"> </form> </body> </html>
Run

tel

Specifies a text field used to let the user enter and edit a telephone number. Here the input value is not automatically validated.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Give us your Phone Number</p> <form action="/user-phone.php"> <input type="tel" name="myPhone"> <input type="submit" value="Submit"> </form> </body> </html>
Run

text

Specifies a text field used to create a basic single-line text field.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form action="/user-name.php"> <input type="text" name="name"> <input type="submit"> </form> </body> </html>
Run

time

Specifies a control for entering time.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>When will you wake up?</p> <form action="/user-time.php"> <input type="time" name="myWakeup"> <input type="submit"> </form> </body> </html>
Run

url

Specifies a text field used to let the user enter and edit a URL.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>Enter your recent visited website?</p> <form action="/user-website.php"> <input type="url" name="myWebsite" placeholder="https://wikimass.com"> <input type="submit"> </form> </body> </html>
Run

week

Specifies a control that allows easy entry of a year plus the number of the week during that year.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <p>When is your vacation starts?</p> <form action="/user-week.php"> <input type="week" name="myVacation"> <input type="submit"> </form> </body> </html>
Run

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

❮ PrevNext ❯

Share this Page

Meet the Author