HTML-макет формы с помощью CSS - PullRequest
Новая
       14

HTML-макет формы с помощью CSS

15 голосов
/ 10 апреля 2009

Мне нужно создать форму для ввода данных, скажем, FirstName и LastName. Я знаю, как это сделать со столом. В первом <td> я бы поместил тег label, а во втором я бы использовал тег ввода с атрибутом type="text" Таким образом, метки и текстовые поля будут выстроены в две колонки.

Есть ли способ сделать это с помощью CSS?

Ответы [ 4 ]

13 голосов
/ 10 апреля 2009
8 голосов
/ 11 апреля 2009

Вам НЕ нужны таблицы для создания отличных HTML-форм. На самом деле, вы не хотите их! Попробуйте этот код дома и посмотрите, что вы думаете .. 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>

<LINK href="main2.css" type="text/css" rel="stylesheet">

<!--[if IE]>
<style>
    fieldset.nested 
    {
        position: relative;
        margin-top: 15px;        
    }

    fieldset.nested legend 
    {
        position: absolute; top: -8px; left: 1em;
    }
</style>
<![endif]-->

</head>

<body>

<div>    
    <form>

    <fieldset class="main">
        <legend>Contact info</legend>

        <fieldset class="nested">
            <legend>Name</legend>    
            <ol>
                <li>
                    <label for="textboxName">Name</label>
                    <input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxName" >Title</label>
                    <input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxCompany">Company</label>
                    <input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
                </li>
            </ol>
        </fieldset>        

        <fieldset class="nested">
            <legend>Address</legend>    
            <ol>
                <li>
                    <label for="textboxAddress1" >Street address</label>
                    <input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxAddress2" >Street address</label> 
                    <input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxCity" >City</label>
                    <input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxRegion" >City/Region</label>
                    <input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxPostalCode" >Postal code</label>
                    <input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
                </li>
                <li>
                    <label for="textboxCountry" >Country</label>
                    <input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
                </li>
            </ol>
        </fieldset>        

        <fieldset class="nested">
            <legend>Phone numbers</legend>
            <ol>
                <li style="display:none">
                    <label for="textboxName" >Name</label>
                    <input id="text1" name="textboxName" type="text" style="width: 15em;"/>
                </li>
                <li style="display:none">
                    <label for="textboxAddress1" >Address</label>
                    <input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
                </li>
                <li>
                    <label for="textboxAddress2" >Phone</label> 
                    <input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
                </li>
            </ol>    
        </fieldset>        

        <div class="buttonsContainer">
            <input class="button" type="submit" value="OK" /> 
            <input class="button" type="button" value="Cancel" /> 
        </div>

    </fieldset>

    </form>
</div>    


</body>

</html>

CSS: 

body 
{   
    margin: 0;
    padding: 0; 
    font-family: Verdana, Tahoma, Arial, sans-serif;
}

fieldset.main 
{  
    margin: 1.5em 0 0 1.5em;  
    padding: 1em 0 0 0;
    width: 400px;
    font-size: .9em;    
}

fieldset.main legend
{  
    margin-left: 1em;  
    color: #000000;  
    font-weight: bold;    
}

fieldset.main ol 
{  
    padding: 1em 1em 0 1em;  
    list-style: none;
}

fieldset.main li 
{  
    padding-bottom: .5em;
}

fieldset.main ol li label 
{  
    float: left;
    width: 10em;        
    margin-right: 1em;
}

/* ----------------------------------------- */

fieldset.nested 
{  
    margin: 0 0 1em 1em;  
    padding: 0;
    width: 93%;
    font-size: .8em;
    border: 1px solid gray;
    background: #B0C4DE;    

}

fieldset.nested legend
{  
    margin-left: 1em;      
    font-weight: normal;
    font-size: .9em; 
    color: black;
    background-color: white;
    padding: 0 1em 0 1em;
    border: 1px solid black;
}

fieldset.nested ol 
{  
    padding: 0 1em 0 1em;  
    list-style: none;
}

fieldset.nested li 
{  
    /* Control leading between rows. */
    padding-bottom: .7em;
}

fieldset.nested ol li label 
{  
    float: left;
    width: 10em;        
    margin-right: 1em;
}

/* ----------------------------------------- */

input.button
{                                  
    /* border-style: none; */
    width: 6em;
    height: 2.5em;
}

div.buttonsContainer
{
    float: right;
    margin: 1em 1em 1em 0;
}
1 голос
/ 10 апреля 2009

CSS будет работать нормально - если вы в порядке с введением ширины в пикселях для вещей, но, к сожалению, не получается, когда вам нужно локализовать строки и обнаружить, что метки не подходят. Для формы ввода адреса я бы придерживался таблиц, так как они выполняют все необходимые операции изменения размера и обтекания и работают без проблем практически в каждом браузере.

РЕДАКТИРОВАТЬ : Мне интересно, проверил ли кто-нибудь из избирателей-избирателей расположение этих S.O. страниц

0 голосов
/ 11 апреля 2009

Действительно хороший способ сделать это самостоятельно - установить firebug на firefox и проверить элементы на веб-сайтах, которые действительно хорошо это реализуют.

В регистрационных формах есть сокрушительный маагзин . Можно увидеть несколько подходов в CSS, с некоторыми действительно хорошими примерами.

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

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

...