Построение формы html

175
10 декабря 2016, 10:17

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

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;

Пикча формы:

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

Answer 1

Правильнее будет в данном случае оборачивать не в параграф, а в 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>

Answer 2

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

<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>

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

Answer 3

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

Answer 4

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

<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

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте mario.kiev.ua
ТОП-10
READ ALSO
Проблема в Yii2. Undefined index: parent_id
PHP

Проблема в Yii2. Undefined index: parent_id

Код перестал работать внезапноЗаранее спасибо

 379
Помогите запустить PHP библиотеку.
PHP

Помогите запустить PHP библиотеку.

Добрый день, есть такая Composer Библиотека паука spatie/crawler Я ее успешно установилНо не хватает ума правильно запустить самого паука, кто то может...

 361
Удалить пункт меню в Wordpress
PHP

Удалить пункт меню в Wordpress

Нашел где пункты меню хранятся в базе, удалил один, теперь вместо него выводится текст: #0 (без названия)Как пункт удалить полностью?

 239
Уменьшение картинки yii2
PHP

Уменьшение картинки yii2

Как изменить изображение в yii2, чтобы оно не теряло пропорцииТ

 901