Как мы можем создавать такие формы с помощью CSS и HTML? - PullRequest
Новая
       3

Как мы можем создавать такие формы с помощью CSS и HTML?

0 голосов
/ 30 марта 2011

enter image description here

Теперь это проблема: |

Спасибо, что заглянули в

Адам Рамадан

Ответы [ 3 ]

2 голосов
/ 30 марта 2011

Ну, я использовал это, чтобы узнать о формах и CSS :) Спасибо @corroded за ваш комментарий (больше нет DIV, которые можно найти!) Протестировано на FF 4b10, выглядит чертовски близко. Код ниже - то, что я получил после нескольких итераций здесь. Я уверен, что это может быть улучшено (то есть, лучше повторное использование классов CSS), но это для ответа 3.0 когда-нибудь в далеком будущем;)

Оригинальный код здесь: http://jsfiddle.net/vSqR3/19/

и протестировать новый: 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 голосов
/ 30 марта 2011

Вот вам стартовое руководство, http://www.w3schools.com/html/html_forms.asp, и вы можете сделать его еще интереснее, посетив http://articles.sitepoint.com/article/fancy-form-design-css

Надеюсь, это поможет.

1 голос
/ 30 марта 2011

используйте ULS 

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

, затем в вашем CSS: 

label {
  float: left; }

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

input {  
  border: 0
}

грубый набросок, но вы получите идею

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...