tag. * Type 'form' and select the option that appears. * The

tag has a parameter called action. This is where you want to send your data. * Set action to 'process_form.php'. * Move the existing paragraph inside the tags. * Now add our hero options as 'submit' buttons.

* Setting the type to 'submit' means that when we click the button it will submit the form and send the data. Both buttons will do this. * name is the parameter name to be sent. Submit buttons will often be named 'submit' and not contain data, but sometimes there will be two forms on a page (or sent to a page) and you need to know which one to process. We use that here to differentiate the selected heroes. * The value is the text that will appear on the button. * Save and upload the file, then open the page. * Click on your chosen hero then check the results. Do you see your hero's name? * This is an usual way to use a Submit button, but it's valid. Let's look at other options. ==== Text Input ==== * Let's create a form to add heroes to our database. * We'll need input fields for the name, whether they're a hero or a villain, the year they first appeared in Marvel comics (or elsewhere) and what the source of their power is. * We could use a table to present our form with labels on the left and inputs on the right, but that isn't responsive, that is, it won't adapt to smaller screens. * Instead, we'll use a list, where each label / input pair is a list item. * Delete everything inside the tag and add the following code.

* The first field for the hero's name can be a simple text field.

                    
                        Hero Name:

* Here we have a label for our input, using the tag. * We then have an input, but rather than being of type="button" or type="submit", it is type="text" which is used for a simple text field, usually up to 100 characters or so. * We give it a name that will inform 'process_form.php' what the value refers to. * There are two additional attributes that we haven't seen before. size sets the size of the input box to 30 characters and maxlength limits the length of characters that can be entered. * Finally, we have the option to give the user a hint as to what kind of content we expect here using hint. * Save and upload the code to see how it looks live. ==== Radio Buttons ==== * When we have an input with only a few set options and only one can be selected at a time, we use radio buttons. * The most common example of this is 'male' and 'female'. * In this case we want to know whether our hero is actually heroic or villainous. Add the following code to show this.

* I've labelled this hero/villain distinction 'side' but if you can think of a better term, feel free to use that. * Again, radio buttons use the tag and, like buttons, they have a name and a value. * The value isn't displayed as it is on a button, because there's no room on a radio button. Instead, the value is the text we want to send to 'process_form.php'. * We add the text before or after the depending on how we want the form to appear. * Finally, notice the checked attribute in the first input. This sets the default item if you want one. * Save and upload to see how it looks. ==== Number ==== * Our next field is the year that the hero first appeared in a comic (or movie etc). * It will be sent as text, but it's actually a number and we can help our user by specifying that. * Add the following code to your form.

                    
                        First Appearance:

* We can also set size and maxlength, but we'll look at better ways to manage this later. * Save and upload the code to see how it looks. Almost exactly the same a text input, right? * Notice that it has up and down arrows to allow users to change the number by increments. * If you have a mobile to load the page with, you'll also notice that the keyboard automatically changes to a numeric input rather than the usual keyboard layout. ==== Dropdown Boxes ==== * Our next field is the source of the hero's power. This is a type of category, where we want to control the options that can be selected. * For this we use a field. * Copy the following code into your form.

                    
                        Source of Power:

* We have a number of options listed using