en:web_development:forms:forms
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:web_development:forms:forms [2022/01/13 16:29] mag created |
en:web_development:forms:forms [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Web Development Lesson 8 - Forms ====== | ====== Web Development Lesson 8 - Forms ====== | ||
| - | ===== Forms ===== | + | ===== Inputs |
| ==== Objective ==== | ==== Objective ==== | ||
| In this activity you will create a form and use it to pass data from one page to another. | In this activity you will create a form and use it to pass data from one page to another. | ||
| Line 21: | Line 21: | ||
| <?php | <?php | ||
| include(' | include(' | ||
| - | ?> | + | ?></ |
| **process_form.php** | **process_form.php** | ||
| Line 35: | Line 35: | ||
| ?></ | ?></ | ||
| - | ==== Forms ==== | + | ==== Submit a Form ==== |
| * Open ' | * Open ' | ||
| * Add a new line below the opening < | * Add a new line below the opening < | ||
| * Type ' | * Type ' | ||
| - | * The < | + | * The < |
| * Set < | * Set < | ||
| + | < | ||
| * Move the existing paragraph inside the < | * Move the existing paragraph inside the < | ||
| * Now add our hero options as ' | * Now add our hero options as ' | ||
| Line 46: | Line 47: | ||
| <button type=" | <button type=" | ||
| * Setting the < | * Setting the < | ||
| - | * < | + | * < |
| * The < | * The < | ||
| - | * | + | * 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' | ||
| + | * 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 < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | * The first field for the hero's name can be a simple text field. | ||
| + | < | ||
| + | < | ||
| + | <input type=" | ||
| + | </ | ||
| + | * Here we have a label for our input, using the < | ||
| + | * We then have an input, but rather than being of < | ||
| + | * We give it a < | ||
| + | * There are two additional attributes that we haven' | ||
| + | * Finally, we have the option to give the user a hint as to what kind of content we expect here using < | ||
| + | * 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 ' | ||
| + | * In this case we want to know whether our hero is actually heroic or villainous. Add the following code to show this. | ||
| + | < | ||
| + | < | ||
| + | <input type=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | * I've labelled this hero/ | ||
| + | * Again, radio buttons use the < | ||
| + | * The < | ||
| + | * We add the text before or after the < | ||
| + | * Finally, notice the < | ||
| + | * 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. | ||
| + | < | ||
| + | < | ||
| + | <input type=" | ||
| + | </ | ||
| + | * We can also set < | ||
| + | * 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 < | ||
| + | * Copy the following code into your form. | ||
| + | < | ||
| + | < | ||
| + | <select name=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | </ | ||
| + | </ | ||
| + | * We have a number of options listed using < | ||
| + | * Rather than setting the < | ||
| + | * The value sent to ' | ||
| + | * Save and upload the file to see that it appears as a dropdown box. | ||
| + | * Finally, add the submit button to make the form work. | ||
| + | < | ||
| + | * Save and upload the file. | ||
| + | * Add some data and click on the button to submit your data. | ||
| + | * Notice that if you choose ' | ||
| + | |||
| + | ==== Fieldsets ==== | ||
| + | * We'd also like to be able to add the appearances | ||
en/web_development/forms/forms.1642120185.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
