css 无法从HTML格式的表单中读取事件内容

acruukt9 于 2023-02-14 发布在其他

关注(0)|答案(3)|浏览(147)

我是HTML和Javascript的新手。我正在创建一个基本的登录屏幕。

当我试图在控制台打印电子邮件的值和密码时，我什么也没得到。有人能帮我吗？

document.querySelector('.form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  console.log(email, password);
});

<div class="login-form">
  <h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
  <form class="form"></form>
  <div class="form__group">
    <label class="form__label" for="email">Email address</label
        ><input
          class="form__input"
          id="email"
          type="email"
          placeholder="you@example.com"
          required=""
        />
      </div>
      <div class="form__group ma-bt-md">
        <label class="form__label" for="password">Password</label
        ><input
          class="form__input"
          id="password"
          type="password"
          placeholder="••••••••"
          required=""
          minlength="8"
        />
      </div>
      <div class="form__group">
        <button class="btn btn--green">Login</button>
      </div>
    </div>
    
    <!-- <script src="/js/login.js"></script> -->

css

来源：https://stackoverflow.com/questions/75441252/unable-to-read-event-content-from-a-form-in-html

3条答案

按热度按时间

6ss1mwsb1#

这是因为<form class="form"></form>是空的，你应该把输入放在里面。

<div class="login-form">
    <h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
    <form class="form">
        <div class="form__group"><label class="form__label" for="email">Email address</label><input class="form__input" id="email" type="email" placeholder="you@example.com" required="" /></div>
        <div class="form__group ma-bt-md"><label class="form__label" for="password">Password</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
        <div class="form__group">
            <button class="btn btn--green">Login</button>
        </div>
    </form>
</div>

赞(0）回复(0）举报 2023-02-14

bn31dyow2#

- 处理HTML表单的简单方法：**

function onSubmit(event) {
        //prevents from page reload on submit
        event.preventDefault();

        let form = new FormData(event.target);
        let formData = Object.fromEntries(form);
        console.log(formData);
    }

<form onsubmit="onSubmit(event)">
    <label for="email">Email address</label>
    <input name="email" />
    <br>
    <label for="password">Password</label>
    <input name="password" />
    <br>
    <button type="submit">submit</button>
</form>

赞(0）回复(0）举报 2023-02-14

fhg3lkii3#

处理HTML表单的其他方法：

document.getElementById("btn-1").addEventListener("click", () => {
        let form = document.getElementById("form1");
        let formData = Object.fromEntries(new FormData(form));
        console.log(formData);
    })

<form id="form1">
    <label for="email">Email address</label>
    <input name="email" />
    <br>
    <label for="password">Password</label>
    <input name="password" />
    <br>
    <button type="button" id="btn-1">submit</button>
</form>

赞(0）回复(0）举报 2023-02-14

我来回答

css 无法从HTML格式的表单中读取事件内容

3条答案

相关问题

热门标签

最新问答