0

Сделал форму ввода логина и пароля

print <<<HEREDOC
<form enctype='multipart/form-data' action='' method='POST' style='text-align:center'>

<p'>Логин<br />
<input type='text' name='login'>
</p>

<p>Пароль<br />
<input type='password' name='password'>
</p>

<p><input type='submit' name='button' value='Сохранить' style='width:223px; background:#5D80F9; color:white; padding: 7px'></p></form></div></div>
    HEREDOC;

Пикча формы:
nGrC9.png

Как мне сделать, что бы надписи "логин" и "пароль" были левее, а не в центре, т.е. так:
4rf4J.png

4 ответа 4

2

Правильнее будет в данном случае оборачивать не в параграф, а в label:

<label>Пароль<br />
<input type='password' name='password'>
</label>

и в форме изменить заданный стиль с center на left:

<form enctype='multipart/form-data' action='' method='POST' style='text-align:left'>

Либо добавить стили label:

  <form enctype='multipart/form-data' action='' method='POST' style='text-align:center'>
  <label style='text-align:left; display: inline-block;'>Пароль<br />
    <input type='password' name='password'>
  </label>
</form>

Если все же с параграфом, то:

  <form enctype='multipart/form-data' action='' method='POST' style='text-align:center'>
  <p style='text-align:left; display: inline-block;'>Пароль<br />
    <input type='password' name='password'>
  </p>
</form>

1

Можно сделать так:

<form enctype='multipart/form-data' action='' method='POST' style='margin: auto; width: 200px'>

<div>Логин</div>
<input type='text' name='login' style='width:100%'>



<div style="text-align: left;  margin-top: 15px;">Пароль</div>
<input type='password' name='password' style='width:100%'>


<input type='submit' name='button' value='Сохранить' style='width:100%; margin-top: 15px; background:#5D80F9; color:white; padding: 7px'></form>

Но это далеко не лучший вариант. Лучше вам почитать какую нибудь статью про позиционирование (например). И заново переделать всю форму.

0

Может float:left для обоих элементов прописать? Тем более что в стиле у Вас написано style='text-align:center'

0

Можно сделать например так:

<form enctype='multipart/form-data' action='' method='POST' style='text-align:center'>
 
<p><span style="padding-right: 125px;">Логин</span><br />
<input type='text' name='login'>
</p>

<p><span style="padding-right: 115px;">Пароль</span><br />
<input type='password' name='password'>
</p>

<p><input type='submit' name='button' value='Сохранить' style='width:223px; background:#5D80F9; color:white; padding: 7px'></p></form>

Пример на JSFiddle

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.