HTML Forms

Form Code

Scroll within the container below to see all of the code needed to wrap your form widgets and labels.

                    
<form action="https://wp.zybooks.com/form-viewer.php" method="POST" target="_blank">
            
  <!-- form widgets and labels go here -->
            
</form>
                    
                

Form Labels

All form inputs and widgets require a properly coded label element. The text between the label tags should tell the user the type of expected input and whether or not it is required. The label's for attribute should be set to the same value as the input's ID.

Please fill out and submit the form below. Required inputs are marked with an *

Text & Number Input

Text inputs are probably the type that you will see most often on the web. While they can accept input with letters, numbers, and punctuation, they won't always be the correct/semantic type for your expected input. For our user age input below, we'll make the input type number. While we could use a text input, age should only include a number in years, so a number input would be more appropriate.

Please fill out and submit the form below. Required inputs are marked with an *

Telephone & Email Input

Telephone numbers and email addresses can be a pain to type out on the internet. Using the correct input type makes it easier for your users wo autocomplete your forms and it means that a more helpful keyboard will display when they click on an input to fill it out.

Please fill out and submit the form below. Required inputs are marked with an *

Fieldsets, Legends, Radio Buttons, & Check Boxes

Radio buttons and check boxes are used a lot in forms. A set of radio buttons gives you options from which you can only choose one. To make this work, be sure to give all of your radio buttons the same name value. Checkboxes allow the user to pick as many of the given options as they want.

To see the actual value of the radio sent to the server along with its name when the user makes a choice, include a "value" property and set it to text that aligns with the label.

Please fill out and submit the form below. Required inputs are marked with an *

Select & Option Elements

The select and option elements combine in multiple ways. In the example below, only one option can be chosen at a time, and because the select is marked as required, and the value on the first option is blank, the user won't be able to submit the form without choosing an option.

Please fill out and submit the form below. Required inputs are marked with an *

Textarea Widget

A textarea is used for text that will include more than one line. Things like comments will be added to a textarea.

Please fill out and submit the form below. Required inputs are marked with an *

Password Input

The password input will display small circles or asterisks to hide the characters being typed into the input. You would only want to send information like this to the server in a secure way.

Please fill out and submit the form below. Required inputs are marked with an *

Other Input Types

The examples below are just for reference. Some are not supported well in browsers, and some may just not be used as much as others.

Please fill out and submit the form below. Required inputs are marked with an *