html - 如何将 DIV 变成表单元素？

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="指定相同的框模型提交” 输入(来源:CSS: Submit button looks smaller than text input and textarea)

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

这是更新后的 fiddle :http://jsfiddle.net/7w1adgko/4/