HTML Form - Part 2

     I hope you read my HTML Form Part 1 article.

     Let's learn input tags of form.

Input tags

     Most, but not all, form elements use the input tag, with a type="..." argument to 
     tell which kind of element it is. Type can be text, password, checkbox, radio,
     hidden, file, image, submit or reset.

• <input type="text"> : defines a one-line text input field.

               Example code
                      <form action="/action_page.php">
                           First name:<br>
                           <input type="text" name="firstname">
                      </form>

               Output

• <input type="password"> : defines a password field.

               Example code
                      <form action="/action_page.php">
                           User password:<br>
                           <input type="password" name="psw">
                      </form>

               Output

     Password is a confidential information. therefore characters of the password 
     field are shown as  asterisks or circles.

• <input type="checkbox"> : defines a checkbox. User can select zero or more options of a limited number of choices.

               Example code
                      <form action="/action_page.php">
                           <input type="checkbox" name="vehicle1" value="Bike">I have a bike
                           <br>
                           <input type="checkbox" name="vehicle2" value="Car">I have a car 
                      </form>

               Output

     You can see the name attribute is different in two input tag.

• <input type="radio"> : defines a radio button. Users can select only one of a limited number of choices.

               Example code
                      <form action="/action_page.php">
                           Gender : <br>
                           <input type="radio" name="gender" value="male" checked> Male<br>
                           <input type="radio" name="gender" value="female"> Female<br>
                           <input type="radio" name="gender" value="other"> Other
                      </form>

               Output

     You can see the name attribute is the same. if it is different all the radio button 
     can select. It is not the condition of the radio button. 
               Example code
                      <form action="/action_page.php">
                           Gender : <br>
                           <input type="radio" name="gender1" value="male" checked> Male<br>
                           <input type="radio" name="gender2" value="female"> Female<br>
                           <input type="radio" name="gender3" value="other"> Other
                      </form>

               Output

     Therefore name must be same.

• <input type="hidden"> : All input fields are sent back to the server, including hidden fields. This is a way to include information that the user doesn't need to see.

               Example code
                      <form action="/action_page.php">
                           <input type="hidden" name="hiddenField" value="23">
                      </form>

               Output

• <input type="submit"> : defines a button for submitting form data to a form-handler.

               Example code
                      <form action="/action_page.php">
                           <input type="submit" value="Submit">
                      </form> 

               Output

• <input type="reset"> : defines a reset button that will reset all form values to their default values.

               Example code
                      <form action="/action_page.php">
                           <input type="reset">
                      </form> 

               Output

• <button type="button">Submit </button> : take some action as specified by JavaScript.

               Example code
                      <form action="/action_page.php">
                           <button type="button">Submit</button>
                      </form>

               Output

• <textarea>---</textarea> : defines for multi-line input.

               Example code
                      <form action="/action_page.php">
                           <textarea name="message" rows="10" cols="30">
                                The cat was playing in the garden.               
                           </textarea>
                      </form>

               Output

• <select><option>---</option></select> : defines a drop-down lists.

         <option>--</option> : defines an option that can be selected.

               Example code
                    <form action="/action_page.php">
                         <select name="cars">
                              <option value="volvo">Volvo</option>
                              <option value="saab">Saab</option>
                              <option value="fiat">Fiat</option>
                              <option value="audi">Audi</option>
                         </select>
                    </form>

               Output

     I think now you have an idea of input tags.

     See you soon with the HTML Form part 3 (HTML5 input types)