HTML Forms

Forms are one of the things on your site that can improve or ruin user experience. They can also cost you business! It’s important to know how to code a form properly so that it is accessible and usable.

PLEASE NOTE: The screenshots of the form elements included below do have some styling added so that they’re easier to see. All form elements are inline elements, so they would not each display on a new line without this CSS.

The form Element and Its Attributes

The outermost tag pair for form content is the form element. It has two required attributes: action and method.

<p>
  If you would like more information, please fill out the form below. 
  Required fields are marked with an asterisk (<span class="required">*</span>).
</p>

<form action="https://wp.zybooks.com/form-viewer.php" method="POST">
 <!-- form inputs and labels, etc. go here -->
</form>

Form Element Attributes

As mentioned above, the attributes below are required on the opening form tag. There are other available attributes for the form element, but we will focus on those below in this course.

action – (required) – This is a link to the server that accepts your form submission. You can use the link above and in the zyBook for the form-viewer.php page, and it will display your form input values on successful submission.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
method – (required) – The method attribute should be set to either POST or GET. This tells the browser how to send your information to the server. The GET method is the default, but it is more secure to use the POST Method.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>

Form Widgets and Labels

Generally we think of form inputs, but those boxes you can enter text in aren’t the only things we include in forms. The term for these form elements is widgets. Each widget (except for fieldsets and buttons) requires a label that is properly associated with it for accessibility and validation (covered below and shown in each example).

The label Element and Its Attribute

The label element is used to tell the user and browser which inputs are looking for which information. All of the widgets given as examples below will be shown with properly coded label elements. RememberL it is required that each input have a label as shown in the code examples below.

label element – (required for each input, except as shown) – The label element is a tag pair that will contain text that labels and describes the input you want from the user. This should be clear and concise, should include some marking or information telling the user whether or not that input is required in order for the form to submit, and can also include an example of the format for the expected input. The example below matches the for attribute (required) on the label element to the id attribute on the input it labels. These should match exactly.
- for attribute – (required) – This attribute accepts a text value that should match the value of the id attribute on the input it labels exactly.
- Label Text – (required) – The text that the user sees on the page is placed between the opening and closing label tags.
- Indicating an Input is Required for Submission – (best practice) – In the examples on this page, each of the labels for a required input includes an asterisk wrapped in a span with a class of required. I would later target this class to adjust the styling for these asterisks so that they are noticeable. You should also include text above your form with any notes that will help the user to fill it out, including how they can tell whether or not an input is required.
  <p> If you would like more information, please fill out the form below. Required fields are marked with an asterisk (<span class="required">*</span>). </p> <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>

The input Element and Its Attributes

The input element is the most commonly used form element. It can be one of many types of input, and using the correct type for the input you expect is important for your site’s usability and accessibility. There are some required attributes for input elements, as well as some optional ones. These are explained below.

type – (required) – This can be one of multiple options. You should always use the correct type of input element for usability and accessibility. (These make autocomplete easier and display the correct type of keyboard based on the expected input). Some types of input elements:
- text – The text type is used when you expect input that could by any combination of letters, numbers, and punctuation, for no more than a few words, that does not have a more specific meaning (like an email address). Use this type for names, addresses, other simple text values.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- email – As you may have guessed, you use an email type of input. This will automatically check the input to ensure that the value entered by the user meets the basic format for either a blank input or an email address before allowing the form to submit.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="my-email">Email Address (address@site.com): <span class="required">*</span></label> <input type="email" name="my-email" id="my-email" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- tel – This type of input expects a phone number. It does not validate for a specific format, because phone number formats vary around the world. It is still a good practice to use this for phone number input types, as it will display the number keyboard for users on a mobile device.
  <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="my-phone">Phone Number (include area code): <span class="required">*</span></label> <input type="tel" name="my-phone" id="my-phone" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- password – This type of input expects password text to be entered by the user. This differs from the text type in that it will hide the characters as the user enters them on the page.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="pwd">Password<span class="required">*</span></label> <input type="password" name="pwd" id="pwd" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- submit – (required) – Although this is an input element, it uses the submit type to create a button you can click on to submit the form. This functionality works automatically, and when clicked it will first check the form to see that all required inputs have input and that they meet the correct format (based on the type of input used). On a submit button, you can (and should!) use the value attribute to set the text that will display on the button. If you do not set the value attribute, the text displayed will be different depending on the browser you are viewing your site in.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- number – The number input accepts numerical values only (the only “letter” value you can enter into this is e, which is a mathematical value). The number input type is best used for values like zip codes, and should not be used for values that contain a mix of letters and numbers, like a street address.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="zip-code">Zip Code (five digits)</label> <input type="number" name="zip-code" id="zip-code"> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- radio – A radio input type creates a radio button. Radio buttonsrender as a circle by default, and are included as a group, within a fieldset and legend, and each radio should include its own properly associated label. All radio inputs in a group should always have the same value for their name attribute. This is how the browser will know that they are part of a set. This is important because we use radio buttons to give the user a set of options from which they can only ever choose one. Use a group of radio buttons when that is the type of input you need from your user, like when asking their preferred method of contact, where they should only have one preference. The radio and checkbox input types both can also use the checked attribute, which makes that element appear to be checked on page load. It’s a good idea to use this for radio buttons so that a preference for an option is given to the user as a default. Only add the checked attribute to one radio input in the group. When properly coded, you can also check a radio button or checkbox by clicking on the label for your preference.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <label for="my-phone">Phone</label> <input type="tel" name="my-phone" id="my-phone"> <label for="my-email">Email*</label> <input type="email" name="my-email" id="my-email" required> <fieldset> <legend>Preferred Method of Contact</legend> <input type="radio" name="contact-pref" id="pref-email" value="prefer-email" required checked> <label for="pref-email">Email</label> <input type="radio" name="contact-pref" id="pref-phone" value="prefer-phone"> <label for="pref-phone">Phone</label> </fieldset> <label for="my-comments">Comments</label> <textarea name="my-comments" id="my-comments"></textarea> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
- checkbox – A checkbox input type creates a checkbox. Checkboxes render as a square by default, and are usually included as a group, within a fieldset and legend, and each checkbox should include its own properly associated label. Unlike radio buttons, we use checkboxes when we want to show the user a collection of options and allow them to choose as many of those options as they want. Imagine that you are ordering a pizza and it’s time to choose the toppings. In this case, only allowing the user to choose one option isn’t going to be helpful, but with checkboxes the user can select as many toppings as they want! The radio and checkbox input types both can also use the checked attribute, which selects that element on page load. Although you can use the checked attribute on your checkboxes, you should only do this if it is absolutely necessary. Usually the user has to interact with the checkboxes and you don’t want to choose an option for them by default. When properly coded, you can also check a radio button or checkbox by clicking on the label for your preference.
- <form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <fieldset> <legend>Choose your toppings (up to five)<span class="required">*</span></legend> <input type="checkbox" name="cheese" id="cheese" required> <label for="cheese">Cheese</label> <input type="checkbox" name="pepperoni" id="pepperoni"> <label for="pepperoni">Pepperoni</label> <input type="checkbox" name="sausage" id="sausage"> <label for="sausage">Sausage</label> <input type="checkbox" name="olives" id="olives"> <label for="olives">Olives</label> <input type="checkbox" name="peppers" id="peppers"> <label for="peppers">Peppers</label> <input type="checkbox" name="onion" id="onion"> <label for="onion">Onion</label> <input type="checkbox" name="artichoke" id="artichoke"> <label for="artichoke">Artichoke</label> <input type="checkbox" name="bacon" id="bacon"> <label for="bacon">Bacon</label> </fieldset> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
id – (required) – The id attribute gives a unique identifier to each of your form elements. These values are used with JavaScript for form validation later, and can also be used for styling.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
required – (required) – The required attribute is a Boolean attribute (which means that you can add it by just using the word “required”. If you mark a form input, select, textarea, or other form widget type as required the form will not be able to be submitted until that widget has input or a selection (that meets the format of the input type). Remember to mark your inputs as required also, and indicate to the user how they can tell which inputs are required for submission.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
name – (required) – The name attribute gives a name to your input which is sent to the server with the value entered by the user. Generally you will give this the same value as your id attribute value.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
value – (recommended on submit type, required on option element, good to include on radio buttons, do not use on others) – The value attribute is one you can use to set a default value in an input (but shouldn’t). For example, you can add a default name to the “full name” input on your page. The issue with this is that it would require additional validation, and makes the user experience worse. The only input where you should include a value attribute is the submit input type, and in that case the value is used to customize the text that displays on the submit button in all browsers.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>
placeholder – (DO NOT USE) – The placeholder attribute will add lightened text to your input that usually shows an example of the type of input you are seeking. We do not use placeholder text, as it hurts both accessibility and usability and should be avoided. When you click into an input that is using placeholder text, that placeholder text disappears, meaning that the user can no longer see it if they can’t remember what they were supposed to enter. Use a label to to inform the user of the expected input type and format.
<form action="https://wp.zybooks.com/form-viewer.php" method="POST"> <label for="full-name">Full Name (first and last) <span class="required">*</span></label> <input type="text" name="full-name" id="full-name" placeholder="John Smith" required> <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form"> </form>

The textarea Element

The textarea element is used to accept text input from your user that is longer than a single line or a few words, like comments or feedback in a form. Like other form widgets, you should always include a properly associated label element. The textarea element should also use the name, and id attributes, and also the required attributeif the textarea needs to be filled out in order for the form to be submitted.

<form action="https://wp.zybooks.com/form-viewer.php" method="POST">

  <label for="comments">Comments<span class="required">*</span></label>
  <textarea name="comments" id="comments" required></textarea>

  <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form">

</form>

An empty textarea, shown as a tall rectangle with a thin border is below a label that says "comments" and is followed by a red asterisk indicating that this input is required for submission

The select and option Elements and Their Attributes

The select and option elements are used together and create a menu of options that drop down from the input when the user clicks on it. These are usually used when you want to give the user a list of options that they can choose one from, and you’ll see them often for things like a list of states for the user to choose as part of their address.

The outermost pair of tags you will need to use are the select tags. You will need one pair of the select tags for your whole dropdown, and they should include the name and id attributes, as well as the required attribute if the form needs the user to choose a selection before the form can be submitted.

Inside of the select tags, you can have as many option elements as you need to list all of your optionsthat the user can choose from. Each option element uses a pair of tags, and the text that you want to display to the user is placed between the opening and closing tags. You should also be sure to include the value attribute on each option element that includes a choice for the user. You should also include an option element at the top of your options that includes a blank value attribute and the text that says something similar to “Choose an option” so that the user knows to do so before they submit the form. This is helpful because if your first option is one that the user can choose, they may not realize that they haven’t chosen one yet and that the one listed is just the first one in the list.

<form action="https://wp.zybooks.com/form-viewer.php" method="POST">

  <label for="pet-select">Choose a pet:</label>
  <select name="pet-select" id="pet-select">
    <option value="">--Please choose an option--</option>  
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>

  <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form">

</form>

An select dropdown element, shown as a rectangle with a thin border with the text "please choose an option" and a down arrow inside of the rectangle is shown below a label that says "choose a pet" which is the default appearance of this element on page load

An select dropdown element, shown as a rectangle with a thin border is hidden behind a larger gray rectangle with the "please choose an option" item selected and the other options listed below it. The pet options are: dog, cat, hamster, parrot, spider, and goldfish. This is the appearance of the select dropdown when it is open

The fieldset and legend Elements and Their Attributes

The fieldset and legend elements are used together for grouping similar form widgets and their labels. The fieldset elementis the outermost pair of tags. The legend element should be added first inside of the fieldset, and the text that explains what the user should do or choose from the widgets inside of the fieldset. These tags and do not require any attributes. Commonly, these are used to group radio buttons or checkboxes, but should also be used in longer forms for grouping things like the mailing and billing addresses for the user in separate fieldsets with their own legends indicating that..

<form action="https://wp.zybooks.com/form-viewer.php" method="POST">

  <label for="full-name">Full Name (first and last) <span class="required">*</span></label>
  <input type="text" name="full-name" id="full-name" required>

  <fieldset>
    <legend>Preferred Method of Contact <span class="required">*</span></legend>
                
    <input type="radio" name="contact-pref" id="pref-email" value="prefer-email" required checked>
    <label for="pref-email">Email</label>
                
    <input type="radio" name="contact-pref" id="pref-phone" value="prefer-phone">
    <label for="pref-phone">Phone</label>   
  </fieldset>

  <input type="submit" name="mySubmit" id="mySubmit" value="Submit Form">

</form>

a fieldset with the legend "preferred method of contact" and an asterisk next to the legend indicating that a choice is required. Two radio buttons are rendered as small circles and are shown next to their labels, which say "email" and "phone" The email radio button is checked, making the border of the radio blue and including a smaller blue circle inside of it

Complete Form Example

The example code below shows the complete code for a basic form.

<form method="POST" action="https://wp.zybooks.com/form-viewer.php">

    <label for="full-name">Full Name (first and last): <span class="required">*</span></label>
    <input type="text" name="full-name" id="full-name" required>

    <label for="my-email">Email Address (address@site.com): <span class="required">*</span></label>
    <input type="email" name="my-email" id="my-email" required>

    <label for="my-phone">Phone Number (include area code): <span class="required">*</span></label>
    <input type="tel" name="my-phone" id="my-phone" required>

    <fieldset>
        <legend>Preferred Method of Contact: <span class="required">*</span></legend>

        <input type="radio" name="contact-pref" id="pref-phone" value="prefer-phone" required checked>
        <label for="prefPhone">Phone</label>

        <input type="radio" name="contact-pref" id="pref-email" value="prefer-email">
        <label for="prefEmail">Email</label>
    </fieldset>

    <label for="my-state">Your State of Residence: <span class="required">*</span></label>
    <select name="my-state" id="my-state" required>
        <option value="">-- Please Choose Your State --</option>
        <option value="AL">AL</option>
        <option value="AK">AK</option>
        <option value="AZ">AZ</option>
        <option value="AR">AR</option>
        <option value="CA">CA</option>
        <option value="CO">CO</option>
        <option value="CT">CT</option>
        <option value="DE">DE</option>
        <option value="FL">FL</option>
        <option value="GA">GA</option>
        <option value="HI">HI</option>
        <option value="ID">ID</option>
        <option value="IL">IL</option>
        <option value="IN">IN</option>
        <option value="IA">IA</option>
        <option value="KS">KS</option>
        <option value="KY">KY</option>
        <option value="LA">LA</option>
        <option value="ME">ME</option>
        <option value="MD">MD</option>
        <option value="MA">MA</option>
        <option value="MI">MI</option>
        <option value="MN">MN</option>
        <option value="MS">MS</option>
        <option value="MO">MO</option>
        <option value="MT">MT</option>
        <option value="NE">NE</option>
        <option value="NV">NV</option>
        <option value="NH">NH</option>
        <option value="NJ">NJ</option>
        <option value="NM">NM</option>
        <option value="NY">NY</option>
        <option value="NC">NC</option>
        <option value="ND">ND</option>
        <option value="OH">OH</option>
        <option value="OK">OK</option>
        <option value="OR">OR</option>
        <option value="PA">PA</option>
        <option value="RI">RI</option>
        <option value="SC">SC</option>
        <option value="SD">SD</option>
        <option value="TN">TN</option>
        <option value="TX">TX</option>
        <option value="UT">UT</option>
        <option value="VT">VT</option>
        <option value="VA">VA</option>
        <option value="WA">WA</option>
        <option value="WV">WV</option>
        <option value="WI">WI</option>
        <option value="WY">WY</option>
    </select>

    <label for="my-comments">Comments: <span class="required">*</span></label>
    <textarea name="my-comments" id="my-comments" required></textarea>

    <input type="submit" name="my-submit" id="my-submit" value="Submit the Form">

</form>