Как отобразить HTML <FORM> как встроенный элемент?

83

Вероятно, это базовый вопрос по html / css ...

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

<p>Read this sentence 
     <form style='display:inline;'>
     <input style='display:inline;' 
            type='submit' 
            value='or push this button'/>
     </form>.
</p>

Несмотря на то, что у формы есть атрибут style = display: inline, я получаю разрыв строки перед формой. Есть ли способ избавиться от этого?

Могут ли элементы формы появляться внутри <p>?

html css

— Евгений
источник

3

Спасибо всем за ответы и комментарии!

— Евгений

73

Переместите тег формы за пределы абзаца и установите для полей / отступов нулевое значение:

<form style="margin: 0; padding: 0;">
  <p>
    Read this sentence 
    <input style="display: inline;" type="submit" value="or push this button" />
  </p>
</form>

— ЧссПлы76
источник

Ваш ответ спас мне день.

— DrinkJavaCodeJava

3

Поля и отступы в моей форме у меня не работали, мне пришлось вместо этого использовать display: inline, и тогда поля / отступы не понадобились.

— angularsen

2

display: inline тоже сделал это за меня. Почему бы не добавить это к стилю формы в своем ответе.

— Praesagus

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

— gunslingor

54

<form>не могу войти внутрь <p>, нет. Браузер собирается внезапно закрыть ваш <p>элемент, когда он попадает в открывающий <form>тег, поскольку он пытается обработать то, что он считает незакрытым элементом абзаца:

<p>Read this sentence 
 </p><form style='display:inline;'>

— Джон Кугельман
источник

22

Вы можете попробовать этот код:

<form action="#" method="get" id="login" style=" display:inline!important;">

  <label for='User'>User:</label> 
  <input type='text' name='User' id='User'>

  <label for='password'>Password:</label><input type='password' name='password' id='password'>
  <input type="submit" name="log" id="log" class="botton" value="Login" />

</form>

Важно отметить свойство стиля css в <form>теге.

display:inline!important;

— Джулибе де Сальвадор
источник

6

Согласно спецификации HTML, оба <form>и <p>являются блочными элементами, и вы не можете их вкладывать. Может быть , замена <p>с <span>будет работать для вас?

РЕДАКТИРОВАТЬ: извините. Я был слишком быстр в своих формулировках. <p>Элемент не допускает содержимое блока внутри - как указано в HTML спецификации для абзацев .

— Гжегож Оледски
источник

3

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

— Zack The Human

0

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

     <pre>
     <p>Read this sentence  <input  type='submit' value='or push this button'/></p>
     </pre>

— Tac
источник

0

Просто используйте стиль float: leftтаким образом:

<p style="float: left"> Lorem Ipsum </p> 
<form style="float: left">
   <input  type='submit'/>
</form>
<p style="float: left"> Lorem Ipsum </p>

— зан
источник

3

Лучше исправить разметку, как предлагается в других ответах, чем делать floatтрюки.

— Джереми Джей Старчер,

0

Добавьте встроенную оболочку.

<div style='display:flex'>
<form>
 <p>Read this sentence</p>
 <input type='submit' value='or push this button' />
</form>
<div>
    <p>Message here</p>
</div>

— Индер Сингх
источник