为多个网站创建登录表单

Creating a Login Form for Multiple Sites

本文关键字：登录表单创建网站更新时间：2023-09-26

我们的网页设计师刚刚完成了我们的网站，它有一个HTML表单，其中包含用户名/密码的文本输入，还有一个下拉框，让他们可以选择登录位置。由于HTML没有任何功能，我不相信，最好的方法是什么？

我假设是Javascript，但我以前从未使用过它，在这种情况下，我甚至不知道该搜索什么来应用它。

当前表单代码：

<form>
    <input class="binput" name="username" style="margin-left: 40px;" value="Username">
    <input class="binput" name="password" value="Password">
        <select class="binput" style="margin-left: 40px; width: 130px;">
            <option>Billing Panel</option>
            <option>Voice Panel</option>
            <option>Game Panel</option>
        </select>
    <input type="submit" class="blogin" value="Log In">
</form>

面板1登录集成示例：

<form method="post" action="http://www.yourdomain.com/whmcs/dologin.php">
Email Address: <input type="text" name="username" size="50">
Password: <input type="password" name="password" size="20">
<input type="submit" value="Login">
</form>

面板2登录集成示例：

<form method="POST" action="http://demo.tcadmin.com/templates/default/login.aspx">
  <table border="0" id="table1"><br />
    <tr><td>User:</td><td><input type="text" name="USERID" size="20"></td></tr>
    <tr><td>Password:</td><td><input type="password" name="PASSWORD" size="20"></td></tr>
  </table>
  <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset">
</form>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  >
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title </title>
</head>
<body>
<form method="POST" action="" name="frmLogin" id="frmLogin" onSubmit="return   sbmt();">
    <input class="binput" name="username" style="margin-left: 40px;" value="Username" id="usr">
    <input class="binput" name="password" value="Password" type="password" id="pwd">
        <select class="binput" style="margin-left: 40px; width: 130px;" onchange="changeAction(this);" name="loginSite" id="loginSite">
            <option value="0" Selected >Select One</option> 
        <option value="1">Billing Panel</option>
            <option value="2">Voice Panel</option>
            <option value="3">Yahoo! Mail</option>
        </select>
    <input type="submit" class="blogin" value="Log In">
</form>
<script language="">
//Every element in LoginInfo is array of informations about one site!
var LoginInfo= new Array(
                new Array("usr","pwd",""),
                new Array("usr","pwd","http://www.yourdomain.com/whmcs/dologin.php"),
                new Array("username","password","http://demo.tcadmin.com/templates/default/login.aspx"),
                new Array("usrname","pass","https://login.yahoo.com/config/login_verify2?&.src=ym"));
function changeAction(s){
    var loginSite = s.value;
    document.getElementById('usr').name=LoginInfo[loginSite][0];
    document.getElementById('pwd').name=LoginInfo[loginSite][1];
    document.getElementById('frmLogin').action=LoginInfo[loginSite][2];
}
function sbmt(){

    var user = document.getElementById('usr');
    if(!user.value || user.value=="Username"){
        return false;
    }
    var pwd = document.getElementById('pwd');
    if(!pwd.value || pwd.value=="Password"){
        return false;
    }
    var site =document.getElementById('loginSite');
    if(  site.value=="0"){
        return false;
    }
        return true;
}
</script>
</body>
</html>

我编辑了代码
我希望这个能解决你的问题：(

不使用表格进行布局，使用CSS
将CSS文件交换到不同的网站，保持相同的HTML
查找现有示例：https://stackoverflow.com/search?q=two-列+窗体
你到底在要求什么

因此，您需要根据所选值更改表单的action属性。

包括jQuery脚本(请参阅jQuery.com(

添加id以形成

<form id="login_form" action="put_the_first_url_here">

添加id以选择

<select id="login_into_url" class="binput" style="margin-left: 40px; width: 130px;">

将url添加到选项的值中。

<option value="http://demo.tcadmin.com/templates/default/login.aspx">TCADMIN</option>

将此脚本添加到底部

$(function() {     
     $('#login_into_url').change(function() {
         var url = $(this).val();
         $('#login_form').attr('action', url);
     });
 });

现在没有办法测试这个，但它应该可以工作。