Home

Chapter 6: Form

Topics we are going to learn in this page:

1. form tag
2. input tag
3. label tag
4. button tag
5. textarea tag
6. select tag
7. option tag
8. fieldset tag
9. legend tag
10. action attribute
11. method attribute
12. for attribute
13. required attribute
14. name attribute
15. placeholder attribute
16. type attribute
17. value attribute

Explantion of the topics:

1. form tag

   • form tag is used to group all the inputs and send all data together to the server when submitted.
   • Two main attribute of form is "action" and "method"
   • action attribute: action value contains the url ar server address at where to send the form's data.
   • method attribute: The method attribute specifies how to send form-data
     • method="get" : If method is get then the form-data will be visible to the url.
     • method="post" : If method is post then the form-data will not be visible to the url.

2. input tag

   • type attribute: The type attribute specify which type of input it will take (text, date, number, password, checkbox, radio etc.).
   • name attribute: name attribute is like a variable. It is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
   • placeholder attribute: The placeholder attribute specifies a short hint that describes the expected value of an input field. The short hint is displayed in the input field before the user enters a value.
   • required attribute: The required attribute is a boolean attribute. It has no value. It specifies that an input field must be filled out before submitting the form.
   • id attribute: an unique id value is required to content the input field with proper <lable> tag and also to apply css or javascript.

3. label tag

   • The text inside <label> tag spacify what to input inside the input field to which the lable is connected.
   • The "for" attribute in the <label> tag will contain the id value (without #) of the & ltinput> to connect with the input field.
   • When a user clicks or touches/taps a label, the browser passes the focus to its associated input (Jump the cursor to the input field)
   • screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

4. button tag

   The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

5. textarea tag

   • The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
   • We can set the "rows" and "cols" attribute value to set a default size area for the text-box.

   • Example:
     Code:

         <textarea name="" id="" rows="10" cols="30"> Write here... </textarea>
                         

     Output

     Write here...

6. select tag

   • The <select> HTML element represents a control that provides a menu of options.
   • <select> tag needs <option> tag for showing the options
   • <option> tag: The text inside the opening and closing option tag is what the user will see and the text inside the "value" attribute of the option tag is send to the server.

   • Example:
     Code:

         <select name="" id="">
             <option value="a">a. Tree</option>
             <option value="b">b. Clude</option>
             <option value="c">c. Water</option>
         </select>
                         

     Output:

     a. Tree b. Clude c. Water

7. input type checkbox

   • For checkbox <label> tag is important to show what it is for.

   • Example:
     Code:

         <input type="checkbox" name="t&c" id="selector_example">
         <label for="selector_example">Accept terms &     conditions</label>
                         

     Output:

     Accept terms & conditions

8. input type radio

   • Radio input is used when we have to choose only 1 option.
   • <label> is used to give te information about the options
   • The text inside the "value" attribute of the input tag will be send too the server.
   • All the radio input's "name" attribute value must be same to select only 1 of them otherwise all of the options can be selected.

   • Example:
     Code:

         <input type="radio" name="abc" id="m" value="male">
         <label for="m">Male</label><br>
         <input type="radio" name="abc" id="f" value="female">
         <label for="f">Female</label><br>
         <input type="radio" name="abc" id="o" value="others">
         <label for="o">Others</label><br>
                         

     Output:

     Male
     Female
     Others
     

9. Example:

   Code:

                   <form action="somewhere" method="get">
                   <fieldset >
                       <legend>An example form:</legend>
               
                       <!-- Text input -->
                       <div>
                           <label for="Name">Name:</label>
                           <input type="text" id="Name" name="name" placeholder="Full Name" required >
                       </div>
                       
                       <!-- Radio buttons -->
                       <div>
                           <p>Gender:</p>
                           <input type="radio" id="male" name="gender" value="m">
                           <label for="male">Male</label>
                           <input type="radio" id="female" name="gender" value="f">
                           <label for="female">Female</label>
                           <input type="radio" id="other" name="gender" value="o">   
                           <label for="other">Other</label>
                       </div>
               
                       <!-- Selector with options -->
                       <div>
                           <br>
                           <label for="country">Country:</label>
                           <select id="country" name="nation">
                               <option value="IN">India</option>
                               <option value="US">United States</option>
                               <option value="CA">Canada</option>
                               <option value="UK">United Kingdom</option>
                               <option value="AU">Australia</option>
                           </select>
                       </div>
               
                       <!-- Textarea -->
                       <div>
                           <br>
                           <label for="message">Feedback message:</label><br>
                           <textarea id="message" name="feedback" rows="5" cols="30"></textarea>
                       </div>
               
               
                       <!-- Checkboxes -->
                       <div>
                           <p>Hobbies:</p>
                           <input type="checkbox" id="reading" name="hobbies" value="reading">
                           <label for="reading">Reading</label>
                           <input type="checkbox" id="traveling" name="hobbies" value="traveling">
                           <label for="traveling">Traveling</label>
                           <input type="checkbox" id="cooking" name="hobbies" value="cooking">
                           <label for="cooking">Cooking</label>
                           <br><br>
                       </div>
   
                       <!-- Submit button -->
                       <div>
                           <button type="submit">Submit</button>
                       </div>
   
                   </fieldset>
                   </form>
               

   Output:

   An example form:

   Name:

   Gender:

   Male Female Other

   
   Country: India United States Canada United Kingdom Australia

   
   Feedback message:
   

   Hobbies:

   Reading Traveling Cooking
   
   

   Submit