How to turn a DIV into a form element? - html

Question

I'm new to world of forms! I had made divs and css for the exact layout I want for the forms. Is there anyway to maybe just turn that div tag into button or a text field while still using the same css rules so the layout doesn't change?
Here is some code and demo to just check what I have going on.
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

Sure you can, just replace the right elements with input with proper markup, add an opening and closing form tag, remove the borders, and you're good to go:
<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
}
Here is your updated demo: http://jsfiddle.net/7w1adgko/2/
EDIT: Note that you may want to fill out the value property of the submit buttons so that users will actually know it's the submit button.
<input id="loginSubmit" type="submit" name="loginSubmit" value="Login" />
or...
<input id="registerSubmit" type="submit" name="registerSubmit" value="Register" />
Also, in order users to know what field is what, you may want to use the placeholder property.
<input id="loginUsername" type="text" name="loginUsername" placeholder="Username" />
<input id="loginPassword" type="text" name="loginPassword" placeholder="Password" />
or...
<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" />
And to make it prettier, you could add some colour and padding to the inputs.
#loginContainer input {
border:0;
padding: 0 10px;
color:white
}
Here is your most recent fiddle with these changes: http://jsfiddle.net/7w1adgko/3/
EDIT 2: To make all the boxes have the same width, you could specify the same box model for type="text" and type="submit" inputs (source: 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;
}
Here is the updated fiddle: http://jsfiddle.net/7w1adgko/4/

Answer 2

It would be better to start from the proper functional markup and then consider styling. For the functionality of a form, you need elements like input to set up the controls, label to have labels (captions) associated with controls, and form to contain the entire form. (And you probably should not have two forms side by side, it can be confusing.)
However, if you have designed a layout in a “DIVistic” way and you wish to turn it to a functional form element with working controls, you need to take into account that form-related elements have default rendering that you may need to override. A form element has top and bottom margin by default, label elements are inline elements (display: inline) as opposite to div elements that are blocks (display: block), and input elements are inline blocks that have borders and padding.
On the other hand, most (if not all) of your div elements are just containers, instead of being direct counterparts to controls. For example, the element <div id="loginUsername"></div> really needs some content, such as
<div id="loginUsername"><label for="uname">User name:</label>
<input id="uname" name="uname" required size="8" maxlength="8"></div>
Assuming that the content fits inside the div element as formatted in your current design, no change in the layout styling is then needed. (However, from the jsfiddle, it seems that you intend to use form controls without any labels. This would be a major usability and accessibility problem, and fixing it probably requires a redesign of the layout.)