Question

我正在尝试创建一个html表单，我必须复制以下图像：

enter image description here

我几乎所有事情都做得很好，但我无法正确定位，特别是在提交按钮上。这样做最好的是什么？以及如何重新定位文本框旁边的“消息”标题？

<style type="text/css"> 
    form {
        background-color: gray;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 20px;
        width: 400px;
        text-align:right;
    }

    #formElements{
        width: 60%;
    }   
</style>


<body>
    <form>
        <div>
            Name: <input type="text" name="name" id="formElements">
            <p>
            Email: <input type="email" name="email" id="formElements">
            <p>
            Message: <textarea name="message" id="formElements"> </textarea>
            <p>
            <input type="submit" id="button" value="send your message">
        </div>
    </form>
</body>

Answer 1

这里有一些问题：

1。破碎的HTML

您有几个HTML被破坏的地方。请务必关闭<p>代码，然后关闭<input>代码并使用软关闭/>进行良好练习。

2。永远不要使用ID代替类

ID只能分配给一个元素。它们是独一无二的。如果要为多个元素分配一些CSS，请使用类：

.class
//Not
#id

3。将标签用于表单中的文本

您不仅可以单独设置它们的样式，还可以使用for属性将它们链接到您的输入。

4。修复CSS

我使用了一些不同的CSS技巧，例如按钮的块式显示，让我可以将它放在正确的位置。

form {
    background-color: gray;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    width: 400px;
    text-align:right;
}
.formElements {
    width: 300px;
}
label {
    display: inline-block;
    vertical-align: top;
}
input[type="submit"] {
    display: block;
    margin-left: 95px;
}

5。修复HTML

在这里。始终总是写出正确的HTML。它会为你带来一些麻烦。

<form>
    <div>
        <label>Name:</label>
        <input type="text" name="name" class="formElements" />
        <p>
            <label>Email:</label>
            <input type="email" name="email" class="formElements" />
        </p>
        <p>
            <label>Message:</label>
            <textarea name="message" class="formElements" rows="4"></textarea>
        </p>
        <p>
            <input type="submit" id="button" value="send your message" />
        </p>
    </div>
</form>

这是一个JSFiddle，演示了您的表格。

我希望这会有所帮助。

Answer 2

看看this。

您的代码中应该考虑以下几点：

不在页面中多次使用ID，它必须特定于1个元素。而是使用类来一次设置多个元素的样式。
使用label标记来解释表单元素
打开后，请不要忘记关闭p之类的容器标记。

Answer 3

我几乎把它放在两列表中，左边是文本，右边是文本框和按钮。

我应该看起来像这样

    <style type="text/css"> 
        form {
            background-color: gray;
            -moz-border-radius: 10px;
            border-radius: 10px;
            padding: 20px;
            width: 400px;
            text-align:right;
        }

        #formElements{
            width: 100%;
        }
        .right {
         text-align:right;
    }
        .wide {
        width:300px;
    }   
    </style>


    <body>
        <form>
            <div>
        <table>
        <tr>
                <td class="right">Name:</td>
 <td class="wide"><input class = "wide" type="text" name="name" id="formElements"></td>
            </tr> <tr>
            <td class="right">Email:</td>
<td class="wide"> <input  class="wide" type="email" name="email" id="formElements"></td>
           </tr> <tr>   
         <td class="right">Message:</td>
<td class="wide"> <textarea   class="wide" name="message" id="formElements"> </textarea></td>
              </tr> <tr> 
        <td></td><td class="wide"><input type="submit" id="button" value="send your message"></td>
            </tr>
        </div>
        </form>
    </body>

html表单css定位

3 个答案:

1。破碎的HTML

2。永远不要使用ID代替类

3。将标签用于表单中的文本

4。修复CSS

5。修复HTML