Настройка контактной формы Insightly HTML (выровненные, разнесенные поля)

Question

Заранее извиняюсь, у меня ОЧЕНЬ скромный опыт программирования и я пытаюсь разобраться с HTML...

Применяя некоторый основной код для контактной формы от Insightly (ниже / в приложении), я пытаюсь включить то, что обсуждалось здесь

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

Заранее благодарю за любую помощь!

[РЕДАКТИРОВАТЬ 1]

Большое спасибо, теперь мне удалось сделать его более или менее подходящим с небольшим количеством CSS (прилагается). К сожалению, я не могу заставить его вести себя так, как нужно, хотя, он подчиняется проницательному штрафу, но не очищает поля при отправке , и я не нашел работающего метода для подтверждения того, что он был отправлен, кроме особо ужасное окно предупреждения (особенно в chrome). Любая помощь по "сбросу при отправке" и способу сообщить пользователю, что оно было отправлено, было бы здорово! Я попробовал немного CSS здесь, но безрезультатно...

      <style type="text/css">
/*************CHSE Stylesheet ***/
body { 
    background-color: transparent;
height:360px;
width:280px;
}
textarea {
    height:70px;
    width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>  

Answer 1

Ключ к привлекательным макетам - DIVs и CSS.

Сначала используйте DIV для группировки различных областей ввода и для разделения каждой области на левую / правую (с помощью float).

Например, вы можете захотеть, чтобы метка и поля ввода были хорошо выровнены:

.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}

<form>
  <div class="frmGroup">
    <div class="frmLeft"><label for="fn">First Name:</label></div>
    <div class="frmRight"><input id="fn" type="text" /></div>
  </div>
  <div class="frmGroup">
    <div class="frmLeft">Last Name:</div>
    <div class="frmRight"><input type="text" /></div>
  </div>
  <div id="thisone">
    <textarea cols="50" rows="5"></textarea>
  </div>
</form>

float Инструкция особенно полезна, так как позволяет выровнять DIV рядом друг с другом. Тем не мение! Он также удаляет DIV из HTML-потока, что означает, что они занимают нулевое вертикальное пространство. Чтобы противостоять этому, добавьте overflow:____ к родителю DIV. В примере я использовал overflow:hidden ]. В jsFiddle внизу экспериментируйте, удалив / добавив эту строку.

Вы также можете присвоить ID конкретному DIV и присвоить ему стиль, чтобы иметь отступ или отступ выше / ниже / влево / вправо.

DIV имеют дополнительное преимущество block элементы, который имеет тот же эффект, что и добавление <br> к концу.

* Также обратите внимание, что <label> тег действительно полезен только для кнопок, флажков и т. д., поскольку он позволяет пользователю нажимать кнопку / флажок, также щелкая текстовую метку.

Вот jsFiddle вышеприведенной демонстрации, с которой вы можете поэкспериментировать.