從HTML表單獲取用戶輸入

我希望能夠獲取用戶在我的HTML表單中輸入的內容，並且能夠稍後在我的網站上打印它們。我希望能夠打印所有的用戶信息，包括他們對比薩餅做出的選擇。我一直試圖在過去的幾個小時，要做到這一點並沒有運氣:(希望得到的日期，姓氏，名字，地址和電話。從HTML表單獲取用戶輸入

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Daves Pizza</title>  
 
    <link href="new.css" rel="stylesheet" type="text/css"> 
 
    <script type="text/javascript" src="pizza.js"></script> 
 
    </head> 
 
<body> 
 
    <div align="center"> 
 
     <h5>Today is: <span id="dtfield"></span></h5> 
 
    </div> 
 
    <br> 
 
    <div align="center"> 
 
     <h1>Dave's Pizza Place</h1> 
 
    </div> 
 
    <div align="center"> 
 
     <div class="user"> 
 
      <form id="contact_form" action="mailto: [email protected]" name="userInfo" method="POST" enctype="text"> 
 
      <br> 
 
       <div> 
 
        <label for="datetime">Date:</label> 
 
        <input type="date" name="user_date" /> 
 
       </div> 
 
       <div> 
 
        <label for="firstname">Firstname:</label> 
 
        <input type="text" pattern="[A-Za-z-']+" name="firstname" value="Firstname" maxlength="20"/> 
 
       </div> 
 
       <div> 
 
        <label for="lastname">Lastname:</label> 
 
        <input type="text" pattern="[A-Za-z-']+" name="lastname" placeholder="Lastname" maxlength="20"/> 
 
       </div> 
 
       <div> 
 
        <label for="mail">Address:</label> 
 
        <input type="text" name="user_mail" placeholder="Full Address"/> 
 
       </div> 
 
       <div> 
 
        <label for="tel">Phone#:</label> 
 
        <input type="tel" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/> 
 
    \t    </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
    <div align="center"> 
 
     <div class="pizza"> 
 
      <form name="costEstimation"> 
 
       <table border="0"> 
 
        <tr valign="middle"> 
 
         <td> 
 
          <br> 
 
          <b>Choose Your Pizza Type<b><br> 
 
           <input type="radio" name="pizzasize" value="8" checked>Small $8<br> 
 
           <input type="radio" name="pizzasize" value="10">Medium $10<br> 
 
           <input type="radio" name="pizzasize" value="15">Large $15<br> 
 
           <input type="radio" name="pizzasize" value="18">Extra Large $18<br></td> 
 
         <td></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <b>Specialities<b><br> 
 
           <input type="radio" name="special" value="3">Super Cheesy $3<br> 
 
           <input type="radio" name="special" value="5">Extra Meaty $5<br> 
 
           <input type="radio" name="special" value="2">Really Veggie $2<br></td> 
 
         <td> 
 
          <b>Extra Toppings </b> 
 
          <br> 
 
          <input type="checkbox" name="cheese" value="1.5">Extra Cheese $1.50<br> 
 
          <input type="checkbox" name="pepperoni" value="1.5">Pepperoni $1.50<br> 
 
          <input type="checkbox" name="mushrooms" value="1.5">Mushrooms $1.50<br> 
 
          <input type="checkbox" name="bacon" value="1.5">Bacon $1.50<br> 
 
          <input type="checkbox" name="olives" value="1.5">Olives $1.50<br> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </form> 
 
      <h2>Pizza Cost: </h2><h2><span id="result"></span></h2> 
 
       <input type=button value="Price Your Pizza" onClick="pizza(); return false;"> 
 
       <button type="submit">Send your message</button> 
 
      <br><br><br> 
 
      <table> 
 
       <tr> 
 
        <td> 
 
         <figure> 
 
          <center> 
 
           <img src="cheese.jpg" alt="cheese" height="100" width="100"> 
 
          </center> 
 
         </figure> 
 
        </td> 
 

 
        <td> 
 
         <figure> 
 
          <center> 
 
           <img src="veg.jpg" alt="veg" height="100" width="100"> 
 
          </center> 
 
         </figure> 
 
        </td> 
 

 
        <td> 
 
         <figure> 
 
          <center> 
 
           <img src="meat.jpg" alt="meat" height="100" width="100"> 
 
          </center> 
 
         </figure> 
 
        </td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     <br> 
 
     <br> 
 
     <br> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-02-09 DNkG

你想使用Javascript或PHP顯示數據？ – affaz

*僅供參考*：'

'在HTML 4中已棄用。 – Justinas

您是否試圖使用純Javascript或使用PHP？ – prgrm

您需要使用。form用於保存用戶輸入的輸入值，您可以通過GET或POST方法做下面是示例演示與驗證：

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
.error {color: #FF0000;} 
</style> 
</head> 
<body> 

<?php 
// define variables and set to empty values 
$nameErr = $emailErr = $genderErr = $websiteErr = ""; 
$name = $email = $gender = $comment = $website = ""; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $nameErr = "Name is required"; 
    } else { 
    $name = test_input($_POST["name"]); 
    // check if name only contains letters and whitespace 
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) { 
     $nameErr = "Only letters and white space allowed"; 
    } 
    } 

    if (empty($_POST["email"])) { 
    $emailErr = "Email is required"; 
    } else { 
    $email = test_input($_POST["email"]); 
    // check if e-mail address is well-formed 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     $emailErr = "Invalid email format"; 
    } 
    } 

    if (empty($_POST["website"])) { 
    $website = ""; 
    } else { 
    $website = test_input($_POST["website"]); 
    // check if URL address syntax is valid (this regular expression also allows dashes in the URL) 
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { 
     $websiteErr = "Invalid URL"; 
    } 
    } 

    if (empty($_POST["comment"])) { 
    $comment = ""; 
    } else { 
    $comment = test_input($_POST["comment"]); 
    } 

    if (empty($_POST["gender"])) { 
    $genderErr = "Gender is required"; 
    } else { 
    $gender = test_input($_POST["gender"]); 
    } 
} 

function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
} 
?> 

<h2>PHP Form Validation Example</h2> 
<p><span class="error">* required field.</span></p> 
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    Name: <input type="text" name="name" value="<?php echo $name;?>"> 
    <span class="error">* <?php echo $nameErr;?></span> 
    <br><br> 
    E-mail: <input type="text" name="email" value="<?php echo $email;?>"> 
    <span class="error">* <?php echo $emailErr;?></span> 
    <br><br> 
    Website: <input type="text" name="website" value="<?php echo $website;?>"> 
    <span class="error"><?php echo $websiteErr;?></span> 
    <br><br> 
    Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea> 
    <br><br> 
    Gender: 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
    <span class="error">* <?php echo $genderErr;?></span> 
    <br><br> 
    <input type="submit" name="submit" value="Submit"> 
</form> 

<?php 
echo "<h2>Your Input:</h2>"; 
echo $name; 
echo "<br>"; 
echo $email; 
echo "<br>"; 
echo $website; 
echo "<br>"; 
echo $comment; 
echo "<br>"; 
echo $gender; 
?>

來源

2017-02-09 07:19:36 shyamm

你剛從你自己的項目中複製粘貼的代碼嗎？：D – Justinas

nope，這是我的演示代碼，當我剛剛編程..！ – shyamm

你需要使用任何服務器SI de語言來獲得用戶的輸入。

此語句

<form method="GET or POST" action="file_location/file_name(on which you want to get input)">

PHP是很簡單的語言，你可以伊斯利瞭解它我給你舉個例子：

的index.html

<form method="GET" action="localhost://getdata.php"> 
<input type="text" name="UserName" /> 
<input type="button" value="Submit" /> 
</form>

關注在輸入語句「UserName」中使用的名稱標籤，您的數據將通過綁定用戶輸入發送，然後您可以顯示打好使用PHP與該名數據顯示低於

訪問getdata.php

<?php 
echo "$_GET['UserName']"; 
?>

來源

2017-02-09 07:36:55

，如果你想使用JavaScript，然後獲取數據，

HTML：

<input type="text" name="name" id="uniqueID" value="value" /> 
    <span id="output"></span>

JS：

var nameValue = document.getElementById("uniqueID").value; 
document.getElementById("output").innerHTML=nameValue;

將爲您服務！

來源

2017-02-09 08:33:30 Jaini

嘿，我做到了，它工作完美！謝謝 – DNkG

從HTML表單獲取用戶輸入

回答

相關問題