Материализация: Как добавить значки в кнопки ввода поля ввода? - PullRequest
Новая
       22

Материализация: Как добавить значки в кнопки ввода поля ввода?

0 голосов
/ 18 февраля 2019

Я пытаюсь создать приложение todo, основанное на 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-код после отправки.

Todo-App

1 Ответ

0 голосов
/ 18 февраля 2019

Вам просто нужно заменить тег 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>
...