Question

我想在HTML表单中使用按钮组，而不是使用复选框或无线电。

我正在使用此代码：

          <form class="form-horizontal" role="form" action="client/index" method="post">
          <fieldset>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="nickname">Nickname</label>
              <div class="col-sm-10">
                <input id="nickname" name="nickname" type="text" class="form-control" required="required">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label" for="gender">Gender</label>
              <div class="col-sm-10">
                <div class="btn-group">
                  <button type="button" class="btn btn-default" value="Female" name="username">Female</button>
                  <button type="button" class="btn btn-default" value="Male" name="username">Male</button>
                </div>
              </div>
            </div>

            <!-- Button -->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="button"></label>
              <div class="col-sm-offset-2 col-sm-10">
                <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
              </div>
            </div>

          </fieldset>
          </form>

但<?php echo $_POST['username']; ?>为空。

我做错了什么？

Answer 1

<button>不是<input>，因此您无法将该按钮数据发送到服务器，除非您使用类似JavaScript的内容将其值复制到<input type="hidden"> }，或者通过Ajax提交表单并提交value。

Answer 2

表单中包含的唯一按钮值是用于提交表单的按钮的值。

如果您不使用这些按钮提交表单，则需要以不同的方式在表单中包含值，例如，当单击按钮时，使用Javascript将值放入隐藏字段中：

<input type="hidden" name="username" id="username">

然后：

<button type="button" class="btn btn-default" value="Female" onclick="document.getElementById('username').value = this.value;">Female</button>
<button type="button" class="btn btn-default" value="Male" onclick="document.getElementById('username').value = this.value;">Male</button>

但是你仍然有可用性问题。单击按钮后，该按钮可能会立即聚焦，但如果用户在表单中执行任何其他操作，则选择不可见。如果您想以这种方式使用按钮，可以考虑更改所选按钮的外观。

Answer 3

按钮类型button不适用于POST方法，您需要使用submit类型。

我改变了什么：

<button type="button"至<button type="submit"和action=""用于测试目的。

PHP

<?php 

if($_SERVER['REQUEST_METHOD'] == "POST"){

$gender = $_POST['username'];

echo $gender;

}

?>

<form class="form-horizontal" role="form" action="" method="post">
          <fieldset>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="nickname">Nickname</label>
              <div class="col-sm-10">
                <input id="nickname" name="nickname" type="text" class="form-control" required="required">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label" for="gender">Gender</label>
              <div class="col-sm-10">
                <div class="btn-group">
                  <button type="submit" class="btn btn-default" value="Female" name="username">Female</button>
                  <button type="submit" class="btn btn-default" value="Male" name="username">Male</button>
                </div>
              </div>
            </div>

            <!-- Button -->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="button"></label>
              <div class="col-sm-offset-2 col-sm-10">
                <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
              </div>
            </div>

          </fieldset>
          </form>

<button type="button"与JS一起使用。
另外，除了你之外，你还没有在你的问题中提供任何PHP <?php echo $_POST['username']; ?>

Answer 4

这是一个不好的主意。我重复一个坏主意，但可以使用javascript和隐藏的表单字段来完成。粗略版本：

<input type="hidden" id="username" name="username" />
<div class="btn-group">
     <button type="button" class="btn btn-default" value="female" name="btnUsername"
          onClick="document.getElementByID('username').value='Female';">Female</button>
     <button type="button" class="btn btn-default" value="male"
       onClick="document.getElementByID('username').value='Male';"
       name="username">Male</button>
</div>

为什么这是一个不好的想法？因为它打破了按钮的正常用户期望，所以不提供已选择内容的反馈，并且没有明显的撤消选择的方法。单选按钮或复选框可以做得更好。如果你不喜欢他们的样子，可以找到改善他们在互联网上的外观的众多方法之一。

Answer 5

答案

可能，纯HTML就像这样：

        <div class="form-group">
          <label class="col-sm-2 control-label" for="gender">Gender</label>
          <div class="col-sm-10">
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-default btn-lg">
                <input type="radio" name="username" value="Female" id="username"> <i class="fa fa-female"></i> Female
              </label>
              <label class="btn btn-default btn-lg">
                <input type="radio" name="username" value="Male" id="username"> <i class="fa fa-male"></i> Male
              </label>
            </div>
          </div>
        </div>

如何在HTML表单中使用按钮，但不能用于提交？

5 个答案:

答案