Tutorialspoint.dev

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:

<!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>                    

Output:

Example 2:

<!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>                    

Output:

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

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter