Заголовок в форме

Нужно над каждой формой сделать соответствующий заголовок: фамилия, имя итд. Но не получается сделать это НАД формой. Подскажите пожалуйста
9 ответов

Покажи код который сейчас у тебя, и где не получается.


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Японские сладости Washoku</title>
    <link rel="stylesheet" type="text/css" href="new 1.css" />
    <style>
   .fig {
    display: block; 
    text-align: center; 
    margin-top: 100px; 
    margin-bottom: 10px; 
   }
     .cite { 
    text-align: center;
    font-size: 0.9em;
    color: #5e5e5b
    }
    
    .circle {
    width:40px;
 height:40px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px;
 color:#fff;
 line-height:0px;
 text-align:center;
 background:#a00cb5;
 position:absolute;
 top: 190px;
 left: 170px;
}
    .circle2 {
    width:40px;
 height:40px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px;
 color:#fff;
 line-height:0px;
 text-align:center;
 background:#a00cb5;
 position:absolute;
 top: 390px;
 left: 170px;
}
.fmorm {
position: absolute;
left: 170px;
}
.contact_form input {
    height:25px;
    width:130px;
    padding:5px 8px;
}
.contact_form2 input {
    height:25px;
    width:435px;
    padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}
.contact_form input, .contact_form textarea {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
}
.calc{
    width:450px;
    height:550px;
    background:#f4d3ff;
    border:2px dotted #AFAFAF;
    position:absolute;
    top:-300px;
    left:600px;
    text-align: center;
    font-size: 0.9em;
    color: #5e5e5b
    
}
.one-box {
    display: flex;
    justify-content: center;
    font-weight: 200;
}
.one-box .price, .one-box .period, .one-box .save-price {
    text-align: left;
    padding: 0 0 6px 55px;
    width: 134px;
}
* {
    box-sizing: border-box;
}
 
 
  </style>
</head>
 <body bgcolor="#fcefff" onload="slider('slider',0)">
<header>
  <div class="container">
    <div class="logo-box">
      <a href="new 1.html">
        <img src="лого.png">
      </a>
    </div>
    <nav>
    <ul>
      <li><a href="">Как это работает</a></li>
      <li><a href="">Пример посылок</a></li>
      <li><a href="">Вопросы и ответы</a></li>
      <li><a href="заказ.html">Заказать</a></li>
    </ul>
    </nav>
   </div>
</header>
<div class="circle">
<p>1</p>
</div>
<p style="color:sienna; margin-left:230px; margin-top:80px; font-family: 'Inpact';  font-size: 30px;font-weight:bolder">Данные получателя:</P>
<div class="fmorm">
<form class="contact_form" action="" method="post" name="contact_form">
    <input name="name" placeholder="Укажите вашу фамилию" class="fam" required />
    <input name="emailaddress" placeholder="Укажите ваше имя" class="name" type="email" required />
    <input name="email" placeholder="Укажите ваше Отчество" class="otch" type="em" required /><br><br>
     <input type="date" name="calendar" value=""
    max="2015-06-04" min="1950-05-29">
    </div>
</form>
<div class="circle2">
<p>2</p>
</div>
<p style="color:sienna; margin-left:230px; margin-top:170px; font-family: 'Inpact';  font-size: 30px;font-weight:bolder">Адрес получателя:</P>
<div class="fmorm">
<form class="contact_form" action="" method="post" name="contact_form">
    <input name="str" placeholder="Укажите вашу страну" class="famd" required />
    <input name="emailaddr" placeholder="Укажите ваш город" class="nae" type="emal" required />
    <input name="emailaddrs" placeholder="Укажите ваш индекс" class="oth" type="edm" required /><br><br>
    </form>
<form class="contact_form2" action="" method="post" name="contact_form">
    <input name="emaildrs" placeholder="Укажите ваш адрес" class="othd" type="eddm" required /><br><br>
    </form>
    <form class="contact_form" action="" method="post" name="contact_form">
    <input name="sctr" placeholder="Укажите ваш номер дома" class="famd" required />
    <input name="emailadddr" placeholder="Укажите вашу квартиру" class="nage" type="emahl" required />
    <input name="emaigddrs" placeholder="Укажите ваш корпус" class="ojth" type="eddm" required /><br><br>
    <input name="emaidgddrs" placeholder="Укажите ваш телефон" class="otgh" type="ejm" required />
  <div class="calc">
   <h2>Оплата</h2>
   <div class="one-box">
          <div class="info">Цена одной  посылки</div>
          <!-- <div class="price">990 руб</div> -->
          <div class="price">990 руб</div>
        </div>
    <div class="one-box">
          <div class="info">Срок подписки</div>
          <div class="period">
            1 месяца</div>
        </div>
        <div class="one-box">
          <div class="info">Доставка</div>
          <div class="period" id="dostavka">
            БЕСПЛАТНАЯ</div>
        </div>
</div>  
</body>
</html>
я уже убрала все, что пыталась уже сделать с заголовками(не знаю, как правильно назвать) как я поняла, нужно делать через списки, но чет ничего не выходит


у вас порядок закрывающих тэгов просто не правильный...
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Японские сладости Washoku</title>
    <link rel="stylesheet" type="text/css" href="new 1.css" />
    <style>
        .fig {
            display: block; 
            text-align: center; 
            margin-top: 100px; 
            margin-bottom: 10px; 
        }
        .cite { 
            text-align: center;
            font-size: 0.9em;
            color: #5e5e5b
        }
        .circle {
            width:40px;
            height:40px;
            display:block;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            -khtml-border-radius:50px;
            font-size:20px;
            color:#fff;
            line-height:0px;
            text-align:center;
            background:#a00cb5;
            position:absolute;
            top: 190px;
            left: 170px;
        }
        .circle2 {
            width:40px;
            height:40px;
            display:block;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            -khtml-border-radius:50px;
            font-size:20px;
            color:#fff;
            line-height:0px;
            text-align:center;
            background:#a00cb5;
            position:absolute;
            top: 390px;
            left: 170px;
        }
        .fmorm {
            position: absolute;
            left: 170px;
        }
        .contact_form input {
            height:25px;
            width:130px;
            padding:5px 8px;
        }
        .contact_form2 input {
            height:25px;
            width:435px;
            padding:5px 8px;
        }
        .contact_form textarea {padding:8px; width:300px;}
        .contact_form button {margin-left:156px;}
        .contact_form input, .contact_form textarea {
            border:1px solid #aaa;
            box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
            border-radius:2px;
        }
        .contact_form input:focus, .contact_form textarea:focus {
            background: #fff;
            border:1px solid #555;
            box-shadow: 0 0 3px #aaa;
        }
        .calc{
            width:450px;
            height:550px;
            background:#f4d3ff;
            border:2px dotted #AFAFAF;
            position:absolute;
            top:-300px;
            left:600px;
            text-align: center;
            font-size: 0.9em;
            color: #5e5e5b
        }
        .one-box {
            display: flex;
            justify-content: center;
            font-weight: 200;
        }
        .one-box .price, .one-box .period, .one-box .save-price {
            text-align: left;
            padding: 0 0 6px 55px;
            width: 134px;
        }
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body bgcolor="#fcefff" onload="slider('slider',0)">
    <header>
        <div class="container">
            <div class="logo-box">
                <a href="new 1.html">
                    <img src="лого.png">
                </a>
            </div>
            <nav>
                <ul>
                    <li><a href="">Как это работает</a></li>
                    <li><a href="">Пример посылок</a></li>
                    <li><a href="">Вопросы и ответы</a></li>
                    <li><a href="заказ.html">Заказать</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="circle">
        <p>1</p>
    </div>
    <p style="color:sienna; margin-left:230px; margin-top:80px; font-family: 'Inpact';  font-size: 30px;font-weight:bolder">Данные получателя:</p>
    <div class="fmorm">
        <form class="contact_form" action="" method="post" name="contact_form">
            <input name="name" placeholder="Укажите вашу фамилию" class="fam" required />
            <input name="emailaddress" placeholder="Укажите ваше имя" class="name" type="email" required />
            <input name="email" placeholder="Укажите ваше Отчество" class="otch" type="em" required /><br><br>
            <input type="date" name="calendar" value=""
            max="2015-06-04" min="1950-05-29">
        </form>
    </div>
    <div class="circle2">
        <p>2</p>
    </div>
    <p style="color:sienna; margin-left:230px; margin-top:170px; font-family: 'Inpact';  font-size: 30px;font-weight:bolder">Адрес получателя:</p>
    <div class="fmorm">
        <form class="contact_form" action="" method="post" name="contact_form">
            <input name="str" placeholder="Укажите вашу страну" class="famd" required />
            <input name="emailaddr" placeholder="Укажите ваш город" class="nae" type="emal" required />
            <input name="emailaddrs" placeholder="Укажите ваш индекс" class="oth" type="edm" required /><br><br>
        </form>
        <form class="contact_form2" action="" method="post" name="contact_form">
            <input name="emaildrs" placeholder="Укажите ваш адрес" class="othd" type="eddm" required /><br><br>
        </form>
        <form class="contact_form" action="" method="post" name="contact_form">
            <input name="sctr" placeholder="Укажите ваш номер дома" class="famd" required />
            <input name="emailadddr" placeholder="Укажите вашу квартиру" class="nage" type="emahl" required />
            <input name="emaigddrs" placeholder="Укажите ваш корпус" class="ojth" type="eddm" required /><br><br>
            <input name="emaidgddrs" placeholder="Укажите ваш телефон" class="otgh" type="ejm" required />
        </form>
    </div>
    <div class="calc">
        <h2>Оплата</h2>
        <div class="one-box">
            <div class="info">Цена одной  посылки</div>
            <!-- <div class="price">990 руб</div> -->
            <div class="price">990 руб</div>
        </div>
        <div class="one-box">
            <div class="info">Срок подписки</div>
            <div class="period">1 месяца</div>
        </div>
        <div class="one-box">
            <div class="info">Доставка</div>
            <div class="period" id="dostavka">БЕСПЛАТНАЯ</div>
        </div>
    </div>
</body>
</html>


Спасибо, но проблемы это не решило. Я так и не поняла, как сделать соответствующие подзаголовки(фамилия, имя итд) над каждой формой


не совсем понимаю вас, приложите картинку, как это должно выглядеть (набросок в пэинте сойдет)


тип того


добавить новые элементы непонятно зачем использовать абсолютное позиционирование и тем образом что вы сделали
        <form class="contact_form" action="" method="post" name="contact_form">
            <span>Фамилия</span>
            <span>Имя</span>
            <span>Отчество</span><br>
            <input name="name" placeholder="Укажите вашу фамилию" class="fam" required />
            <input name="emailaddress" placeholder="Укажите ваше имя" class="name" type="email" required />
            <input name="email" placeholder="Укажите ваше Отчество" class="otch" type="em" required /><br><br>
            <p>Ваш день рождения</p>
            <input type="date" name="calendar" value=""
            max="2015-06-04" min="1950-05-29">
        </form>
.contact_form span {
    width: 130px;
    display: inline-block;
    padding-left: 2px;
}


я попробую я впервые делаю сайт, поэтому многого не знаю у меня часто возникают проблемы с положением элементов. а кроме как исправлять это абсолютным позиционированием способа не знаю


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    label input{
      display:block;
    }
  </style>
</head>
<body>
  <label>Название поля:<input type="text" /></label>
</body>
</html>