Input Types in HTML Forms

0
228
views

There are some different types of, Input Type in the FORM to make them work properly.

Before learning Form input types, you should have to learn a few basics about HTML forms, If you are not familiar with HTML forms then you can learn about them by clicking  Forms in HTML

Input Type for Text 

You can define the text type input by using <input type=”text”>.

one can use this field for entering the name and other text, like address and so on.

<form action="/pagelink.php">
  Enter your name:
  <input name="yourname" type="text">
  <br/><br/>
  <input type="submit">
</form>

Input Type for Password

You can define the password type input by using
<input type=”password”>.

the password field uses a masking technique so that your entered keywords can be hidden to the naked eyes, that’s why it uses an asterisks or circle.

<form action="/pagelink.php">
  Enter your name:
  <input name="yourname" type="text">
  <br/><br/>
  Enter your password:
  <input type="password" name="password">
<br/><br/>
  <input type="submit">
</form>

Submit Button in HTML Forms

<input type=”submit”> specifies a button for submitting the data to the server-page or form handler.

The server-page has to be defined in the form’s action attribute:

<form action="/pagelink.php">
Your name:<br>
<input type="text" name="firstname" value="Vishal"><br>
Father name:<br>
<input type="text" name="lastname" value="Prem"><br><br>
<input type="submit" value="Submit">
</form>

 

Editing the submit button’s value will change the button text.

Input Type for Reset

You can define a reset button which can reset all the input value of form fields, by using
<input type=”reset”>

<form action="/pagelink.php">
Enter your name:
<input name="yourname" type="text">
<br/><br/>
Enter your password:
<input type="password" name="password">
<br/><br/>
<input type="submit">
<input type="reset">
</form>

Input for Radio Button 

you can define a radio button by using
<input type=”radio”>
.

Radio buttons let a user select ONE of many, given number of choices:

<form action="/pagelink.php">
<input type="radio" name="gender" value="male">
Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> 
Other
</form>

 

Input Type for Checkboxes

You can define multiple checkboxes for multiple selections/choices
<input type=”checkbox”>.

Checkboxes let you make choices from a range of multiple varieties.

<form action="/pagelink.php">
         Enter your name:
            <input name="yourname" type="text">
            <br/><br/>
         Enter your password:
            <input type="password" name="password">
            <br/><br/>
            <input  type="checkbox" name="checkbox1"> vehicle 1
            
            <input  type="checkbox" name="checkbox2"> vehicle 2
            <br/><br/>
            
            <input type="submit">
            <input type="reset">
</form>

Input Type for a Button

One can also define a button using <input type=”button”>

<form action="/pagelink.php">
            Enter your name:
            <input name="yourname" type="text">
            <br/><br/>
            Enter your password:
            <input type="password" name="password">
            <br/><br/>
            <input  type="checkbox" name="checkbox1"> vehicle 1
            
            <input  type="checkbox" name="checkbox2"> vehicle 2
            <br/><br/>
             <input type="button" onclick="alert('Welcome to HTLV')" value="Click Me!"> 
             <br/><br/>
        
            <input type="submit">
            <input type="reset">
            
</form>

 

There are some more input types ahead, you can look up for them at special Input Types