xhtml需要联系表单字段?

时间:2011-11-14 10:45:54

标签: javascript jquery html xhtml contact-form

我在联系页面上有HTML表单字段,然后将数据发送到php页面。

我想制作所需的表单字段,如果用户没有输入值,则在标签旁边显示红色(*)。

我该怎么做?

<form id="contact_form" method="post" action="contact.php">

    <p style="margin-top:20px">
        <label for="title">Title</label><br/>
        <input id="your_name" name="your_name" type="text" style="width:94%"/>
    </p>

    <p style="margin-top:20px">
        <label for="initial">Initial</label><br/>
        <input id="initial" name="initial" type="text" style="width:94%"/>
    </p>
    <p style="margin-top:20px">
        <label for="surname">Surname</label><br/>
        <input id="surname" name="surname" type="text" style="width:94%"/>
    </p>
        <p style="margin-top:20px">
        <label for="tel_number">Tel number</label><br/>
        <input id="tel_number" name="tel_number" type="text" style="width:94%"/>
    </p>
    <p style="margin-top:20px">
        <label for="email">Email</label><br/>
        <input id="email" name="email" type="text" style="width:94%"/>
    </p>

    <p style="margin-top:20px">
        <label for="enquiry">Enquiry</label><br/>
        <textarea id="enquiry" name="enquiry" rows="7" cols="10" style="width:94%"></textarea>
    </p>

    <p style="margin-top:50px">
        <input type="submit" value="Send Message"/><br/>
    </p>

</form>

1 个答案:

答案 0 :(得分:0)

您必须将表单放在php文件中(或.phtml推荐*)。添加像.input-error这样的css类。

.input-error { color: red; }

在您的表单中,您需要为每个字段提供类似的内容:

if (empty($postData['field']) {
    echo "<span class=\"input-error\">*</span>";
}

举一个明确的例子:

<p style="margin-top:20px">
    <?php if (empty($postData['your_name']): ?>
        <span class="input-error">*</span>
    <?php endif; ?>
    <label for="title">Title</label><br/>
    <input id="your_name" name="your_name" type="text" style="width:94%"/>
</p>

表单必须提交到一个php文件,该文件将处理表单并将您带回此页面。在该文件中,您需要这样一行:

$postData = $_POST;

或者,如果该脚本重定向到另一个页面,那么您需要将后期数据存储在会话中。像:

$_SESSION['postData'] = $_POST;

在这种情况下,在表单顶部或控制器中的某个位置(如果有),检索这样的数据:

$postData = $_SESSION['postData'];