Question

我有一个使用单选按钮组的简单表单。每个单选按钮右侧是一个描绘季节的图像 - 冬季，春季，夏季，秋季。要求用户单击单选按钮以选择季节。接下来给出HTML和CSS：

form.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radio Button Group</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="processpicture.php" method="post">
<fieldset>
<legend>Choose a Picture. Type a Caption.</legend>
<p><label>Picture:</label>            
<input type="radio" name="picture" id="Winter" value="winter" checked="checked" />
<label for="winter"><img src="images/winter.jpg" alt="Winter" /></label>
<input type="radio" name="picture" id="Spring" value="spring" checked="checked" />
<label for="spring"><img src="images/spring.jpg" alt="Spring" /></label>
<input type="radio" name="picture" id="Summer" value="summer" checked="checked" />
<label for="summer"><img src="images/summer.jpg" alt="Summer" /></label> 
<input type="radio" name="picture" id="Autumn" value="autumn" checked="checked" />
<label for="autumn"><img src="images/autumn.jpg" alt="Autumn" /></label></p>            
<p><label for="caption">Caption:</label>
<input type="text" name="caption" id="caption" maxlength="30" size="30" /></p><p><button type="submit">Build the Picture</button></p>
</fieldset></form></body></html>

的style.css：

form{width:800px;}
label{display:inline-block; width:130px; font-weight:bold;}
button{border:1px solid #666; background:#29F398; display:block; margin-left:135px;}
img{width:100px; height: 100px;}
.highlight{font-weight: bold; color: #ffa500;}

我需要PHP脚本来处理单选按钮组并显示用户选择的图像。类似的东西：

以下是您的标题图片：[此处显示标题的图片]

processpicture.php：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset="UTF-8">
        <title>Procesing Picture Script</title>
    </head>
<body>
<?php 
$picture = $_POST['picture'];
$caption = $_POST['caption'];
echo "<h1>Picture Results</h1>";
echo "<p>You selected the following options:</p>";
echo "<ul><li>Picture: <span class=\"highlight\">$picture</span></li>
<li>Caption: <span class=\"highlight\">$caption</span></li></ul>";
echo "Here is your captioned image:<br><br>";
echo "$picture";
echo "<br><br>$caption</p>";
echo "<p><a href=\"form.html\">Try another picture</a>";

?>
</body>
</html>

当我运行代码时，会显示“Winter”一词而不显示Winter的图像。是否可以根据所选的单选按钮显示图像，而不是使用PHP显示文本？任何帮助都会很棒，谢谢安迪;-)

Answer 1

首先，您的表单只会发送收音机的文字值，因此$picture中的processpicture.php始终为文字。其次，要显示图片，您需要使用img中使用的form.html标记。

执行此操作的一种方法是将无线电的value设置为与其旁边图像的src相匹配，并在processpicture.php内使用img 1}}标签。像这样 -

form.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Radio Button Group</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <form action="processpicture.php" method="post">
    <fieldset>
      <legend>Choose a Picture. Type a Caption.</legend>
      <p>
        <label>Picture:</label>
        <input type="radio" name="picture" id="Winter" value="images/winter.jpg" checked="checked" />
        <label for="winter">
          <img src="images/winter.jpg" alt="Winter" />
        </label>
        <input type="radio" name="picture" id="Spring" value="images/spring.jpg" checked="checked" />
        <label for="spring">
          <img src="images/spring.jpg" alt="Spring" />
        </label>
        <input type="radio" name="picture" id="Summer" value="images/summer.jpg" checked="checked" />
        <label for="summer">
          <img src="images/summer.jpg" alt="Summer" />
        </label>
        <input type="radio" name="picture" id="Autumn" value="images/autumn.jpg" checked="checked" />
        <label for="autumn">
          <img src="images/autumn.jpg" alt="Autumn" />
        </label>
      </p>
      <p>
        <label for="caption">Caption:</label>
        <input type="text" name="caption" id="caption" maxlength="30" size="30" />
      </p>
      <p>
        <button type="submit">Build the Picture</button>
      </p>
    </fieldset>
  </form>
</body>

</html>

processpicture.php

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <meta charset="UTF-8">
  <title>Procesing Picture Script</title>
</head>

<body>
  <?php 
    $picture=$ _POST[ 'picture']; 
    $caption=$ _POST[ 'caption']; 
    echo "<h1>Picture Results</h1>"; 
    echo "<p>You selected the following options:</p>"; 
    echo "<ul><li>Picture: <span class=\"highlight\ "><img src=\"$picture\" /></span></li>
<li>Caption: <span class=\"highlight\ ">$caption</span></li></ul>"; 
    echo "Here is your captioned image:<br><br>"; 
    echo "<img src="$picture" />"; 
    echo "<br><br>$caption</p>"; 
    echo "<p><a href=\"form.html\ ">Try another picture</a>"; ?>
</body>

</html>

但是，如果您想要显示季节名称和季节图片，那么您可以保留radio原样并使用switch声明（我假设PHP有它们;我自己并没有真正使用PHP）和第二个变量来存储图像src。

Answer 2

只需添加图片路径和endig而不是ech $ picture。 http：// path / to /＆＃39; php tag＆＃39; echo picture＆＃39; end php tag＆＃39; .jpg＆＃34;＆gt;

像这样的东西

处理使用图像的单选按钮组的值

2 个答案: