JavaScript：将input标签中的内容打印到控制台

使用浏览器进行开发时，按F12可以查看网页信息。

目标：实现将input标签中的内容，打印到控制台（console）

HTML页面的关键代码实现：

登录功能：

HTML代码：

        <div class="form-container sign-in-container">
            <form id="login-form" action="#">
                <h1>用户登录</h1>
                <div class="social-container">
                    <a href="#"><i class="iconfont icon-qq"></i></a>
                    <a href="#"><i class="iconfont icon-weixin"></i></a>
                    
                    <!-- <a href="#"><i class="iconfont icon-github"></i></a> -->
                </div>
                <span>您可以选择以上几种方式登录您的账户！</span>
                <input type="text" placeholder="用户名" id="login-username">
                <input type="password" placeholder="密码" id="login-password">
                <a href="#">忘记密码</a>
                <button type="submit" onclick="login()">登录</button>
            </form>
        </div>

实现逻辑：

为input标签添加id属性，如上代码：

为输入用户名的input标签添加id为login-username

为输入密码的input标签添加id为login-password

为button标签添加点击事件οnclick="login()"，即点击按钮触发login()函数

JS代码：

/* 登录表单输入的信息打印到控制台 */  
function login() {
  const username = document.querySelector('#login-username').value;
  const password = document.querySelector('#login-password').value;
  console.log(`用户名为: ${username}, 密码为: ${password}`);
}

逻辑：

写一个JavaScript函数为login()

通过id属性获取input标签的内容，打印到控制台即可

注册功能的实现逻辑与登录功能大致相同，如下仅为关键代码：

HTML代码：

        <!--注册功能实现-->
            
        <div class="form-container sign-up-container">
            <form id="signup-form" action="#">
                <h1>用户注册</h1>
                <div class="social-container">
                    <a href="#"><i class="iconfont icon-qq"></i></a>
                    <a href="#"><i class="iconfont icon-weixin"></i></a>
                    
                    <!-- <a href="#"><i class="iconfont icon-github"></i></a> -->
                </div>
                <span>您可以选择以上几种方式注册一个您的账户！</span>
                <input type="text" placeholder="用户名" id="signup-username">
                <input type="password" placeholder="密码" id="signup-password">
                <input type="email" placeholder="邮箱" id="signup-email">
                <button id="send-code">发送验证码</button>
                <input type="text" placeholder="验证码" id="signup-code">
                <button type="submit" onclick="signUp()">注册</button>
            </form>
        </div>

JavaScript代码：

/* 注册表单输入的信息打印到控制台 */  
function signUp() {
  const username = document.querySelector('#signup-username').value;
  const password = document.querySelector('#signup-password').value;
  const email = document.querySelector('#signup-email').value;
  const code = document.querySelector('#signup-code').value;
  console.log(`用户名为: ${username}, 密码为: ${password}, 邮箱为: ${email}, 验证码为: ${code}`);
}

最后网页上的效果如下：