我希望能够获取用户在 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"/>
</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>您需要使用
formGETPOST<!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;
?>
您需要使用任何服务器端语言来获取用户的输入。
使用此声明
<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']";
?>
如果你想使用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;
将为您工作！
<html lang="en">
<head>
<title>Young Bar</title>
<!-- Recommended meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- PyScript CSS -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.12.1/core.css">
<!-- This script tag bootstraps PyScript -->
<script type="module" src="https://pyscript.net/releases/2023.12.1/core.js"></script>
<link rel="manifest" href="./psadc-manifest.json">
</head>
<body>
<div align="center">
<h1>Dave's Pizza Place</h1>
</div>
<div>
<label for="datetime">Date:</label>
       <input type="date" id="input1" name="user_date" />
</div>
<div>
<label for="firstname">Firstname:</label>
 <input type="text" pattern="[A-Za-z-']+" id="input2" name="firstname" placeholder="firstname" maxlength="20"/>
</div>
<div>
<label for="lastname">Lastname:</label>
 <input type="text" pattern="[A-Za-z-']+" id="input3" name="lastname" placeholder="Lastname" maxlength="20"/>
</div>
<div>
<label for="mail">Address:</label>
   <input type="text" name="user_mail" id="input4" placeholder="Full Address"/>
</div>
<div>
<label for="tel">Phone#:</label>
   <input type="tel" id="input5" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/>
</div>
<p></p>
<form>
<fieldset>
<legend>Choose Your Pizza Type:</legend>
<div>
<input type="radio" id="8" name="contact" value="8" checked/>
<label for="contactChoice1">Small ($8)</label>
<input type="radio" id="contactChoice2" name="contact" value="10" />
<label for="contactChoice2">Medium ($10)</label>
<input type="radio" id="contactChoice3" name="contact" value="15" />
<label for="contactChoice3">Large ($15)</label>
<input type="radio" id="contactChoice4" name="contact" value="18" />
<label for="contactChoice3">ExtraLarge ($18)</label>
</div>
</fieldset>
</form>
<p></p>
<form>
<fieldset>
<legend>Specialities:</legend>
<div>
<input type="radio" id="contactChoice1" name="contact1" value="3" checked/>
<label for="contactChoice1">Super Cheesy ($3)</label>
<input type="radio" id="contactChoice2" name="contact1" value="5" />
<label for="contactChoice2">Extra Meaty ($5)</label>
<input type="radio" id="contactChoice3" name="contact1" value="2" />
<label for="contactChoice3">Really Veggie ($2)</label>
</div>
</fieldset>
</form>
<p></p>
<form>
<fieldset>
<legend>Extra Toppings:</legend>
<div>
<input type="checkbox" id="contactChoice1" name="contact2" value="1.5" checked/>
<label for="contactChoice1">Extra Cheese ($1.50)</label>
<input type="checkbox" id="contactChoice2" name="contact2" value="1.50" />
<label for="contactChoice2">Pepperoni ($1.50)</label>
<input type="checkbox" id="contactChoice3" name="contact2" value="1.50" />
<label for="contactChoice3">Mushrooms ($1.50)</label>
<input type="checkbox" id="contactChoice4" name="contact2" value="1.50" />
<label for="contactChoice4">Bacon ($1.50)</label>
<input type="checkbox" id="contactChoice5" name="contact2" value="1.50" />
<label for="contactChoice5">Olives ($1.50)</label>
</div>
</fieldset>
</form>
<p></p>
<button py-click="myFunction" id="add" class="py-button">Price Your pizza</button>
<p></p>
<script type="py">
from pyscript import display
from datetime import datetime
now = datetime.now()
def myFunction(event):
from pyscript import document
Date = document.getElementById("input1").value
Firstname = document.getElementById("input2").value
Lastname = document.getElementById("input3").value
Address = document.getElementById("input4").value
Phone = document.getElementById("input5").value
t = now.strftime("%m/%d/%Y, %H:%M:%S")
rate2=[]
rate = document.querySelector('input[name="contact"]:checked').value
rate1 = document.querySelector('input[name="contact1"]:checked').value
checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
for i in range(checkboxes.length):
rate2.append(checkboxes[i].value)
display(f"Today is: {t}")
display(f"Date: {Date}")
display(f"Firstname: {Firstname}")
display(f"Lastname: {Lastname}")
display(f"Address: {Address}")
display(f"Phone: {Phone}")
s1 = list(map(float, rate2))
s1 = (sum(s1))
display(f"Total: {int(rate)+int(rate1)+int(s1)}")
</script>
</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"/>
</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>