HTML
Input Types

Different input types for the <input> element are:

Text Field

Text fields are used to get input from the user in the form of letters, numbers etc.

Example

Copy Code 


<!doctype html>  
<html>
    <head> 
      	<title>Input Text Field</title> 
    </head>
	
    <body> 
    		<form>
    		 	  Name:<br>
      			<input type="text" name="username">
    		</form>
	   </body>
</html>

Password Field

Password fields are used to input passwords in the form. Each character inserted in this field appears as *.

Example

Copy Code 


<!doctype html>  
<html>
    <head> 
      	<title>Input Password Field</title> 
    </head>
	
    <body> 
    		<form>
     			  Type Your Password:<br>
    		    <input type="password" name="password">
    		</form>
  	</body>
</html>

Submit Button

Submit field is used to create a button for submitting form data to a form-handler.

Copy Code 


<!doctype html>  
<html>
  	<head> 
        <title> Submit Button</title> 
    </head>
	
    <body> 
		    <form>
 			      <h3>This is submit button</h3>
            <input type="submit" value="Submit">
		    </form>
    </body>
</html>

Reset Button

Reset button is used to clear all data entered by the user in different form elements.

Copy Code 


<!doctype html>  
<html>
  	<head> 
      	<title>Reset Button</title> 
    </head>
	
    <body> 
		    <form>
 			      <h3>This is reset button</h3>
			       <input type="reset">
		    </form>
    </body>
</html>

Radio Button

Radio buttons are used when the user has to choose one option from multiple choices.

Copy Code 


<!doctype html>  
<html>
	<head> 
    	 <title>Radio Button</title> 
    </head>
	
    <body> 
    		<form>
       			<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 
    		</form>
    </body>
</html>

Checkbox

Checkboxes are used to provide many options to the user. The user can choose one or multiple options from available choice.

Copy Code 


<!doctype html>  
<html>
    <head> 
       	<title>Checkbox</title> 
   	</head>
	
   	<body> 
    		<form>
      			<input type="checkbox" name="language1" value="java"> I like Java<br>
      			<input type="checkbox" name="language2" value="php"> I like PHP 
    		</form>
  	</body>
</html>

Button

Button is used to process the form data.

Copy Code 


<!doctype html>  
<html>
 
   	<head> 
      	<title>Button</title> 
   	</head>
	
  	<body> 
    		<form>
      			<input type="button" value="Click Me!">
    		</form>
  	</body>
</html>

File Upload Field

File upload field is used to get files from the user in a form. The visitors can select a file from the disk using this field.

Copy Code 


<!doctype html>  
<html>
   	<head> 
    	 <title>File Upload Field</title> 
   	</head>
	
  	<body> 
    		<form>
      			<input type="file">
    		</form>
  	</body>
</html>