0

退屈なボタンの代わりに、ログイン ページのリンク ボタンのスタイルを設定することにしました。唯一のことは、それを機能させる方法がわからないことです。

リンクボタンの前のコードは次のとおりです。

 <div id="centerDoc">
    <div id="loginScreen">
     <table width="400" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
    <form name="form1" method="post" action="">
    <td>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
    <tr>
    <td colspan="3"><strong>User Login </strong></td>
    </tr>
    <tr>
    <td width="78">Username</td>
    <td width="6">:</td>
    <td width="294"><input name="username" type="text" id="username"></td>
    </tr>
    <tr>
    <td>Password</td>
    <td>:</td>
    <td><input name="password" type="password" id="password"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="submit" name="login" value="Login"></td>

    </tr>
    <tr><td colspan="3"><?php   require_once 'checkLogin.php';   ?></td></tr>
    </table>
    </td>

    </form>

したがって、唯一の違いは次の代わりです。

<td><input type="submit" name="login" value="Login"></td>

私は追加しました：

<td><a href="#" class="loginButton" name="login" value="login">Log in</a></td>

しかし、私が疑ったように、それは何もしません。どうすればこれを修正できますか? ありがとう。

編集: デフォルトのボタンの代わりにカスタム CSS ボタンを使用したいと思います。私の理解では、これはリンクボタンで行う必要があるということでした。checkLogin.phpしかし、 isset test を実行して必要な処理を実行できるように、ポスト イベントも取得する必要がありif (isset($_POST['login'])){ます。それが理にかなっていることを願っています。

4

3 に答える 3

4

入力のスタイルを設定して見栄えを良くすることができますが、リンクの場合は、次の属性を含める必要があります。

onclick="document.forms[0].submit(); return false;"

nameまた、コードの残りの部分によっては、またはvalue属性が必要ない場合もあります。

于 2012-08-28T11:40:55.943 に答える
1

「JavaScriptフォーム送信」でのクイックGoogle検索

<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
<a href="javascript: submitform()">Search</a>
</form>
<script type="text/javascript">
function submitform()
{
  document.myform.submit();
}
</script>

編集：cgoddardのソリューションの方が優れています

于 2012-08-28T11:42:45.167 に答える
0

loginButton の定義も必要です。

.loginButton {
    display:block;
    width:90px;
    height:50px;
    background:#ccc;
}

これもページにロードする必要があります。

<html>
<head>
<title>Test</title>
<style>
.loginButton {
    display:block;
    width:90px;
    height:50px;
    background:#ccc;
}
</style>
</head>
<body>
   <a href="#" class="loginButton" name="login" value="login">Log in</a>
</body>

上記のサンプルはうまくいくはずです。

于 2012-08-28T11:53:51.640 に答える