0

テキスト入力や検証メッセージなどのフォーム要素を含む以下のフォーム テーブルを取得しました。

$error_user = (!empty($errors['user']))?$errors['user']:"";
$error_email = (!empty($errors['email']))?$errors['email']:"";  

            echo "<form action='./forgotpass.php' method='post'>
            <table>
            <tr>
            <td></td>
            <td id='errormsg'>$errormsg</td>
            </tr>
            <tr>
            <td>Username</td>
            <td><input type='text' name='user' value='$user'/><br/>".$error_user."</td>
            </tr>
            <tr>
            <td>Email</td>
            <td><input type='text' name='email' value='$email'/><br/>".$error_email."</td>
            </tr>
            <tr>
            <td></td>
            <td><input type='submit' name='resetbtn' value='Reset Password' /></td>
            </tr>
            </table>
            </form>";

現在、関連するテキスト入力の下に各検証メッセージを表示していますが、問題は配置です。現在行っているように、テキスト入力の下にメッセージを表示すると、テキスト入力が少し上に移動して、検証メッセージの下のスペースを占有します。つまり、テキスト入力はそのラベルで平準化されEmailません。検証が表示されたときのこのラベル。

私の質問は、検証メッセージが下に表示されたときにラベルとテキスト入力を互いに整列させるにはどうすればよいかということです

4

4 に答える 4

1

これを使用する場合：

echo "<form action='./forgotpass.php' method='post'>
        <table>
        <tr>
        <td></td>
        <td id='errormsg'>$errormsg</td>
        </tr>
        <tr>
        <td valign='top'>Username</td>
        <td valign='top'><input type='text' name='user' value='$user'/><br/>Username Error</td>
        </tr>
        <tr>
        <td valign='top'>Email</td>
        <td valign='top'><input type='text' name='email' value='$email'/><br/>Email Error</td>
        </tr>
        <tr>
        <td></td>
        <td><input type='submit' name='resetbtn' value='Reset Password' /></td>
        </tr>
        </table>
        </form>";

あなたが望む外観を得る必要があります。メッセージが行をゆがめる理由は、1 つのセルを拡大しているため、ラベルが含まれているセルが中央に垂直に配置されているためです。valign:top?に注意してください。これにより、すべてがセルの一番上にプッシュされるため、最初の行の行にあるすべてが一列に並んでいます。

このJSFiddleを参照してください

于 2012-12-11T12:30:17.413 に答える
0

また、言及されたすべてに加えて、他に何も台無しにならない場合は、次のように空の td にスペースを追加してみます。

        <td>&nbsp;</td>
        <td id='errormsg'>$errormsg</td>

それは物事を均等に分配します

于 2012-12-11T12:33:48.983 に答える
0

<td>この編集のようなエラーメッセージを表示するための別の要素を作成します

<tr>
 <td>Username</td>
 <td><input type='text' name='user' value='$user'/></td>
 <td>".$error_user."</td>
</tr>
于 2012-12-11T12:31:16.023 に答える
0

style="vertical-align: top"すべてのTDタグに追加します。また、入力ボックスのコンテンツと適切に整列させるために、ラベル セルに少しパディングを追加する必要がある場合もあります。

于 2012-12-11T12:30:47.070 に答える