HTML | form Tag

The <form> tag in HTML is used to create form for user input. There are many elements which are used within form tag. For example: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.

Syntax:

<form> Form Content... </form>

Attributes: There are many attributes which are associated with <form> tag. Some of them are listed below:

  • input: It is used to specify the input field for user.
  • textarea: It is used to specify for multi-line text input field for user.
  • button: It is used to perform an operation in a form by the user.
  • label: It is used to give label to any tag like button, input etc.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>form tag</title>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2><form> Tag</h2>
        <form action="#">
            First name: <input type="text" placeholder = "First Name"
            value=""><br><br>
            Last name: <input type="text" placeholder = "Last Name"
            value=""><br><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>                    

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>form tag</title>
        <style>
            input {
                width:95%;
                height:30px;
            }
            button {
                background-color:green;
                color:white;
                border:none;
                border-radius:5px;
                font-size:14px;
                padding:5px;
                    
            }
            h1 {
                color:green;
            }
            h1, h2 {
                text-align:center;
            }
            body {
                width:60%;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2><form> Tag</h2>
        <form action="#">
        <div class="container">
            <h2>Sign Up Form</h2>
            <b>Email</b><br>
            <input type="text" placeholder="Enter Email" name="email" required><br>
            <br><b>Username</b><br>
            <input type="text" placeholder="Username" name="uid" required><br>
              
            <br><b>Password</b><br>
            <input type="password" placeholder="Enter Password" name="psw" required>
            <br>
            <button type="submit" class="registerbtn">Register</button>
        </div>
        <div class="container signin">
            <p>Already have an account? <a href="#">Sign in</a>.</p>
        </div>
        </form>
    </body>
</html>                    

chevron_right


Output:

Supported Browsers: The browser supported by <form> tag are listed below:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.