Як відобразити 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>

— ChssPly76
джерело

Ваша відповідь врятувала мені день.

— DrinkJavaCodeJava

3

Поля та відступи у моїй формі для мене не працювали, мені довелося використовувати display: inline замість цього, а потім margin / padding не було необхідним.

— 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>працюватиме для вас?

EDIT: Вибачте. Я повинен був швидко сказати. <p>Елемент не допускає вміст блоку всередині - як зазначено в HTML специфікації для абзаців .

— Гжегож Оледзкі
джерело

3

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

— Zack The Human

0

Я думаю, ви можете досягти того, що хочете, просто включивши в пункт пункт "Надіслати":

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

— Так
джерело

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>

— Індер Сінгх
джерело