VTU CBCS 2018 Semester -6 Subject -Web Technology and its Applications

Explain different forms of text input controls with example.

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field. Such as <input type="text" name="name"> gives a text box.
1. <input type="text">:<input> element of type "text" are used to define a single-line input text field.
example:-
<form> 
    <label>first name</label><br>  
    <input type="text" name="firstname"><br>  
</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 Password</label><br>  
    <input type="Password" name="password">
</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="">  
    <label>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="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>  
5. <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.
Examples:-
<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>  
6. <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.
Examples :- 

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

 
7. <input type="email">:The <input> type "email" creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address.
Example :-

<form>  
         <label>Enter your Email address</label>  
        <input type="email" name="email" required>  
        <input type="submit">
</form>     

Share to whatsapp

Explain different forms of text input controls with example.

1. <input type="text">:

2. <input type="password">:

3. <input type="submit">:

4. <input type="radio">:

5. <input type="checkbox">:

6. <input type="button">:

7. <input type="email">:

More Questions from Web Technology and its Applications Module 2