HTML

Creating Web Forms

Web Forms or HTML Forms resemble forms on paper where the user has to fill the required information.

Web users fill out the forms using checkboxes, radio buttons, text fields and many more elements. These elements are called Form Controls.

The making of a simple HTML form requires two elements, the Form Element and an Input Element.

The Form Element and its Attributes

Every form begins with a <form> tag and ends with a </form> tag.
Within these tags are some unique elements for each form control (such as the text area, input tag, and buttons).


To set up a form, you will need to specify some important attributes: Action attribute, Target attribute and Method attribute.

  • action - The action attribute defines the action to be performed when the form is submitted.
  • target - The target attribute specifies where to display the response that is received after submitting the form.
  • method - The method attribute specifies the HTTP method to be used when submitting the form data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

    • HTML Form Elements

    The HTML <form> element can contain one or more of the following form elements :


  • <input> - This element can be displayed in several ways, depending on the type attribute.
  • <label> - This element defines a label for several form elements.
  • <select> - This element defines a drop-down list.
  • <textarea> - This element defines a multi-line input field (a text area).
  • <button> - This element defines a clickable button.
  • <fieldset> - This element is used to group related data in a form.
  • <legend> - The <legend> element defines a caption for the <fieldset> element.
  • <datalist> - This element specifies a list of pre-defined options for an <input> element.
  • <output> - The <output> element represents the result of a calculation (like one performed by a script).
  • <option> - The <option> tag defines an option in a select list.
  • <optgroup> - The <optgroup> tag is used to group related options in a <select> element (drop-down list).
    • For Example:

    <html>
    <head>
    <title>Example | Kode.Blox </title>
    </head>
    <body>
    <form action="/submit" method="post" enctype="multipart/form-data" autocomplete="on" novalidate>
    <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required minlength="3" maxlength="25" placeholder="Enter your username">
    </div>
    <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required minlength="8">
    </div>
    <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
    <label for="website">Website:</label>
    <input type="url" id="website" name="website" placeholder="https://example.com">
    </div>
    <div class="form-group">
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
    </div>
    <div class="form-group">
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" required min="18" max="100" step="1">
    </div>
    <div class="form-group">
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday" required>
    </div>
    <div class="form-group">
    <label for="start-month">Start Month:</label>
    <input type="month" id="start-month" name="start-month" required>
    </div>
    <div class="form-group">
    <label for="start-week">Start Week:</label>
    <input type="week" id="start-week" name="start-week" required>
    </div>
    <div class="form-group">
    <label for="appointment-time">Appointment Time:</label>
    <input type="time" id="appointment-time" name="appointment-time" required>
    </div>
    <div class="form-group">
    <label for="meeting-time">Meeting Time:</label>
    <input type="datetime-local" id="meeting-time" name="meeting-time" required>
    </div>
    <div class="form-group">
    <label for="search">Search:</label>
    <input type="search" id="search" name="search" placeholder="Search here" required>
    </div>
    <div class="form-group">
    <label for="resume">Resume:</label>
    <input type="file" id="resume" name="resume" required>
    </div>
    <input type="hidden" id="hidden-info" name="hidden-info" value="12345">
    <div class="form-group">
    <label for="fav-color">Favorite Color:</label>
    <input type="color" id="fav-color" name="fav-color" required>
    </div>
    <div class="form-group">
    <label for="satisfaction">Satisfaction:</label>
    <input type="range" id="satisfaction" name="satisfaction" min="0" max="10" step="1" value="5">
    </div>
    <button type="reset" class="btn btn-secondary">Reset</button>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </body>
    </html>

    Prev

    Next