<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LOGIN</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="content">
<form action="" method="get" name="form" >
<input type="text" placeholder="Username" value="" id="username">
<input type="password" placeholder="password" value="" id="password">
<ul class="wrap">
<li><a href="#">Remember me</a></li>
<li><a href="#">Forgot your password?</a></li>
</ul>
<div id="login">
<a href="#" onclick="check()">LOGIN</a>
</div>
</form>
</div>
<script>
function check(){
var txtValue = document.querySelector('input').value;
var txtName = document.querySelector('input').name;
// JSON
}
}
</script>
</body>
</html>想要检测用户名和密码的值是否为空, 并且在 console 中返回 JSON
{
"username" : "",
"password" : ""
}
并且相同的代码不做修改, 也可以应用在这个页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CREATE</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/create.css"> </head> <body> <div class="content"> <h2>Register new account</h2> <form action="" method="post"> <input type="text" placeholder="First Name" name="firstname"id="firstname"> <input type="text" placeholder="Last Name" name="lastname"id="lastname"> <input type="text" placeholder="Nick Name" name="nickname"> <input type="text" placeholder="City" name="city"> <input type="tel" placeholder="Phone Number" name="phone"> <input type="email" placeholder="Email" name="email"> <input type="submit" value="Create Account" id="submit-create"> </form> </div> <script> </script> </body> </html>
求大神
Kitayama
随时随地看视频慕课网APP
相关分类