HTML Forms

HTML form on a web page allows a user to enter data that is sent to a server for processing. In another simple way, we can say that HTML Forms are required to collect different kinds of user inputs, such as contact details like name, email address, phone numbers, etc. Forms are enclosed in the HTML <form> tag. Forms mainly used two methods GET and POST to send data.

Forms contain special elements called controls like input box, checkboxes, radio-buttons, submit buttons, etc.

Example

 

<form>   

     <fieldset>       

         <legend>Log In</legend>       

                <label>Username: <input type="text"></label>       

                <label>Password: <input type="password"></label>       

                 <input type="submit" value="Submit">   

      </fieldset>

</form>

Result

HTML Forms Element

  • <Input> element

 

Example

 

             

  • <select> and <option> element

Example

           

  • <textarea> element

Example

           

  • <button> element

Example

           

 <!DOCTYPE html>
 <html>
               <body>

               <h2>The input Element</h2>

               <form action="/nk.php">
               Input:
                 <input name="name" type="text">
                 <input type="submit">
               </form>

               </body>

</html>

<select name="cars"> 

              <option value="op1">mobile</option> 

              <option value="op2">laptop</option>

</select 

<textarea name="msg_box" rows="5" cols="15">

             Hi, codersarts 

</textarea>

<button type="button" onclick="alert('Hello')">Click here</button>

HTML5 Forms Element
  • <datalist>

  • <output>

Conclusion

In this tutorial we learn how to design form with the help of elements their are lots of elements in HTML forms so it is very important to learning purpose.

Powered  by Codersarts