User Tools

Site Tools


en:web_development:forms:inputs

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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 <html><form></html> tag has a parameter called <html>action</html>. This is where you want to send your data.   * The <html><form></html> tag has a parameter called <html>action</html>. This is where you want to send your data.
   * Set <html>action</html> to 'process_form.php'.   * Set <html>action</html> to 'process_form.php'.
-<code>        <form action="process_form.php"></code>+<code>        <form action="process_form.php"></form></code>
   * Move the existing paragraph inside the <html><form></html> tags.   * Move the existing paragraph inside the <html><form></html> tags.
   * Now add our hero options as 'submit' buttons.   * Now add our hero options as 'submit' buttons.
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 way to use a Submit button, but it's valid. Let's look at other options.
  
 ==== 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'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'll need input fields for the hero alias, (secret) identity, 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.   * 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>
                 </ul></code>                 </ul></code>
-  * The first field for the hero'name can be simple text field.+  * The fields for the hero'alias and identity can be simple text fields.
 <code>                    <li> <code>                    <li>
-                        <label>Hero Name:</label> +                        <label>Hero Alias:</label> 
-                        <input type="text" name="name" size="30" maxlength="50" hint="Iron Man">+                        <input type="text" name="alias" size="30" maxlength="50" hint="Iron Man"> 
 +                    </li> 
 +                    <li> 
 +                        <label>Identity:</label> 
 +                        <input type="text" name="identity" size="30" maxlength="50" hint="Tony Stark">
                     </li></code>                     </li></code>
   * Here we have a label for our input, using the <html><label></html> tag.   * Here we have a label for our input, using the <html><label></html> tag.
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 <html><select</html> field.+  * For this we use a <html><select></html> field.
   * Copy the following code into your form.   * Copy the following code into your form.
 <code>                    <li> <code>                    <li>
Line 164: Line 168:
     while($row = $rslt->fetch()) {     while($row = $rslt->fetch()) {
 ?> ?>
-                            <option value="<?php echo $row['character_name']; ?>"><?php echo $row['character_name']; ?></option>+                            <option value="<?php echo $row['alias']; ?>"><?php echo $row['alias']; ?></option>
 <?php <?php
     }     }
Line 214: Line 218:
   * Now let's place this in our query in 'form.php'.   * Now let's place this in our query in 'form.php'.
 <code>    // get list of movies <code>    // get list of movies
-    $query = "SELECT FROM appearances GROUP BY movie";+    $query = "SELECT movie FROM appearances GROUP BY movie";
     $args  = array();     $args  = array();
     $mrslt = $pdo->prepare($query);     $mrslt = $pdo->prepare($query);
en/web_development/forms/inputs.1642520478.txt.gz · Last modified: 2023/08/16 09:33 (external edit)