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.
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?).
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
Related
I'm having this dilemma where my client wants me to have multiple forms on the same page. So what I've come up with is this:
2x <row></row> tags
nested in first one are two <div class="col-md-6"></div>
nested in the second are three <div class="col-md-4"></div>
The problem is that I have multiple <form> tags for each of those divs but only one </form> right before the submission button. However, it makes the the last four form sections all wobbly unless I add closing form tags. But once I do that, it only lets me submit data from the last div, which I don't want obviously, and the client wants to have five forms that "look" detached from each other.
At the moment the only Bootstrap functionality I can think of that allows me to do that is having different divs with their own forms. I'm open to suggestions.
You can't nest forms. The HTML parser will ignore the second <form> start tag. So don't do that.
What you can do is have multiple forms and associate form controls with the right form using the form attribute.
<form id=foo><p><input name=foo-a></p></form>
<form id=bar><p><input name=bar-a></p></form>
<p><input name=foo-b form=foo></p>
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 2 years ago.
I'm a little confused. What is the difference between these. Please don't reference really old postings. I notice that accessing some of the styles are different inline in html as well as in style sheets.
<input type=button>
vs
<button>
I guess I'm wondering which one will out live which?
or which is the best when taking into account ease of compatibility between all the general technologies that go into website creation? aka. which is going to cause the least amount of trouble
Unlike <input> tags, <button>'s can contain other html elements as their labels. <input type="button"> can only accept a string as its label text (css styles not withstanding).
Additionally, the <button> element accepts a wide range of uncommon but useful attributes regarding multiple forms and click actions. See the MDN page for more details.
As for one "out living" the other, the HTML standard is remarkably backwards compatible. Humanity will put men on Mars before either is eliminated from the HTML standard.
Inside a <button> element you can put content, like text or images.
eg: <button type="button" onclick="alert('Hello world!')">Click Me!</button>
If you use the <button> element in an HTML form, different browsers may submit different values. So always use <input type="button"> to create buttons in an HTML form.
input type=button
The tag is the easiest way to submit a form. When a customer clicks on the button, it submits automatically. You don't need to add any scripts, the browsers know to submit the form when a submit INPUT tag is clicked.
The problem is that this button is very ugly and plain. You can't add images to it. You can style it just like any other element, but it can still feel like an ugly button.
Use the INPUT method when your form has to be accesible even in browsers that have JavaScript turned off.
button
The BUTTON element offers more options for submiting forms. You can put anything inside a BUTTON element and turn it into a submit button. Most commonly people use images and text. But you could create a DIV and make that entire thing a submit button if you wanted to.
The biggest drawback to the BUTTON element is that it doesn't automatically submit the form. This means there needs to be some type of script to activate it. And so it is less accessible than the INPUT method. Any user who doesn't have JavaScript turned on won't be able to submit a form with only aBUTTON element to submit it.
Use the BUTTON method on forms that are not as critical. Also, this is a great way to add additional submission options within one form.
Source: https://www.thoughtco.com/buttons-on-forms-3464313
Use <button> from input element if you want to create button in a form.
And use button tag if you want to create button for an action.
More Info: Difference between <input type='submit' /> and <button type='submit'>text</button>
depends where you want to use it. input should be inside form, where button can be used anywhere.
I'm trying to make a file sharing website but having trouble styling the upload forms I have as my design is quite advanced instead of setting the indivdual styles i'm trying to get set the design as a background image.
This is my design - http://icap.me/i/s5YIbheY3g.png
This is it currently effort - http://icap.me/i/ODuzJOQMhS.png
So far I set the style of the upload button by using the following code -
form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0
}
do you know how I could use an image to style my other form buttons here is the html -
<form action="upload_file.php" method="post"enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
<input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
</form>
Styling some form elements suck, and unfortunately, the file element is one of those elements. This is because the browser actually derives the control itself from the operating system (which means you have absolutely no control over how it looks). What this means for you is that in order to style it, you will need JavaScript and some CSS hackary.
Quirksmode has a great step by step for doing it, at least to get you started.
The basics of which, though, are:
Style your normal file input with position: relative.
Add a new plain old text input and position it on top of the file input.
Style the text input to look like the file input
Drop the file input's opacity to 0, so that it's invisible, but still clickable (this is key, because you're still actually using the file input)
Use JavaScript to put the filename into the text input
This one's kind of primitive and not very standards-compliant (extra elements and all that). If you're already using a JavaScript library (jQuery, MooTools, etc), you may be able to find a plugin that will handle the control itself, and you just add styling to that. The advantage to this method is that you won't necessarily need to add extra elements yourself (so you don't have a stray input field lying around), and the JavaScript (ideally) picks up the presence of your file input(s) and "fixes" them accordingly.
For styling browse button you need to take help of css-javascript duo or something like twitter bootstrap which just works out of the box1..
Also, check this post and this article
As a personal view, i feel that form elements like browse button and drop-down menus shouldn't be tweaked much..giving out two benefits..one, faster developments..and two, cross-browser symmetry..
I have a requirement wherein my page has few <input> elements and i want the browser to remember the values typed in them and show the autocomplete drop down for subsequent visits. But the problem is I dont have a <form> tag in my page and the processing is done via Javascript/Ajax.
Is there any way i can acheive this?
Solved by adding a tag around the elements. Thanks Rory. And also prevented the form submission with attribute onsubmit="return false;" on the form tag.
It works on firefox but not in chrome.
I'm developing a website (ASP.NET Webform with C#) where I have a <button> element.
Here's the code snippet:
<a href="ThisPage.aspx" ID="myButtonID" runat="server">
<button>Configure new trip</button>
</a>
When I use Firefox or Chrome, this code does a "GET" over this ThisPage.aspx. That's what I want to do, actually.
The question is that the same code does "POST" when I use Opera. Does anyone know what shall I do to make this button act the same way using Opera?
Probably because FF/Chrome handles the click on the <a /> tag and Opera does it on the <button /> tag.
What you are looking for (I guess) is having a <a /> tag renderes as a button? In that case have a look at this for at good tutortial on how to style an <a /> tag like a button
What you are doing is to some extent similar to adding a textbox to an anchor tag, i.e. sematically wrong.
I'm guessing it's within a form tag?
If so, try setting the method of the form to "get".
If you're not doing any AJAX operations, and clicking on the button is expected to navigate to 'ThisPage.aspx', then I'd consider styling the <a> element - as suggested by #veggerby - and removing the <button> </button> elements.
However, this could be confusing for the user, who might not expect a button within a form to be a navigational element. I'd tend to keep the form and its controls visually separate from other elements on the page - using a <fieldset>, maybe.
How do Firefox/Chrome submit the "GET"? Are there any parameters? If you want to link to ThisPage.aspx then just do it without a button.
A form can be GET or POST, but not both. So if the button is inside a form it will always submit the data from the form, and should use whatever method is set on the form.
Perhaps you can post the actual HTML output to the browser, rather than the ASP code? I have a feeling you may be generating a form-within-a-form. In which case the solution would be to keep the forms separate if possible.