All About HTML Input Tags with Some Examples

All about HTML input tags with some examples

Hello guys welcome to Code With Random blog, today we learn all about HTML input tags with some examples We learn input type button, checkbox, color, date time, hidden, email, file, password, month, number, radio, range, search, submit, URL, week, etc. 


1. Button Type

 <input type="button" value="Button Type">  

Button type is used as search or contact form submit button. its main use is to take input from users as a button.

Output…

 <input type="checkbox" name="" id="">  

Checkbox type is used as terms & condition confirmation, age confirmation or permission confirmation, etc. its main use is to take input from the user as a confirmation checkbox.

Output…

3. Color Type

 <input type="color" name="" id="">  

Color type is used for giving users the option to send color values in the form to servers.

Output…

Color Type


4. Date Type

     <input type="date" name="" id="">  

The data type is used for giving users the option to select a date and send the data value in the form to the server.

Output…

 Date Type

5. Datetime-Local Type

 <input type="datetime-local" name="" id="">  

Datetime-local type gives the option to user select date and time and sends data-time value in form data to the server. its mainly used in recruitment forms or government forms.

Output…

Datetime-Local Type


6. E-mail Type

  <input type="email" name="email" id="">  

E-mail type gives the option to user enter email address in the form and it uses a filter to form for only get email data. its mainly used in login, signup form, and most forms user email type input.

Output…

  Email Type


7. File Type

File type gives the option to user select files and then send them to servers it also has the option to select the specific file type for forms. it is used mainly in resume sites to enter resumes to servers.


8. Hidden Type

       <input type="hidden" name="">  

As the name guess hidden type is used as a hidden input it is mainly used in e-commerce sites when we select a product then move to cart it takes data of the product to the server.

Output…

  Not show anything its hidden



9. Month Type

    <input type="month" name="" id="">  

Month type is used for getting month information from the user it’s used in mainly appointment booking websites.

Output…


    <input type="number" name="" id="">  

Number type is used for data input only in numbers and it does not allow any else type. it’s used where we want the only numbers from users.

Output…

  Number Type


    


11. Password Type

       <input type="password" name="" id="">  

Password type is used for data input hidden for users its use when we didn’t want to show passwords but developers use javascript in many forms.

Output…

       <input type="radio" name="rd" id="1">  
<input type="radio" name="rd" id="2">

Radio type is used for select from options or select many options but not select all it’s mainly used in gender detail in forms or job type confirmation.

Output…

 Radio Type


13. Range Type

       <input type="range" name="" id="">  

Range type is used to getting data in the form of range type and it’s not using too much.

Output…

         <input type="text" name="text" id="">  
<input type="reset" value="reset">

Reset type is used for reset inputs in forms just need to click on reset input and it’s used in many forms.

Output…

         <input type="text" name="text" id="">  
<input type="submit" value="submit">

Submit type is used to submitting all form data to the server using the get method. it’s used mainly in all forms of every site.

Output…

         <input type="text" name="text" id="">  
<input type="submit" value="submit">

URL Type only allows to enter URL in the input field and it’s used when the admin wants a URL in server.

Output…

 <input type="text" name="" id="">  

The text type is used to send text data in the form. Its mainly used in the search bars.

Output…

Hope you like this post and enjoy it. If we did any mistake please comment it down so this help full for also our users. Thank you for reading.

Written by Tushar Sharma
Team Codewith_Random
Share on:

Leave a Comment