从HTML表单获取用户输入

时间:2017-02-09 07:14:24

标签: javascript html css

我希望能够获取用户在我的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: david.genge@edu.sait.ca" 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"/>
 	            </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>

3 个答案:

答案 0 :(得分:2)

您需要使用form来保存用户输入的输入值。您可以使用GETPOST方法执行此操作。这是带验证的示例演示:

<!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;
?>

答案 1 :(得分:1)

您需要使用任何服务器端语言来获取用户的输入。

使用此声明

<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']";
?>

答案 2 :(得分:1)

如果你想使用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;

适合你!