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

问题

now thats a problem :|

Thanks for looking in

Adam Ramadhan

回答1:

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>

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/5482281/how-can-we-make-forms-like-this-with-css-html

标签

html

css

forms