Jquery实战----表单制作

以下是一个使用jQuery创建简单登录表单的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="login-container">
    <form id="login-form">
        <h2>Login</h2>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <button type="submit">Login</button>
        </div>
    </form>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）:




#login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
#login-container h2 {
    text-align: center;
}
 
#login-container div {
    margin-bottom: 20px;
}
 
#login-container label {
    display: block;
    margin-bottom: 5px;
}
 
#login-container input[type="text"], #login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 
#login-container button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}
 
#login-container button:hover {
    background-color: #4cae4c;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        var username = $('#username').val();
        var password = $('#password').val();
 
        // 这里可以添加验证逻辑和AJAX请求来发送登录数据
        console.log('Login with username: ' + username);
 
        // 清空输入
        $('#username').val('');
        $('#password').val('');
    });
});

这个简单的例子展示了如何使用jQuery来创建一个登录表单，并处理表单的提交事件。在实际应用中，你需要添加验证逻辑以确保用户输入是有效的，并且可能需要使用AJAX来异步提交表单数据到服务器端进行验证和登录处理。

Jquery实战----表单制作

评论已关闭

推荐阅读