Question

我对形式世界不熟悉！我已经为表格所需的确切布局制作了div和css。无论如何可能只是将div标签转换为按钮或文本字段，同时仍然使用相同的css规则，因此布局不会改变？

这是一些代码和演示，只是检查我发生了什么。

HTML

<div id="loginContainer">
    <div id="loginForm">
        <div id="login"></div>
        <div id="loginUsername"></div>
        <div id="loginPassword"></div>
        <div id="loginSubmit"></div>
    </div>
    <div id="registerForm">
        <div id="register"></div>
        <div id="registerName"></div>
        <div id="registerEmail"></div>
        <div id="registerPassword"></div>
        <div id="registerPasswordConfirm"></div>
        <div id="registerSubmit"></div>
    </div>
</div>

CSS

#loginContainer {
    width: 50%;
    height: 50%;
    position: absolute;
    left: 21.8%;
    top: 40%;
    z-index:-9999;
}
#loginForm {
    width:47.5%;
    height: 100%;
    float:left;
    top: 0%;
    position:relative;
}
#login {
    width: 100%;
    height: 10%;
    top: 0;
    background-image:url(../_images/_login/login.png);
    background-size: 100% 100%;
    position: absolute;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#loginUsername {
    width: 100%;
    height: 10%;
    top: 15%;
    background-color: #383d3f;
    position: absolute;
    border-radius: 5px;
}
#loginPassword {
    width: 100%;
    height: 10%;
    top:30%;
    background-color:#383d3f;
    position:absolute;
    border-radius: 5px;
}
#loginSubmit {
    width: 100%;
    height: 10%;
    top: 45%;
    background-color:#76c2bb;
    position:absolute;
    border-radius: 5px;
}
#registerForm {
    width:47.5%;
    height: 100%;
    float:right;
    top: 0%;
    position:relative;  
}
#register {
    width: 100%;
    height: 10%;
    top:0%;
    background-image:url(../_images/_register/register.png);
    background-size: 100% 100%;
    position:absolute;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#registerName {
    width: 100%;
    height: 10%;
    top:15%;
    background-color:#383d3f;
    position:absolute;
    border-radius: 5px;
}
#registerEmail {
    width: 100%;
    height: 10%;
    top: 30%;
    background-color:#383d3f;
    position:absolute;
    border-radius: 5px;
}
#registerPassword {
    width: 100%;
    height: 10%;
    top: 45%;
    background-color:#383d3f;
    position:absolute;
    border-radius: 5px;
}
#registerPasswordConfirm {
    width: 100%;
    height: 10%;
    top: 60%;
    background-color:#383d3f;
    position:absolute;
    border-radius: 5px;
}
#registerSubmit {
    width: 100%;
    height: 10%;
    top: 75%;
    background-color:#76c2bb;
    position:absolute;
    border-radius: 5px;
}

CLICK FOR DEMO

Answer 1

当然可以，只需用正确的标记替换input的正确元素，添加一个开始和结束的表单标签，删除边框，然后你就可以了：

<div id="loginContainer">
    <div id="loginForm">
        <div id="login"></div>
        <form method="post" name="loginForm">
            <input id="loginUsername" type="text" name="loginUsername" />
            <input id="loginPassword" type="text" name="loginPassword" />
            <input id="loginSubmit" type="submit" name="loginSubmit" value="" />
        </form>
    </div>
    <div id="registerForm">
        <div id="register"></div>
        <form method="post" name="loginForm">
            <input id="registerName" type="text" name="registerName" />
            <input id="registerEmail" type="text" name="registerEmail" />
            <input id="registerPassword" type="text" name="registerPassword" />
            <input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" />
            <input id="registerSubmit" type="submit" name="registerSubmit" value="" />
        </form>
    </div>
</div>

#loginContainer input {
    border:0
}

以下是您的最新演示：http://jsfiddle.net/7w1adgko/2/

编辑：请注意，您可能需要填写提交按钮的value属性，以便用户真正知道它是提交按钮。

<input id="loginSubmit" type="submit" name="loginSubmit" value="Login" />

...或

<input id="registerSubmit" type="submit" name="registerSubmit" value="Register" />

此外，为了让用户知道哪个字段是什么，您可能希望使用placeholder属性。

<input id="loginUsername" type="text" name="loginUsername" placeholder="Username" />
<input id="loginPassword" type="text" name="loginPassword" placeholder="Password" />

...或

<input id="registerName" type="text" name="registerName" placeholder="Name" />
<input id="registerEmail" type="text" name="registerEmail" placeholder="Email" />
<input id="registerPassword" type="text" name="registerPassword" placeholder="Password" />
<input id="registerPasswordConfirm" type="text" name="registerPasswordConfirm" placeholder="Confirm Password" />

为了让它更漂亮，你可以为输入添加一些颜色和填充。

#loginContainer input {
    border:0;
    padding: 0 10px;
    color:white
}

以下是您最近对这些更改的提示：http://jsfiddle.net/7w1adgko/3/

编辑2 ：要使所有框具有相同的宽度，您可以为type="text"和type="submit"输入指定相同的框模型（来源：{{3} }）

#loginContainer input {
    border:0;
    padding: 0 10px;
    color:white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

这是更新的小提琴：CSS: Submit button looks smaller than text input and textarea

Answer 2

最好从正确的功能标记开始，然后考虑样式。对于表单的功能，您需要input等元素来设置控件，label以使标签（标题）与控件相关联，form包含整个表单。（你可能不应该有两种形式并排，这可能会令人困惑。）

但是，如果您以“DIVistic”方式设计了布局，并且希望将其转换为具有工作控件的功能form元素，则需要考虑与窗体相关的元素具有默认渲染您可能需要覆盖。 form元素默认具有上边距和下边距，label元素是内联元素（display: inline），与作为块的div元素相反（display: block），input元素是具有边框和填充的内联块。

另一方面，大多数（如果不是全部）div元素只是容器，而不是控件的直接对应元素。例如，元素<div id="loginUsername"></div>确实需要一些内容，例如

<div id="loginUsername"><label for="uname">User name:</label>
<input id="uname" name="uname" required size="8" maxlength="8"></div>

假设内容符合当前设计中格式化的div元素内部，则无需更改布局样式。（但是，从jsfiddle，似乎你打算使用没有任何标签的表单控件。这将是一个主要的可用性和可访问性问题，修复它可能需要重新设计布局。）

如何将DIV转换为表单元素？

2 个答案: