HTML Input Tag

1.) <input type="text">:

<input> element of type "text" are used to define a single-line input text field.

Example:

<form>  

    <label>Enter first name</label><br>  

    <input type="text" name="firstname"><br>  

    <label>Enter last name</label><br>  

    <input type="text" name="lastname"><br>  

    <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  

</form>

2.)<input type="password">:

The <input> element of type "password" allow a user to enter the password securely in a webpage. The entered text in password filed converted into "*" or ".", so that it cannot be read by another user.

Example:

<form>  

    <label>Enter User name</label><br>  

    <input type="text" name="firstname"><br>  

    <label>Enter Password</label><br>  

    <input type="Password" name="password"><br>  

    <br><input type="submit" value="submit">  

</form>

3.)<input type="submit">:

The <input> element of type "submit" defines a submit button to submit the form to the server when the "click" event occurs.

Example:

<form action="https://www.javatpoint.com/html-tutorial">  

    <label>Enter User name</label><br>  

    <input type="text" name="firstname"><br>  

    <label>Enter Password</label><br>  

    <input type="Password" name="password"><br>  

    <br><input type="submit" value="submit">  

</form>

4.)<input type="reset">:

The <input> type "reset" is also defined as a button but when the user performs a click event, it by default reset the all inputted values.

Example:

<form>  

    <label>User id: </label>  

     <input type="text" name="user-id" value="user">  

              <label>Password: </label>  

     <input type="password" name="pass" value="pass"><br><br>   

     <input type="submit" value="login">  

      <input type="reset" value="Reset">  

</form>

5.)<input type="radio">:

The <input> type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time.

Example:

<form>  

  <p>Kindly Select your favorite color</p>  

  <input type="radio" name="color" value="red"> Red <br>  

  <input type="radio" name="color" value="blue"> blue <br>  

  <input type="radio" name="color" value="green">green <br>  

  <input type="radio" name="color" value="pink">pink <br>  

  <input type="submit" value="submit">  

</form>

6.)<input type="checkbox">:

The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important difference between both types: radio buttons allow the user to select only one option at a time, whereas checkbox allows a user to select zero to multiple options at a time.

<form>   
      <label>Enter your Name:</label>  
      <input type="text" name="name">  
      <p>Kindly Select your favourite sports</p>  
      <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
      <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
      <input type="checkbox" name="sport3" value="football">Football<br>  
      <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
      <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>  
      <input type="submit" value="submit">  
  </form>

7.)<input type="button">:

The <input> type "button" defines a simple push button, which can be programmed to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:

<form>  

     <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  

</form>

8.)<input type="file">:

The <input> element with type "file" is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.

Example:

<form>  

     <label>Select file to upload:</label>  

     <input type="file" name="newfile">  

     <input type="submit" value="submit">  

</form>

Thanks for giving your time. Happy Learning !!