0

次の自動生成された HTML がありますが、これは変更できません。この HTML はフィールドのem前にメッセージを表示しますinputが、入力フィールドの右側に移動する必要があります。

float を に直接使用しようとしましたemが、機能しません。どんな助けにも感謝します。

<tr class="form-field">
    <th scope="row">
        <label for="user_email">Email</label>
        <em>Email is required.</em> 
    </th>
    <td>
        <input type="text" value="" id="user_email" name="user_email">
    </td>
</tr>
4

3 に答える 3

2

CSS のみのソリューション (お勧めしませんが、機能します)

jsfiddle: http://jsfiddle.net/rLhTs/

HTML:

<table>
    <tr class="form-field">
        <th scope="row">
            <label for="user_email">Email</label>
            <em>Email is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="user_email" name="user_email">
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row">
            <label for="user_name">Name</label>
            <em>Name is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="name_email" name="name_email">
        </td>
    </tr>
</table>

CSS:

​.form-field:nth-child(1):after { 
    content:"Email is required.";
}

.form-field:nth-child(2):after { 
    content:"Name is required.";
}

:afterコンテンツを宣言するだけでnth-childよく、何を置き換えようとしているのかを具体的に知る必要があります。

これは JavaScript ソリューションです。

このjsFiddleをチェックしてください：http://jsfiddle.net/E8dJ9/3/

これを拡張して、任意の数の行で機能することを示しました。実際の特定のユースケースに応じて、これを少し調整する必要がある場合があります。

完全を期すためのコード:

HTML:

<table>
    <tr class="form-field">
        <th scope="row">
            <label for="user_email">Email</label>
            <em>Email is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="user_email" name="user_email">
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row">
            <label for="user_name">Name</label>
            <em>Name is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="user_name" name="user_name">
        </td>    
    </tr>
</table>

JavaScript (jQuery を使用):

$('th[scope="row"]').each(function(index, value) {
    var em = $(this).find('em').text();
    $(this).parent().find('td').append('<em>' + em + '</em>');
});​

CSS:

.form-field th em {
    display: none;
}​
于 2012-08-19T17:36:40.973 に答える
0

次のようなものを試してください：

​label {
    float:left;
}
em {
    float: right;
}
input {
    float:left;
}

ただし、これemにより、親コンテナーの最も右端の場所に配置されます。テーブル内にあることを考えると、そのまま機能する可能性がありますが、テーブルの開始タグなどを含む完全な HTML がない限りテストできません。

于 2012-08-19T17:32:42.607 に答える
0

それができない場合は 、ユーザーが入力せずに送信ボタンをクリックするたびに、入力フィールド
<input type="email" title="enter the email in correct format" required="true"/>で電子メールの HTML5 検証を使用します。
間違った形式で入力した場合、フォームは送信されず、エラーが表示されます。

于 2012-08-19T17:41:07.050 に答える