HTML Form Practice Problems (with solutions)

HTML

0 Comments

HTML Form Practice Problems (no CSS)

HTML allows you to create forms to accept input from your users. This page will test your knowledge of all the HTML form related tags. You currently do not need to use CSS to solve these problems, but we'll be adding some that do in the future.

Guides and tools you may need to solve these problems:

Which form tag would be best for getting someone's country?

  • Our choice would be select because we could prepopulate the select list with all of the countries (without taking up a lot of space on the page).

When should you use GET as the method for submitting your form? (choose all that apply)

  • Never use GET for sensitive data because it would be visible in the URL after the form is submitted.
  • GET is good for search results because the form values are saved in the URL. This means you can get back to the form results without filling out the form again.
  • An order form is not a good use for GET. The data is private, and the form could get submitted again if the user hits the back button. POST will warn the user before resubmitting the form.
  • Large forms may not be able to fit in the URL (URLs can only hold roughly 3000 characters).

Create the following signup form (using only HTML)

Other requirements

  • Add an extra field named secret to the form.
  • Its value should be set to 12345.
  • We don't want the user to be able to see it.

Open HTML Editor

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">

    <title>Create an Account</title>
</head>

<body>

<h1>Create an Account</h1>

<form action="/html-css-practice-test/" method="POST">
    <input type="hidden" name="secret" value="12345">

    <p>
        <label>Email:</label>
        <br>
        <input type="text" name="email">
    </p>

    <p>
        <label>Password:</label>
        <br>
        <input type="password" name="password">
    </p>

    <p>
        <label>Age:</label>
        <br>
        <select name="age">
            <option value="">Select Age</option>
            <option value="group1">Under 18</option>
            <option value="group2">18 to 30</option>
            <option value="group3">31 to 45</option>
            <option value="group4">46+</option>
        </select>
    </p>

    <p>
        <label>Tell us a little about yourself:</label>
        <br>
        <textarea name="about" rows="5" cols="50"></textarea>
    </p>

    <p>
        <input type="checkbox" name="accepts_tos" value="yes"> I agree to the
        <a href="/html-css-practice-test/" target="_blank">terms of service</a>
    </p>

    <p>
        <input type="submit" value="Sign up">
    </p>
</form>

</body>
</html>

Leave a Comment