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

【问题标题】：Processing the value of radio button group that uses images处理使用图像的单选按钮组的值
【发布时间】：2015-12-11 16:38:03
【问题描述】：

我有一个使用单选按钮组的简单表单。每个单选按钮的右侧是一个描绘季节的图像 - 冬季、春季、夏季、秋季。要求用户单击单选按钮来选择季节。下面给出了 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 显示文本？任何帮助都会很棒，谢谢安迪 ;-)

【问题讨论】：

将name 分配给单选按钮并通过$_POST 和<form> 选择它们。

标签： php html

【解决方案1】：

首先，您的表单只会发送您收音机的文本值，因此processpicture.php 中的$picture 将始终是文本。其次，要显示图像，您需要使用 img 标记，就像您在 form.html 中使用的那样。

一种方法是设置收音机的values 以匹配它们旁边图像的srcs，并在processpicture.php 中使用img 标签。像这样-

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。

【讨论】：

感谢您的回复和解释。它起作用了;-)
@andyr 如果这个答案是正确的，请点击答案旁边的勾号。

【解决方案2】：

只需添加图片路径和endig，而不是ech $图片。 http://path/to/ 'php tag'回显图片'end php tag'.jpg">

类似的东西

【讨论】：