Question

我有一个用于基本管理门户的登录表单，但是要单击的输入字段本身非常小。条形本身似乎是可单击输入字段的整个大小，因此您无法单击要输入的标签。

代码如下：

    <div className="container">
      <form onSubmit={handleSubmit} className="white">
        <h5 className="center">Cars4U Administration</h5>
        <div className="input-field">
          <input type="text" name="username" className="validate" required onChange={handleChange} />
          <label htmlFor="username">Username</label>
        </div>
        <div className="input-field">
          <input type="password" name="password" className="validate" required onChange={handleChange} />
          <label htmlFor="password">Password</label>
        </div>
        <div className="input-field center">
          <button className='btn z-depth-0' type='submit'>Login</button>
        </div>
      </form>
    </div>

如果光标位于以下位置，则无法单击输入字段。我只能直接在行上单击它：

CSS：

form {
  background-color: white;
  margin-top: 80px;
  margin-left: 350px;
  margin-right: 350px;
  border-radius: 3px;
}

form label {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  font-weight: 700;
}

form .input-field {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
}

Answer 1

根据Anthony的建议，您应该同时使用name和id作为标识符。

在输入中添加 id -

<input name="username"/>至<input name="username"id="username"/>

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <form className="white">
          <h5 className="center">Cars4U Administration</h5>
          <div className="row">
            <div className="input-field">
              <input type="text" id="username" className="validate" required />
              <label htmlFor="username">Username</label>
            </div>
            <div className="input-field">
              <input
                type="password"
                id="password"
                className="validate"
                required
              />
              <label htmlFor="password">Password</label>
            </div>
          </div>
          <div className="input-field center">
            <button className="btn z-depth-0" type="submit">
              Login
            </button>
          </div>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

使用Materialize-CSS的表单输入字段太小

1 个答案: