使用浏览器进行开发时，按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}`);
} 最后网页上的效果如下：
