Input Types

Next ❯Form Attributes

Mainly used to create data related interactive elements for user to input

Input TypeDescription
textSingle line text field
passwordSingle line Password Field (Mainly used for sensitive information)
submitUsed to submit your form automatically by just clicking on it
resetTo reset the form fields
radioUsed when one option is required out of many options
checkboxUsed when more than one option is required to be selected
buttonTo create button from this option also
hiddenUsed when any fixed data has to be send on the server
fileUsed to upload any file to the server
imageTo create image type button
  • All the codes below are being used inside <body> tag
  • Alert! Your output appearance will be different because of not using CSS. So, Don't get confuse
  • label_outlineInput type "text"
    <form>
  First name:<br>
  <input type="text" name="first_name"><br>
  Last name:<br>
  <input type="text" name="last_name">
</form>
    OUTPUT
    First name:
    Last name:
  • label_outlineInput type "password"
    <form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="pass">
</form>
    OUTPUT
    User name:User password:
  • label_outlineInput type "submit"
    <form action="action_page.php">
  First name:<br>
  <input type="text" name="first_name"><br>
  Last name:<br>
  <input type="text" name="last_name"><br><br>
  <input type="submit" value="Submit">
</form>
    OUTPUT
    First name:Last name:
    • This is just a sample example, to see the "action_page.php" file check out Form action section
  • label_outlineInput type "reset"
    <form action="action_page.php">
  First name:<br>
  <input type="text" name="first_name"><br>
  Last name:<br>
  <input type="text" name="last_name"><br><br>
  <input type="submit" value="Submit">
  <input type="Reset" value="Reset">
</form>
    OUTPUT
    First name:Last name:
    • Just Enter anything inside input fields and then after press Reset button
  • label_outlineInput type "hidden"
    <form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="pass">
  <input type="hidden" name="key" value="Kuytsdvnvkdnfknkvfdn===" />
</form>
    OUTPUT
    User name:User password:
    • "Hidden" type value is already set by the programmer which is submitted along with the user information for some reasons. (like authentication keys used for authentication)
    • It's not appear or visible in the page
  • label_outlineInput type "radio"
    <form>
 Gender:
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female
</form>
    OUTPUT
    Gender: Male Female
  • label_outlineInput type "checkbox"
    <form>
 Subjects<br>
  <input type="checkbox" name="maths" value="maths"> Maths<br>
  <input type="checkbox" name="history" value="history"> History
</form>
    OUTPUT
    Subjects
    Maths
    History
  • label_outlineInput type "button"
    
 <input type="button" onclick="alert('Hello I am button!')" value="Button!">
    OUTPUT
  • label_outlineInput type "file"
    <form>
<!--To accept All file types-->
Any File: <input type="file" name="fileupload1"/><br>
<!--To accept Specific file types-->
Image File: <input type="file" name="fileupload" accept="image/*"/><br>
<!--To accept multiple files-->
Multiple Files: <input type="file" name="fileupload2" multiple/>
</form>
    OUTPUT
    Any File:
    Image File:
    Multiple Files:
  • label_outlineInput type "image"
    <form>
  <input type="image" name="imagebutton" src="images/imageFile.png" />
</form>
    OUTPUT
    • here, the above image act as a image button
Browsers Supports
SafariMicrosoft EdgeMozilla FirefoxChromeOpera Mini

Click on the above icon to see the name of the browser !

  • Tips! Always try to use latest version of browser

  • Form Attributes
❮ Prev Form Elements
Next ❯Form Attributes
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯