Post
Ask Question

Input Tag in HTML5

Introduction 

 
The input tag is used to collect data in web forms and send that data to the webserver or The HTML input tag is used to display control elements that allow users to input data in a form. Using the input tag, you can add controls such as text input, radio buttons, checkbox controls, submit buttons, and more.
 

1. Text Input Tag

 
The most commonly used input tag is the text input field. This value defines a control designed for text input. This type of field allows users to input textual data (e.g., names, titles, etc).
 
<input type="text" name="text box">
 
If you write a text box, the type attribute is optional.
 
<input name="text box"> 
 
For example
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8. User Name:  
  9.         <input type="text" name="text box">  
  10.             <br />  
  11.   Email:  
  12.             <input type="text" name="text box">  
  13.                 <br />  
  14.                 <input type="button" name="btn" value="Submit" />  
  15.             </body>  
  16.             <body>  
OUTPUT
 
img2.gif
 

2. Button Input Tag

 
You can use the Button Input tag to create a button.
 
For Example
 
In the below example we create button type input tag and create a JavaScript function and call it on the Button.
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.         <script type="text/javascript">  
  7.      function btnonclick() {  
  8.          alert('This is Button type input');  
  9.      }  
  10.         </script>  
  11.     </head>  
  12.     <body>  
  13.         <input type="button" name="btn" value="Button" onclick="javascript:btnonclick()"/>  
  14.     </body>  
  15. </html>  
OUTPUT
 
img8.gif
 

3. Password Input Tag

 
Password control is similar to text type with a small difference password types usually, hide the characters inputted using dots or asterisks instead.
 
<input type="password" name="text box">
 
For example
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8.         <input type="password" name="text box">  
  9.         </body>  
  10.         <body>  
OUTPUT
 
img3.gif
 

4. Checkbox Input Tag

 
You can use the Checkbox Input tag to create a clickable a checkbox used for check and uncheck values. You can use as many of these in a form as you like. Use the "checked" attribute to specify if the checkbox should be checked ("on") by default. 
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8.         <input type="checkbox" name="chk" value="" checked>  
  9.  Do you want the newsletter?  
  10. </input>  
  11.     </body>  
  12.     <body>  
OUTPUT
 
img4.gif
 

5. Radio Button Input Tag

 
This is similar to the checkbox except that we can select only one Radio Button at a time from group of Radio Button.
  1. <html>  
  2.     <head>  
  3.         <title>   
  4. Radio button Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8.         <input type="radio" name="rd1" value="Mag1">  
  9.             Magazine 1  
  10.         </input>  
  11.         <input type="radio" name="rd1" value="Mag2">  
  12.             Magazine 2  
  13.         </input>  
  14.         <input type="radio" name="rd1" value="Mag3" checked >  
  15.             Magazine 3  
  16.         </input>  
  17.         <input type="radio" name="rd1" value="Mag4">  
  18.             Magazine 4  
  19.         </input>  
  20.     </body>  
  21. </HTML>  
OUTPUT
 
img5.gif
 

6. Reset Input Tag

 
The Reset input tag type to clear all the data on the input tags in the form.
 
For example
 
We take a text type and reset type tag when we enter input in text tag and click on the reset type to reset the input from the text tag.
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8.         <input type="text" value="This is a input tag" />  
  9.         <input type="reset" value="Reset the form" />  
  10.     </body>  
  11. </html>  
OUTPUT
 
img6.gif
 

7. File Input Tag

 
File input tag to send files on a user's computer to the server when the form is submitted. This input tag displays a browse button to allow a user to browse to the file to upload (send to the server).
 
For Example
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8.         <input type="file" name="file1" />  
  9.     </body>  
  10. </html>  
OUTPUT
 
img7.gif
 

8. Image

 
The Image input tag to use an image instead of the standard submit button.
  1. <html>  
  2.     <head>  
  3.         <title>  
  4. Input text in html.  
  5. </title>  
  6.     </head>  
  7.     <body>  
  8.         <input type="image" src="images/Sunset.jpg" style="height: 173px; width: 205px" />  
  9.     </body>  
  10. </html>  
OUTPUT
 
img1.gif


Similar Articles