Skip to main content

HTML Forms

Forms allowcollect usersuser input. Accessible forms connect every control to entera visible label and submitprovide informationinstructions and errors that do not rely on aplaceholders webpage.or colour.

Forms are commonly used for:

    Login systems Registration pages Contact forms Surveys Search boxes

    Creating a Form

    ABasic form is created using the form element.

    <form action="register.php" method="post">
  </formdiv class="form-group">
    <label

    Allfor="username">Username</label> form<p controls are placed inside the form element.

    Text Input

    id="username-help">Use the3–50 inputletters, elementnumbers toor create a text box.

    underscores.<form/p>
    <input type=id="text"username" name="username"
           autocomplete="username"
           aria-describedby="username-help"
           maxlength="50" required>
  </formdiv>
    <div

    Result:

    Adding a Label

    Labels describe the purpose of an input.

    <formclass="form-group">
    <label for="password">
        Username:
    Password</label>
    <input type=id="text">password" </form>

    Result:

    Username:

    Placeholder Text

    Placeholders provide hints to the user.

    <input
    type=name="text"
    placeholder="Enter username">

    Result:

    Password Input

    Password fields hide the text being entered.

    <inputpassword"
           type="password"
           placeholder=autocomplete="Enternew-password"
           password">

    Result:

    Email Input

    Email inputs help validate email addresses.

    <input
    type="email"
    placeholder="Enter email">

    Result:

    Number Input

    Number inputs only accept numeric values.

    <input
    type="number">

    Result:

    Text Areas

    Text areas allow users to enter multiple lines of text.

    <textarearequired>
  </textarea>

    Result:

    Checkboxes

    Checkboxes allow multiple selections.

    <input
    type="checkbox">

HTML

    Result:

     HTML

    Radio Buttons

    Radio buttons allow a single selection from a group.

    <input
    type="radio"
    name="year">

Year 10

<br>

<input
    type="radio"
    name="year">

Year 11

    Result:

     Year 10


     Year 11

    Dropdown Lists

    Use the select element to create a dropdown menu.

    <select>

    <option>
        HTML
    </option>

    <option>
        CSS
    </option>

    <option>
        JavaScript
    </option>

</select>

    Result:

    Submit Button

    Buttons are used to submit forms.

    <button>

    Submit

</button>

    Result:

    Complete Login Form

    <form>

    <label>
        Username
    </label>

    <br>

    <input
        type="text"
        placeholder="Username">

    <br><br>

    <label>
        Password
    </label>

    <br>

    <input
        type="password"
        placeholder="Password">

    <br><brdiv>

  <button type="submit">Create Login

    account</button>
</form>

    The

    Screenshotlabel’s Placeholder

    for

    Insertvalue screenshot showingmatches the logininput’s form.

    id.
    The
    name

    Formidentifies Submission

    the

    Formsvalue can send datasubmitted to another page.PHP.

    <form

    Useful action="process.php"input method="post"> </form>

    action

    Specifies where the data will be sent.

    action="process.php"

    method

    Specifies how the data will be sent.

    method="post"

    or

    method="get"

    Most login and registration systems use:

    method="post"

    Complete Exampletypes

    <!DOCTYPE html>

<html>

<head>
    <title>Forms Example</title>
</head>

<body>

    <h1>Student Registration</h1>

    <form
        action="process.php"
        method="post">

        <label>
            Name
        </label>

        <br>

        <input
            type="text"
            name="name">

        <br><br>

        <label>
            Email
        </label>

        <br>

        <input type="email" name="email">
<brinput type="number" name="capacity" min="1" max="100">
<brinput type="date" name="event_date">
<input type="file" name="dataset" accept=".csv,text/csv">

    Input types and HTML constraints help users, but PHP must validate every submitted value again.

    <fieldset>
  <legend>Preferred output</legend>
  <label><input Yeartype="radio" Levelname="output" value="table"> Table</label>
  <brlabel>

        <select name="year">

            <option>
                Year 10
            </option>

            <option>
                Year 11
            </option>

            <option>
                Year 12
            </option>

        </select>

        <br><br>

        <button>

            Submit

        </button>

    </form>

</body>

</html>

    Quick Reference

    Form

    <form>

    Text Input

    <input type="text">

    Password Input

    <input type="password">

    Email Input

    <input type="email">

    Number Input

    <input type="number">

    Text Area

    <textarea>

    Checkbox

    <input type="checkbox">

    Radio Button

    <input type="radio" name="output" value="chart"> Chart</label>
</fieldset>

    Dropdown

    Use fieldset and legend for a related group.

    Error summary

    <selectdiv role="alert">
  <p>Please correct the following:</p>
  <ul>
    <li>Capacity must be from 1 to 100.</li>
  </ul>
</div>

    Button

    Preserve 

    <button>valid
    values

    Formafter Action

    an 
    action="process.php"error
    when

    Formsafe, Method

    and 
    method="post"never
    return

    You now know howpasswords to collectthe userform.

    GET or POST

    Use GET for non-sensitive searches and filters that may be bookmarked. Use POST for registration, login, file upload and operations that change stored data.

    Check

       Every control has an associated label.  Instructions remain visible.  Appropriate input using HTML forms.

      Next tutorial: HTML Embedstypes and Comments

      autocomplete values are used.  PHP repeats validation.  Errors are specific and accessible.  Forms contain only fictional data.
      Back to top