Blog Detail

Home Blog Detail

How to create a Form in HTML?

Blog Img

Creating a form in HTML is simple. You can use the <form> element to define the structure of the form.

·  <form>: Defines the form and includes action where to send the form data and method (GET or POST).

·  <label>: Provides a label for input elements.

·  <input>: Various types (e.g., text, email, radio, checkbox).

·  <textarea>: For multi-line text input.

·  <select>: For dropdown options.

·  <button>: To submit the form.

form.html

<form action="#" method="post" class="basic-form">
        <h6>Basic Form</h6>
        <!-- Text input for Name -->
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter Your Name" required>
        <br><br>

        <!-- Email input -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter Your Email" required>
        <br><br>

        <!-- Radio buttons for Gender -->
        <label>Gender:</label>
        <div class="form-inline">
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
        </div>
        <br><br>

        <!-- Dropdown select -->
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="in">India</option>
            <option value="us">United State</option>
            <option value="uk">United Kingdom</option>
        </select>
        <br><br>

        <!-- Textarea for message -->
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" placeholder="Enter Your Message" cols="50" required></textarea>
        <br><br>

        <!-- Submit Button -->
        <button type="submit">Submit</button>
</form>        

style.css

 body{
        font-family: Arial, Helvetica, sans-serif;
    }
    .basic-form{
        background: #F9F9F9;
        max-width: 400px;
        padding: 25px;
        margin: 50px auto;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }
  .basic-form input[type="text"], .basic-form input[type="email"], .basic-form textarea, .basic-form select
  {
        width: 100%;
        border: 1px solid #ccc;
        background: #FFF;
        margin: 0 0 5px;
        padding: 10px;
    }
    .basic-form button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #4CAF50;
    color: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    font-size: 15px;
    }
    .basic-form h6{
        font-size: 18px;
        color: #000;
        text-align: center;
        margin: 0px 0px 15px;
    }
    .basic-form label
    {
        font-size: 14px;
        margin-bottom: 5px;
        display: block;
    }
    .basic-form .form-inline label{
        display: inline;
    }

Demo:

© 2025Think4u. All Rights Reserved.