How to display HTML FORM as inline element

Question

This is probably a basic html css question     I have a simple one-button form that I would like to display inline inside paragraph text    lt p gt Read this sentence        lt form style  display inline   gt        lt input style  display inline                type  submit               value  or push this button   gt        lt  form gt    lt  p gt    Even though form has style display inline attribute  I get a linebreak before the form  Is there a way to get rid of it   Can form elements appear inside  lt p gt

User · Answer

Just use the style float  left in this way    lt p style  float  left  gt  Lorem Ipsum  lt  p gt    lt form style  float  left  gt      lt input  type  submit   gt   lt  form gt   lt p style  float  left  gt  Lorem Ipsum  lt  p gt

User · Answer

Add a inline wrapper   lt div style  display flex  gt   lt form gt    lt p gt Read this sentence lt  p gt    lt input type  submit  value  or push this button    gt   lt  form gt   lt div gt       lt p gt Message here lt  p gt   lt  div gt

User · Answer

You can accomplish what you want  I think  simply by including the submit button within the paragraph         lt pre gt        lt p gt Read this sentence   lt input  type  submit  value  or push this button   gt  lt  p gt        lt  pre gt

User · Answer

Move your form tag just outside the paragraph and set margins   padding to zero    lt form style  margin  0  padding  0   gt     lt p gt      Read this sentence       lt input style  display  inline   type  submit  value  or push this button    gt     lt  p gt   lt  form gt

User · Answer

You can try this code    lt form action     method  get  id  login  style   display inline important   gt      lt label for  User  gt User  lt  label gt      lt input type  text  name  User  id  User  gt      lt label for  password  gt Password  lt  label gt  lt input type  password  name  password  id  password  gt     lt input type  submit  name  log  id  log  class  botton  value  Login    gt    lt  form gt     The important thing to note is the css style property in the  lt form gt  tag   display inline important

User · Answer

According to HTML spec both  lt form gt  and  lt p gt  are block elements and you cannot nest them  Maybe replacing the  lt p gt  with  lt span gt  would work for you   EDIT  Sorry  I was to quick in my wording  The  lt p gt  element doesn t allow any block content within - as specified by HTML spec for paragraphs

User · Answer

lt form gt  cannot go inside  lt p gt   no  The browser is going to abruptly close your  lt p gt  element when it hits the opening  lt form gt  tag as it tries to handle what it thinks is an unclosed paragraph element    lt p gt Read this sentence    lt  p gt  lt form style  display inline   gt

[html] How to display HTML <FORM> as inline element?

Examples related to html

Examples related to css