CODEWITHSUNDEEP
htmlcssforms
Adam Ramadhan
Adam Ramadhan

Reputation: 22810

how can we make forms like this with css & html?

enter image description here

now thats a problem :|

Thanks for looking in

Adam Ramadhan

Upvotes: 0

Views: 205

Answers (3)

Aleadam
Aleadam

Reputation: 40391

Well, I used it to learn about forms and CSS :) Thanks @corroded for your comment (there are no more DIVs to be found!) Tested on FF 4b10, it looks pretty darn close. The code below is what I got after several iterations here. I'm sure it can be improved (i.e., better reuse of the css classes) but tht's for the answer 3.0 some time in the far away future ;)

The original code is here: http://jsfiddle.net/vSqR3/19/

and to test the new one: http://jsfiddle.net/vSqR3/62/

<html>
    <head>
        <style type="text/css">
        .noBullets {
            list-style-type: none;
        }
        .containerDiv {
            margin-left:0px;
            border-width:1px;
            border-color:#333;
            border-top-style:none;
            border-right-style:none;
            border-left-style:none;
            border-bottom-style:solid;
            width: 284px;
            height:20px;
        }
        .containerDivNoBorder {
            margin-left:0px;
            border-top-style:none;
            border-right-style:none;
            border-left-style:none;
            border-bottom-style:none;
            width: 284px;
            height:20px;
        }
        .floatingLabel {
            width: 160px;
            height:20px;
            float:left;
            border-style:none;
        }
        .floatingShort {
            border-width:1px;
            border-color:#333;
            border-top-style:none;
            border-right-style:none;
            border-left-style:solid;
            border-bottom-style:none;
            width: 39px;
            height:20px;
            float:left;
        }
        .floatingMedium {
            border-top-style:none;
            border-width:1px;
            border-color:#333;
            border-right-style:none;
            border-left-style:solid;
            border-bottom-style:none;
            width: 80px;
            height:20px;
            float:left;
        }
        .floatingLong {
            border-top-style:none;
            border-width:1px;
            border-color:#333;
            border-right-style:none;
            border-left-style:solid;
            border-bottom-style:none;
            width: 120px;
            height:20px;
            float:left;
         }
        .floatingLongBorder {
            border-top-style:none;
            border-right-style:none;
            border-left-style:solid;
            border-width:1px;
            border-color:#333;
            border-bottom-style:solid;
            width: 120px;
            height:20px;
            float:left;
        }
        </style>
    </head>
    <body>
        <form id="form" name="form" method="post" action="send.html">
            <ul class="noBullets">
             <h3>USER ACCOUNT</h3>
               <li class="containerDiv">
                    <label class="floatingLabel">NAME</label>
                    <input class="floatingLong" type="text" name='name'/>
                </li>
                <li class="containerDiv">
                    <label class=floatingLabel>SURNAME</label>
                    <input class=floatingLong type="text" name='surname'/>
                </li>
                <li class="containerDiv">
                    <label class="floatingLabel">BIRTHDAY</label>
                    <input class="floatingShort" type="text" name='bd_d'/>
                    <input class="floatingShort" type="text" name='bd_m'/>
                    <input class="floatingShort" type="text" name='bd_y'/>
                </li>
                <li class="containerDiv">
                    <label class="floatingLabel">GENDER</label>
                    <input class="floatingShort" type="text" name='gender1'/>
                    <input class="floatingMedium" type="text" name='gender2'/>
                </li>
                <li class="containerDiv">
                    <label class="floatingLabel">USERNAME</label>
                    <input class="floatingLong" type="text" name='username'/>
                </li>
                <li class="containerDivNoBorder">
                    <label class="floatingLabel">E-MAIL</label>
                    <input class="floatingLongBorder" type="text" name='email1'/>
                </li>
                <li class="containerDiv">
                    <label class="floatingLabel">RE-TYPE E-MAIL</label>
                    <input class="floatingLong" type="text" name='email2'/>
                </li>
                <li class="containerDivNoBorder">
                    <label class="floatingLabel">PASSWORD</label>
                    <input class="floatingLongBorder" type="password" name='password1'/>
                </li>
                <li class="containerDiv">
                    <label class="floatingLabel">RE-TYPE PASSWORD</label>
                    <input class="floatingLong" type="password" name='password2'/>
                </li>
                <input type="submit" value="Submit" />
            </ul>
        </form>
    </body>
</html>

Upvotes: 2

corroded
corroded

Reputation: 21564

use uls 

<ul>
  <li>
    <label>Name</label>
    <input type="text">
  </li>
</ul>

then in your css:

label {
  float: left; }

ul li {
  border-bottom: 1px solid #000;
}

input {  
  border: 0
}

a rough sketch but you get the idea

Upvotes: 1

the magnificent
the magnificent

Reputation: 59

Here is a starting guide for you, http://www.w3schools.com/html/html_forms.asp and you can make it more fancier by visiting http://articles.sitepoint.com/article/fancy-form-design-css

I hope that helps.

Upvotes: 2

Related Questions