PHP表单单选框区域无法显示红色背景的问题排查

问题场景 #

使用PHP渲染性别单选框表单，要求表单提交但未选择单选框时，将输入区域高亮为红色。已用类名为errorsexe的<span>包裹对应元素，并设置CSS背景色为#ff0000，但浏览器检查器显示类已应用，却看不到红色背景。

核心原因 #

<span>是行内元素，默认不会撑开高度和宽度来包裹内部元素，仅能容纳行内内容，因此背景色无法覆盖整个输入区域。即使浏览器识别到类样式，也没有足够的空间显示背景色。

解决方案 #

方案1：将span转为块级元素 #

修改CSS，给span.errorsexe添加display属性，让它变成块级/行内块元素，从而撑开空间显示背景色：

span.errorsexe {
  background-color: #ff0000;
  display: block; /* 或inline-block，根据页面布局选择 */
  padding: 4px; /* 可选，增加内边距让高亮区域更清晰 */
}

方案2：改用div标签代替span #

div默认是块级元素，无需额外设置display，直接替换PHP中的span标签即可：
修改PHP代码中的错误分支：

if (isset($_POST['submit'])) {
    echo '<div class="errorsexe">';
    echo '<input type="radio" id="sexef" name="sexe"/><label for="sexef"> une femme</label>';
    echo '<input type="radio" id="sexeh" name="sexe"/><label for="sexeh"> un homme</label><br />';
    echo '</div>';
}

对应的CSS调整为：

div.errorsexe {
  background-color: #ff0000;
  padding: 4px;
}

额外代码修正 #

原PHP代码存在一处无效HTML输出：第一个if (isset($_POST['sexe']))分支中，开头的echo ' value="f"';会将value="f"输出在单选框之外，导致HTML结构异常，需要删除这一行。修正后的分支代码：

if (isset($_POST['sexe'])) {
    if ($_POST['sexe'] == 'f') {
        echo '<input type="radio" id="sexef" name="sexe" checked="checked"/><label for="sexef"> une femme</label>';
        echo '<input type="radio" id="sexeh" name="sexe"/><label for="sexeh"> un homme</label><br />';
    } else {
        echo '<input type="radio" id="sexef" name="sexe"/><label for="sexef"> une femme</label>';
        echo '<input type="radio" id="sexeh" name="sexe" checked="checked"/><label for="sexeh"> un homme</label><br />';
    }
}

内容的提问来源于stack exchange，提问作者Nicolas FRANCOIS