This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
en:web_development:forms:inputs [2022/01/18 07:41] mag |
en:web_development:forms:inputs [2023/08/16 09:33] (current) |
||
---|---|---|---|
Line 41: | Line 41: | ||
* 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 51: | Line 51: | ||
* Save and upload the file, then open the page. | * 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? | * 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. | + | * This is an unusual |
==== Text Input ==== | ==== Text Input ==== | ||
* Let's create a form to add heroes to our database. | * Let's create a form to add heroes to our database. | ||
- | * We'll need input fields for the name, whether they' | + | * We'll need input fields for the hero alias, (secret) identity, 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. | * 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. | * Instead, we'll use a list, where each label / input pair is a list item. | ||
Line 63: | Line 63: | ||
</li> | </li> | ||
</ | </ | ||
- | * The first field for the hero' | + | * The fields |
< | < | ||
- | < | + | < |
- | <input type=" | + | <input type=" |
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <input type=" | ||
</ | </ | ||
* Here we have a label for our input, using the < | * Here we have a label for our input, using the < | ||
Line 106: | Line 110: | ||
==== Dropdown Boxes ==== | ==== 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. | * 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 < | + | * For this we use a < |
* Copy the following code into your form. | * Copy the following code into your form. | ||
< | < | ||
Line 164: | Line 168: | ||
while($row = $rslt-> | while($row = $rslt-> | ||
?> | ?> | ||
- | <option value="<? | + | <option value="<? |
<?php | <?php | ||
} | } | ||
Line 214: | Line 218: | ||
* Now let's place this in our query in ' | * Now let's place this in our query in ' | ||
< | < | ||
- | $query = " | + | $query = " |
$args = array(); | $args = array(); | ||
$mrslt = $pdo-> | $mrslt = $pdo-> |