0

フォームに取り組んでおり、reCAPTCHAフィールドの上にメモを含める必要があります。すべての準備が整いましたが、*メッセージを送信するには、次の単語を入力してください。注とreCAPTCHAはかなり離れているため、2つの要素を垂直方向に近づける方法を理解する必要があります。

メモのフォームで段落タグを使用していますが、それが悪いフォームかどうかわかりませんか？

ウェブサイトへのリンク

CSS：

/*Prayer Request Form*/

#prayer-form {  
    margin-bottom: 20px;
    width: 960px;
    height: 520px;
    padding: 40px 30px;
    margin-left: auto; 
    margin-right: auto;


}


form, fieldset, input, textarea {
    margin: 0; padding: 0; border: 0; outline: none;
}


label {
    float: left; clear: left; margin: 11px 20px 0 0; width: 65px;
    text-align: left; font-size: 14px; color: #000000; 

}


input {
    width: 370px; height: 20px; padding: 5px 10px 5px 10px; margin: 0 0 23px 0; 
    background: #EDEDED;
    border: 1px solid #808080;  
    font-family: sans-serif; font-size: 14px; color: #000000;
}



textarea {
    width: 650px; height: 120px; padding: 10px 10px 5px 10px; margin: 0 0 20px 0; 
    background: #EDEDED;
    border: 1px solid #808080;
    overflow: auto; 
    font-family: sans-serif; font-size: 14px; color: #000000;
}


input[type=submit] {
    width: 95px; height: 30px; float: left; clear: left; padding: 2px 5px 2px 5px; margin: 20px 0 0 85px;
    color: #FFFFFF;
    border: 1px solid #0000CD;
    background: -moz-linear-gradient(top, #00BFFF 0%, #0000CD 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00BFFF), color-stop(100%,#0000FF)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00BFFF', endColorstr='#0000CD');
    cursor: pointer;
}

input[type=reset] {
    width: 95px; height: 30px; float: left; padding: 2px 5px 2px 5px; margin: 20px 0 0 20px;
    border: 1px solid #858585;
    background: -moz-linear-gradient(top, #EDEDED 0%, #999999 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#999999)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EDEDED', endColorstr='#999999');
    cursor: pointer;
}


p captcha{
float: left; padding: 2px 0 0 85px;
font-family: sans-serif; font-size: 14px; color: #000000;

}

#captcha {
    float: left; margin: 11px 0 20px 0; width: 445px; height: 110px; padding: 2px 5px 2px 85px;


}

HTML：

<!--/ Show Prayer Request Form-->

<div id="prayer-form">


<form name="prayer-form" action="send-mail.php" method="POST">

<label for="field_name">Name:</label> <input type="text" id="field_name" name="sender_name" placeholder="First Name, Last Name"> 
<br>
<label for="field_email">Email:</label> <input type="text" id="field_email" name="sender_email" placeholder="example@domain.com">
<br>
<label for="field_phone">Phone:</label> <input type="text" id="field_phone" name="sender_phone" placeholder="(444) 444-4444">
<br>
<label for="field_message">Prayer Request:</label>

<textarea id="field_message" name="sender_message" placeholder="How can we pray for you?"></textarea>

<p id="captcha"><b>*To submit your message, please type the words shown below:</b></p>

<div id="captcha">
    <?php
          require_once('recaptchalib.php');
          $publickey = "*****************AzBk";
          echo recaptcha_get_html($publickey);
        ?>
</div>


<input type="submit" name="send_message" value="Submit"> <input type="reset" value="Reset">

</form>

</div>

あなたの助けは大歓迎です。

4

4 に答える 4

1

スタイルシートで次のルールを調整する必要があります。

#captcha {
    float: left; 
    margin: 11px 0 20px 0; 
    width: 445px; 
    height: 110px; 
    padding: 2px 5px 2px 85px;
}

高さを指定する必要はありませんheight: auto。すべて一緒に使用または省略してください。

を省略することもできます。単独paddingで使用すると、十分な制御が可能になります。margin最後に、段落をフロートさせる必要がない場合があります。

于 2013-03-26T02:44:48.287 に答える
0

heightキャプチャCSSの設定のようです。

#captcha {
    float: left;
    margin: 11px 0 20px 0;
    width: 445px;
    height: 110px;
    padding: 2px 5px 2px 85px;
}

110pxの高さ設定を無効にすると、間隔がより適切になります。

于 2013-03-26T02:43:43.703 に答える
0

実際のキャプチャフォームと同じIDを設定したと思いますが、IDを変更する必要があります。

タグに加えて、2つのIDを持つのは良くありません。

これに変更-

<p id="captcha-notice"><b>*To submit your message, please type the words shown below:</b></p>

<div id="captcha">
    <?php
          require_once('recaptchalib.php');
          $publickey = "*****************AzBk";
          echo recaptcha_get_html($publickey);
        ?>
</div>

次に、スタイルを追加します

#captcha-notice{
    /* styles */
}
于 2013-03-26T02:49:20.870 に答える
0

簡単です。このcssコードを変更してください。

#captcha {
    float: left;
    height: 110px;
    margin: 11px 0 20px;
    padding: 2px 5px 2px 85px;
    width: 445px;
}

に

#captcha {
   float: left;
   /*height: 110px;
   margin: 11px 0 20px;*/
   padding: 2px 5px 2px 85px;
   width: 445px;
}
于 2013-03-26T02:53:52.630 に答える