This tutorial is part of a web programming course for people who have no programming experience.
Adding a form to a web page allows you to collect information from the people who visit your website. While there are lots of different ways forms can be built in HTML, there are a few standard elements that you can use that will account for most of your needs.
The FORM Element
Start by adding a form element, and add the following attributes:
<form action="https://www.remwebdevelopment.com/resources/form-handler.php" method="POST"> </form>
The action attribute indicates where to send the information entered into the form when it is submitted (we'll ad a button to submit the data in a minute). The value of the action attribute is set to a page that I created, which will simply dump out the data that was sent to it. The method attibute specifies how the data should be sent. Don't worry about the method for now (we'll revisit the method later in the program), but for now just note that POST is a common method of sending form data.
Labels and Text Boxes
The next step is to add elements inside the form. We'll assume that you want the user to enter his/her first name. Add a label element and an input element, like so:
<label>First Name:</label> <input type="text" id="txtFirstName" name="firstName" />
If you view the form in the browser right now, it will look like this:First Name:
Notice that there is no button to submit/save the data entered into the form. Let's go ahead and add one now. To add a 'submit' button, we'll again use an input element, but this time we'll set the type attribute to 'submit', like so:
<input type="submit" value="SEND" />
We can add a checkbox the form by including this HTML code:
<label>Agree to our terms:</label> <input type="checkbox" name="agreed" value="yes" />
I'm sure you've all checked a box like this in order to agree to the terms of some service. We've used an input element again, but this time the type attribute is set to 'checkbox'. The value of the name attribute will be sent to the server and the value of value will also be sent. Both values for both the name and value attributes are arbitrary, which means that you can set them yourself.
You can add radio buttons like so:
<label>Favorite Pizza:</label> <input type="radio" name="pizza" value="sausage" /> Sausage <input type="radio" name="pizza" value="pepperoni" /> Pepperoni <input type="radio" name="pizza" value="mushroom" /> Mushroom
Radio buttons work together in groups, if you select one within a group, then the previously selected one will automatically be unselected. The key to grouping radio buttons is to set the name attribute to the same value. In this case you can see that all three radio buttons have the same value for the name attribute (pizza). Because of this, the three radio buttons work together as a group. The value of the selected radio button will be sent to the server.
If you want to set a one of the radio buttons to be selected when the page loads (as the default setting), you can add a checked attribute and set it's value to true, like so:
<input type="radio" name="pizza" value="sausage" checked="true" /> Sausage
Select Boxes (Drop-down Lists)
Select boxes, aka drop-down lists, are created by using a select element, and nesting option elements inside of it, like so:
<label>Favorite Color:</label> <select id="selColor" name="color"> <option value="1">RED</option> <option value="2">BLUE</option> <option value="3">GREEN</option> </select>
Select boxes are similar to radio button groups, because they allow users to select from a group of options. The value of the selected option will be sent to the server.
If you wanted to set a default color option, you could add a selected attribute and set its value to true, like this:
<option value="3" selected="true">GREEN</option>
The TEXTAREA Element
If you want your visitors to be able to enter multiple lines of input, you can use a textarea element.
<label>Comments:</label> <textarea id="txtComments" name="comments"></textarea>
The elements we've discussed in this lesson cover the most basic means of gathering user input in HTML. With the release of HTML 5 a few more were added, such as a slider and a date input. They are fairly straight forward to use, so I'll leave it up to you to explore them.NEXT LESSON: Layout Elements