0

我想为我的网站制作联系表格。我想在不使用桌子的情况下做到这一点。我怎么做？我在看 div 标签，因为我想用 CSS 来设置它的样式。我想给它一个长度和宽度。我想把它放在一个主 div 标签中，但我不确定我是怎么做的。请帮我。我该怎么做？

4

2 回答 2

0

我用过类似的东西-

<form id="contact-form" name="contact-form" action="/contact-us" method="post">
    <div class="form-col">
        <input type="text" name="Requester.FirstName" class="styled" placeholder="First Name">
        <input type="text" name="Requester.LastName" class="styled" placeholder="Last Name">
        <div class="selector fixedWidth">
           <span>Subject</span>
           <select name="Subject" class="styled">
            <option value="">Subject</option>
            <option value="custserv">Customer Service</option>
            <option value="vendor">Vendor</option>
            <option value="other">Other</option>
            </select>
        </div>
        <textarea name="message" class="styled"></textarea>
    </div>
    <div class="form-col">
        <input type="text" name="Requester.ContactInfo.Email" class="styled" placeholder="Email Address">
        <input type="text" name="Requester.ContactInfo.Phone" class="styled" placeholder="Phone Number">

        <span class="question">How do you prefer to be contacted?</span>
        <label for="contact-method-phone">
            <div class="radio" id="uniform-contact-method-phone"><span><input type="radio" name="ContactMethod" id="contact-method-phone" value="HomePhone" class="styled"></span></div>Phone
        </label>
        <label for="contact-method-email">
            <div class="radio" id="uniform-contact-method-phone"><span><input type="radio" name="ContactMethod" id="contact-method-phone" value="Email" class="styled"></span></div>Email
        </label>
        <input type="text" name="Address.StreetAddress1" class="styled" placeholder="Address">
        <input type="text" name="Address.StreetAddress1" class="styled">
        <input type="submit" value="CONTACT US" class="m-form-button" name="CONTACT US">
    </div>
</form>

我尝试在造型时遵循SMACSS

于 2013-10-04T04:17:57.190 回答
0

尝试在 Google 上搜索：“联系表单 CSS”。

您将获得如此多的示例代码，您将迷失方向：D

看看这两个。

css-tricks.com

net.tutsplus.com

希望这可以帮助

于 2013-10-04T04:06:20.190 回答