时间戳

首页 > 解决方案 > 物化：如何向输入字段提交按钮添加图标？

frameworks - 物化：如何向输入字段提交按钮添加图标？

问题描述

我正在尝试基于 Materialize-css 构建一个待办事项应用程序。我希望输入字段与应包含具体化图标的提交按钮位于同一行。这就是我目前所拥有的：

<div class="col s12">
        Hinzufügen
          <div class="input-field inline">
            <input id="todo" type="email" class="validate">
            <label for="todo">todo</label>
               <input type ="submit" class ="btn waves-effect waves-light inline" value = "Submit"/>
          </div>
</div>

这是一张关于它目前的外观的图片。我只是不知道如何将图标添加到提交按钮，因为没有打开和关闭标签，它只是一个输入标签。我需要那个输入标签才能在提交后使用 php 代码。

待办事项应用程序

标签： frameworksmaterialize

解决方案

您只需将input标签替换button为示例中的标签，希望对您有所帮助

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Home</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
</head>

<body>

    <header>
        <nav>
            <div class="nav-wrapper blue darken-3">
                <a href="#!" class="brand-logo">Charts</a>
                <!-- <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a> -->
                <ul class="right hide-on-med-and-down">
                    <!-- <li><a href="sass.html">Sass</a></li> -->
                </ul>
            </div>
        </nav>

        <!-- <ul class="sidenav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
        </ul> -->
    </header>


    <main >
        <div class="col s12">
        Hinzufügen
          <div class="input-field inline">
            <input id="todo" type="email" class="validate">
            <label for="todo">todo</label>
            <button class="btn waves-effect waves-light" type="submit" name="action">Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </div>

    </main>


    <footer>

    </footer>
</body>

</html>

推荐阅读