Form Input

In HTML is an important element of HTML form.

The "type" attribute of input element can be various types, which defines information field. Such as gives a text box.

Following is the description about types of element with examples.

<input type="text">:

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

<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>

Output:


    Enter first name: 
    
  
    Enter last name: 
    

    Note: The default maximum cahracter lenght is 20.

<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.

<form>  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <input type="submit" value="submit">  
</form>

Output:

  
    Enter User name
  
    
  
    Enter Password

<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 input values with default one's.

<form>  
    <label>User id: </label>  
     <input type="text" name="user-id" value="user">  
     <label>Password: </label>  
     <input type="password" name="pass" value="pass"><br>   
     <input type="submit" value="login"><br>
     <input type="reset" value="Reset">  
</form>

Output:

  
     User id:   
       
     Password:

<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.

<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>

Output:

  
  Kindly Select your favorite color  
   Red 
  
   blue 
  
  green 
  
  pink

<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.

<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>

Output:

   
      Enter your Name:  
        
      Kindly Select your favourite sports  
      Cricket
  
      Tennis
  
      Football
  
      Baseball
  
      Badminton

<input type="file">

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

<form>  
     <label>Select file to upload:</label>  
     <input type="file" name="newfile">  
     <input type="submit" value="submit">  
</form>

Output:

  
     Select file to upload:

<-- HTML Form

Form Attributes -->