HTML Input Types

Type Text

<input type="text"> defines a one-line text input field.

HTML Code:

<form action="/action_page.php"> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> <br><br> <input type="submit"> </form> <p>Note that the form itself is not visible.</p> <p>Also note that the default width of a text field is 20 characters.</p>

Result:

First name:

Last name:


Note that the form itself is not visible.

Also note that the default width of a text field is 20 characters.


Type Password

<input type="password"> defines a password field.

HTML Code:

<form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form> <p>The characters in a password field are masked (shown as asterisks or circles).</p>

Result:

User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).


Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute.

HTML Code:

<form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>

Result:

First name:

Last name:


If you click "Submit", the form-data will be sent to a page called "/action_page.php".


Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values.

HTML Code:

<form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> <input type="reset"> </form> <p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>

Result:

First name:

Last name:


If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.


Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices.

HTML Code:

<form action="/action_page.php"> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other<br><br> <input type="submit"> </form>

Result:

Male
Female
Other


Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

HTML Code:

<form action="/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle2" value="Car">I have a car <br><br> <input type="submit"> </form>

Result:

I have a bike
I have a car


Type Button

<input type="button"> defines a button.

HTML Code:

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Result:

HTML Index

References

  1. W3Schools

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.