如何为 Web 应用程序创建“选择”按钮？答案

【问题标题】：How do I create a "select" button for a web app?如何为 Web 应用程序创建“选择”按钮？
【发布时间】：2021-11-06 17:49:21
【问题描述】：

这是我第一次涉足网络应用程序，我只接受过短暂的 HTML/CSS 培训，所以如果这都是超级基础，我深表歉意。

我正在为使用 Google App Script 的团队制作一个供教师使用的网络应用程序来奖励积分。该网络应用程序将包含三个带有团队名称的按钮和一个用于录制的按钮。完成后，我希望老师能够选择一个团队，单击提交，然后将条目记录在 Google 表格中。我了解 .gs (Google App Script) 方面的内容，因此无需帮助即可将数据导入电子表格。不过，我并不完全知道如何处理 UI 方面的事情。

我的代码如下。 record() 函数会将团队名称发送到 App Script 代码。我需要帮助的是按钮。我想让前三个按钮（团队）在单击时改变颜色，并且一次只能单击一个（如径向选择）。所以如果我按下“Team 1”然后更改为“Team 2”，Team 1 将被取消选中。然后，只有当我按下提交时才会记录分数。我假设我需要创建一个在按下按钮时切换的 var，但是如何使用 CSS 来实现呢？

<!DOCTYPE html>
<html>

<head>
    <style>
        .button {
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 20px;
            margin: 4px 2px;
            cursor: pointer;
            display: block;
            width: 300px;
            border-radius: 8px;
        }

        .button1 {
            background-color: green
        }

        .button2 {
            background-color: blue
        }

        .button3 {
            background-color: black
        }

        .button4 {
            background-color: red;
            margin-top: 20px;
            border-radius: 0px;
            width: 200px;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
</head>

<body>
    <h1>Which Team Earned a Point?</h1>
    <button class="button button1" id="char">Team1</button>
    <button class="button button2" id ="com">Team2</button>
    <button class="button button3" id="inq">Team3</button>

    <button class="button button4" id="sub" onclick="record()">Submit!</button>

    <script>
        function record(){
      google.script.run.pointUpdate();
    }
    </script>

</body>

</html>

TIA

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

标签： html css google-apps-script web-applications

【解决方案1】：

有一些方法可以通过将多个 input type=radio 设置为按钮来使用 CSS 来实现所需的结果。这是一个示例，在这段代码中，我使用 CSS 规则来隐藏输入单选元素。

.radio-group .button {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 16rem;
    margin-bottom: 1rem;
}
.radio-group .button-label {
    display: block;
    padding: 1rem;
    border-radius: .5rem;
    border: none;
    font-family: sans-serif;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    background-color: gray;
}

/* hide radio */
input[type="radio"] {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/* checked radio */
input[type="radio"]:checked  ~ .button-label {
    background-color: red;
}

<div class="radio-group">
    <label class="button">
        <input type="radio" name="radio-1">
        <div class="button-label">button 1</div>
    </label>
    <label class="button">
        <input type="radio" name="radio-1">
        <div class="button-label">button 2</div>
    </label>
    <label class="button">
        <input type="radio" name="radio-1">
        <div class="button-label">button 3</div>
    </label>
</div>

【讨论】：

【解决方案2】：

HTML 端可以尝试以下解决方案：

HTML

<body>
    <h1>Which Team Earned a Point?</h1>

    <div>
        <input type="radio" id="team1"
     name="team" value="team1value">
        <label for="team1">Team1</label>

        <input type="radio" id="team2"
     name="team" value="team2value">
        <label for="team2">Team2</label>

        <input type="radio" id="team3"
     name="team" value="team3value">
        <label for="team3">Team3</label>
    </div>
    <div>
        <button type="submit" onclick="record()">Submit</button>
    </div>
    <script>
        function record(){
      google.script.run.pointUpdate();
    }
    </script>

</body>

这就是它在网络应用的 UI 上的外观：

用户界面

说明

由于您想在多个元素之间做出选择，因此在这种情况下，最好的选择是使用单选按钮。

参考

HTML Radio Button。

【讨论】：