语义 UI 下拉登录窗体

我正在尝试使用语义UI框架为网站创建一个下拉登录表单，但无法弄清楚是否有更好的方法。目前，表单位于菜单上的某个项目中，因此当您单击它时，下拉菜单会消失。这是我现在的代码：

     <div class="ui dropdown">Login
      <div class="dropdown menu">
        <div class="item">
          <form class="ui form">
            <div class="ui stacked segment">
              <div class="ui one column middle aligned very relaxed stackable grid">
                <div class="column">
                  <div class="ui form">
                    <div class="field">
                      <label>Username</label>
                      <div class="ui left icon input">
                        <input placeholder="Username" type="text">
                        <i class="icon-user-tie icon"></i>
                      </div>
                    </div>
                    <div class="field">
                      <label>Password</label>
                      <div class="ui left icon input">
                  <input placeholder="Password" type="password">
                  <i class="icon-lock icon"></i>
                </div>
              </div>
              <div class="ui blue submit button">Login</div>
            </div>
          </div>
        </div>
      </div>
          </form>
        </div>
      </div>
    </div>

有没有另一种方法可以将表单添加到下拉菜单中，而不会使其成为下拉菜单上的实际项目？谢谢！

我遇到了同样的问题...这是我的解决方案

<div class="ui teal buttons">
    <div class="ui button">Login</div>
    <div class="ui floating dropdown icon button">
        <i class="dropdown icon"></i>
        <div id="login-form" class="menu">
            <div class="ui basic segment">
                <form class="ui form">
                    <div class="field">
                        <input type="text" name="username" placeholder="Username">
                    </div>
                    <div class="field">
                        <input type="password" name="password" placeholder="Password">
                    </div>
                    <div class="item fluid">
                        <button class="ui fluid button" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

然后，我将登录表单的样式设置为宽度为300px，否则它与输入的宽度匹配。

与同样的问题作斗争。感谢@MA206，我对他的解决方案进行了一些改进。

我认为关键是菜单必须有一个项目，而表单不应该是项目。所以我认为使用另一个虚拟物品可能会有所帮助。

<div class="item"></div>

然而，要实现完美的下拉登录表单，还存在一些其他问题。它似乎没有响应预期地显示。我不知道如何解决这个问题。

这是我的解决方案：

$(function() {
  $('.ui.dropdown').dropdown();
  $('form#signIn').form({
    fields: {
      userID: {
        identifier: 'userID',
        rules: [{
          type: 'empty',
          prompt: 'Please enter your username.'
        }, {
          type: 'regExp',
          value: /^[a-z0-9_]+$/i,
          prompt: `You must only use 'a'-'z','A'-'Z','0'-'9','_'
for your username.`
        }]
      },
      password: {
        identifier: 'password',
        rules: [{
          type: 'minLength[6]',
          prompt: 'Your password must be at least 6 characters.'
        }, {
          type: 'regExp',
          value: /^[a-z0-9_@.]+$/i,
          prompt: `You must only use 'a'-'z','A'-'Z','0'-'9','_','@','.'
for your password.`
        }]
      }
    }
  });
  $('form#signIn input').keydown(function(e) {
    if (e.which == 13) {
      $('form#signIn').submit();
      return false;
    }
  });
});

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
</head>
<body>
  <div class="ui top fixed borderless compact massive stackable menu" style="display: flex">
    <div class="ui container">
      <div class="ui search white disabled fluid item" style="flex-grow:1;">
        <div class="ui transparent icon input">
          <input class="prompt" type="text" placeholder="Search books...">
          <i class="search link icon"></i>
        </div>
        <div class="results"></div>
      </div>
      <div class="right menu">
        <div class="ui dropdown item">
          <div>
            <i class="sign in icon"></i>
            <span class="text">Sign in</span>
          </div>
          <div class="menu">
            <form id="signIn" class="ui form" action="/signIn" method="post">
              <div class="ui stacked segment">
                <div class="field">
                  <div class="ui left icon input">
                    <i class="user icon"></i>
                    <input type="text" name="userID" placeholder="Username" maxlength="16">
                  </div>
                </div>
                <div class="field">
                  <div class="ui left icon input">
                    <i class="lock icon"></i>
                    <input type="password" name="password" placeholder="Password" maxlength="24">
                  </div>
                </div>
                <div class="ui fluid submit button">Sign in</div>
                <div class="ui error message"></div>
              </div>
            </form>
            <span class="item"></span>
          </div>
        </div>
        <a class="item">
          <i class="user plus icon"></i>
          <span class="text">Sign up</span>
        </a>
      </div>
    </div>
  </div>
</body>

相关内容

最新更新

热门标签：