-2

I am creating a wordpress theme, and inside the admin panel I am creating a live preview of a search box. The user can style the search box directly from the admin panel. It's a very basic html code:

<li class="epurus_nav_search">
<form class="search_form">
<input class=nav_search_input" type="search" name="s" placeholder="Search..."/>
<input type="button" class="nav_search_submit" value="Go"/>
</form>
</li>

Now I noticed, that the entire admin live demo itself, is already an entire form field, so I can't use the above <form> (it breaks the websites when a form is inside a form). I have replaced the form tag with <span> however it often gives different css results than the form tag. I am seeing all kind of different behaviours between the demo and the front end of the website. Paddings, margin and line-heights are all totally off, even though I have set them all to 0 or some other value.

Is there anyway I can use a form within a form, or is there another tag that comes close to <form>? I am open to any tag such as span, div or even javascript solutions. The one thing I can't do, is move the HTML chunk outside of the admin form.

Kevin M
  • 1,202
  • 15
  • 30
  • possible duplicate of [Embed an HTML
    within a larger
    ?](http://stackoverflow.com/questions/1759006/embed-an-html-form-within-a-larger-form)
     – CannonFodder May 18 '15 at 08:31
  • Well my question is not only related to form within a form, because I am looking for alternative html tags, or even javascript solutions. – Kevin M May 18 '15 at 08:35
  • But why are you looking for alternative html tags? This is either a form or it's not. Honestly it seems like all you're struggling with is the styling. Your main complaint seems to be nothing emulates how a form looks. Without your styling we can't really help. To answer the original question though, no. You can't have a form within a form. – CannonFodder May 18 '15 at 08:40

2 Answers2

0

Try using <span> with display: block; This should work.

EDIT:

I have had a brainwave. Put the div into the form and set all the styles to inherit

The_HTML_Man
  • 347
  • 1
  • 4
  • 13
  • Hello, I have done that already and it works to a certain point. Unfortunately I am seeing all kind of different behaviours between the demo and the front end of the website. Paddings, margin and line-heights are all totally off, even theough I have set them all to 0. – Kevin M May 18 '15 at 08:33
  • Well, as I said, I have done so, but it gives totally different behaviors. The search bar created with a form is totally different than the one that uses div. Most likely because css has different default values for those elements. – Kevin M May 18 '15 at 08:44
0

You can't insert a form element inside anothe one, as it will submit the parent and not the child. Also it may have fields in conflict.

A form is a block element, so it's more similar to a div than a span. I'd use that to start with. Starting from this point, I'd use a class like <div class="form"> and start styling it to fake the same form behavior. Simpliest way is to first analyse the processed form CSS (via developer tools) and then copy/paste the ones that affect forms only (i.e. not body inheritances etc).

Eventually you'd block the default submit button's event and submit the form in another way (ajax maybe?).

Jack
  • 1,689
  • 1
  • 13
  • 20