HTML forms. Strange behavior of html form submit What does submit mean in html

is there a way to make a selection of a group of options?

Child Tag Child Tag

7 54

Keavon

7 answers:

until it is supported in html standard, any and all answers were problematic, including:

The class attributes for children to choose, and if how a style is applied to an element, vary depending on the browser and its version.

the c prefix will have the consequence that if you select an element narrower than the selected option, the visual effect will not be pleasing, with the readable text hidden on the right (see example below).

any style you apply will not necessarily match the style the browser user is used to. Bold and italics are Firefox, but not necessarily every browser. Many browsers apply styling, including gray, to help indicate that optgroup is not being selected

the concept of a select optgroup label will not necessarily be what the user expects.

This led me to the conclusion better way To get around this issue, either use a library such as UI-Selectable for all selects on your site (for consistency), or use the first option in optgroup to represent the all children's selection with a clear description (e.g. "all Swedish cars"):

ALL Children Child Tag 1 Child Tag 2 .my-select ( width: 60px; ) Parent Child

slightly different solution..

OptionGroup ( font-weight: bold; ) Parent Tag Child Tag1 Child Tag2

answer@grifos is not supported in WebKit browsers and does not work when tested in IE 11.

one suggestion might be to use an unordered/ordered list and style it with using CSS and then add functionality using JavaScript/jQuery.

I've seen a good implementation of this in the past, it can look very slick!

this will give the bare feel of a dropdown list with the ability to select optgroups. Kept it very simple, but you can style it to suit your heart's content.

Hide ( display:none; ) .show ( display:block; ) .selected.button ( display:block; font-weight: bold; ) button ( text-align: left; min-width: 200px; margin-left: 10px ; border: 0px; background: #eee; display: block; ) #value_display ( width: 210px; border: 1px solid #ddd; border-radius: 4px; padding-left: 8px; ) opt 0 opt 0 opt 0-1 opt 0-2 opt 0-3 opt 0-4 opt 1 opt 1-1 opt 1-2 opt 1-3 opt 1-4 var showingOptions = false; var showingID = document.getElementById("value_display").innerHTML; function showOptions() ( if(showingOptions) ( document.getElementById("select_div").className = "hide"; showingOptions = false; ) else ( document.getElementById("select_div").className = "show"; showingOptions = true ; ) ) function select(id)( document.getElementById(id).className = "selected button"; document.getElementById(showingID).className = "show"; showingID = id; document.getElementById("value_display").innerHTML = id; document.getElementById("select_div").className = "hide"

Attribute contains a DOMString which is displayed as the button"s label. Buttons do not have a true value otherwise.

If you don"t specify a value, the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here"s an example of a submit button with a default label in your browser:

Additional attributes formenctype

A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

Application/x-www-form-urlencoded This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as . multipart/form-data Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must

use this encoding type if your form includes any elements of type file().

text/plain Plain text; mostly useful only for debugging, so you can easily see the data that"s to be submitted.

If specified, the value of the formenctype attribute overrides the owning form's action attribute.

Get A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark ("?") character, then appending the form"s data, encoded as described by formenctype or the form"s enctype attribute. This URL is then sent to the server using an HTTP request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.

post The form"s data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post request. This method supports complex data and file attachments. dialog This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.

formnovalidate

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element"s owning form.

formtarget

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or . A value specified here overrides any target given by the target attribute on the that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

Self Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.

_blank Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent .

If you choose to use elements to create the buttons in your form, keep this in mind: if there"s only one inside the , that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.

A simple submit button

We"ll begin by creating a form with a simple submit button:

Let's submit some text

This renders like so:

Try entering some text into the text field, and then submitting the form.

Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text= usertext, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the ; see Sending form data for more details.

Adding a submit keyboard shortcut

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button - just as you would with any for which it makes sense - you use the accesskey global attribute.

In this example, s is specified as the access key (you"ll need to press s plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent"s own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

Here"s the previous example with the s access key added:

Let's submit some text

For example, in Firefox for Mac, pressing Control - Option - S triggers the Send button, while Chrome on Windows uses Alt + S .

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it"s not a complete solution for accessibility purposes.

Disabling and enabling a submit button

To disable a submit button, simply specify the disabled global attribute on it, like so:

You can enable and disable buttons at run time by simply setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .

Validation

Submit buttons don"t participate in constraint validation; they have no real value to be constrained.

Examples

We"ve included simple examples above. There isn"t really anything more to say about submit buttons. There"s a reason this kind of control is sometimes called a "simple button."

Specifications Specification Status Comments

HTML Living Standard The definition of "" in that specification.	Living Standard
HTML5 The definition of "" in that specification.	Recommendation

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internettype="submit"

Chrome Full support 1	Edge Full support Yes	Firefox Full support 1

Often on Web sites you can find pages with HTML forms placed on them. Web Forms – convenient way obtaining information from visitors to your site. An example of this is - , - which provides feedback with site visitors and developers. Forms are also convenient for site developers when developing a CMS, which allows them to maintain the main property of the site - relevance. This article is devoted to the basics of creating HTML forms, their processing, and ways to transfer data from screen forms to PHP scripts.

1) Create a simple form

Tags And define the beginning and end of the form. Starting form tag contains two attributes: action And method. The action attribute contains the script URL that must be called to process the script. Attribute method tells the browser what type of HTTP request to use to submit the form; possible values POST And GET.

Comment

The main difference between the POST and GET methods is the way information is transferred. In the GET method, parameters are passed through the address bar, i.e. essentially in the HTTP request header, while in the POST method the parameters are transmitted through the body of the HTTP request and are not reflected in any way in the address bar.

Task: Suppose you need to create a drop-down list with years from 2000 to 2050.
Solution: You need to create an HTML form with a SELECT element and a PHP script for processing the form.

Discussion:

First, let's create two files: form.html and action.php. The form.html file will contain an html form with a drop-down list. Moreover, the values ​​in the list can be specified in two ways:

I. Manual data entry:

2000
2001
2002
……………………………………………
2050

II. Entering data through a loop:

As you can see, the second example with a loop is more compact. I think there is no need to provide the handler script for this form, because it is processed exactly the same as a text field, i.e. list values ​​can be retrieved from a superglobal array $_POST.

Description:

Let's create an HTML form to send a file to the server.

This html form contains an element browse, which opens a dialog box for selecting a file to upload to the server. When you press the button "Transfer file", the file is passed to the handler script.

Then you need to script the action.php handler. Before writing the handler, we need to decide in which directory we will copy the file:

Comment

If you trust users to upload any files to your server, you need to be extremely careful. Attackers can embed “bad” code into a picture or file and send it to the server. In such cases, you need to strictly control the downloading of files.

This example demonstrates creating a directory and copying a file into that directory onto the server.

I would also like to demonstrate an example with the element checkbox. This element is slightly different from other elements in that if not one of the elements checkbox’a is not selected, then the superglobal variable $_POST will return empty value:

Blue
Black
White

I spent a long time thinking about what title to give this article and couldn’t come up with anything better. This is the only title that at least somehow reflects the essence of what is stated. To be honest, I don’t know what it’s called correctly, so I named the article the same way I tried to find at least some information in a search engine on this topic.

On one of the sites, I needed to use two submit buttons in one form, which would send the filled data to different PHP “handlers”, depending on when the button was pressed. Google didn’t answer me anything reasonable, apparently I just didn’t ask it the right way, so I had to come up with it myself.

So I laid it out for your consideration.

The essence of the problem

After implementing it myself, I still found several solutions that were based on the use of regular buttons to which JS was screwed.

I implemented my plan in almost the same way, but used the standard submit type. Everything seems to be working and in my opinion my solution is more logically correct.

This solution will work equally well both on free hosting and if you choose professional hosting. This method is implemented entirely on the client side and should not slow down the server.

To make it easier to understand what I want and how it works, here is a really working example, in the form of a form that has 2 submits that send data to different pages.

This question is probably one of the TOP 10 questions on the forums :) Most likely this is a requirement of the designer or customer.

So, the solution, at first glance, is simple:

Send

But the next question immediately arises (oddly enough): what if JS is disabled for the visitor?

Let's change our code to:

And let's add some JS:

addEvent(window, "load" , windowLoad) ;

/* Cross-browser adding an event handler */
function addEvent(obj, evType, fn) (
if (obj.addEventListener) (
obj.addEventListener(evType, fn, false);
) else if (obj.attachEvent) (
obj.attachEvent("on" + evType, fn);
}
}

/* Get the parent form for the element */
function getParentForm(obj) (
while ((obj = obj.parentNode ) ) (
if (obj.nodeName == "FORM" ) (
break ;
}
}
return obj;
}

/* We look for all submit buttons with the link class and replace them with links */
function windowLoad() (
var buttons = document.getElementsByTagName("input" ) ;
for (var i = 0; i< buttons.length ; i++ ) {


link.appendChild(document.createTextNode(buttons[ i].getAttribute("value") ));
link.setAttribute ("href" , "#" ) ;
addEvent(link, "click" , linkClick) ;

var parent = buttons[ i].parentNode ;
parent.removeChild (buttons[ i] ) ;
parent.appendChild(link) ;
}
}
}

/* Submit the form by clicking on the link */
function linkClick(e) (
var e = window.event ||
e;
var target = e.target ||
e.srcElement ;

var parentForm = getParentForm(target) ;
}

parentForm.submit();

Send

if (window.event) (e.returnValue = false;) else (e.preventDefault();)

Now, if JS is disabled, the visitor will see a button instead of a link and will still be able to submit the form. But we won't stop there. Let's make the button look like a link even if JS is disabled. In order to style the button, we’ll change the tag to button , and the span is needed so that we can add text underlining in Firefox.
for (var i = 0; i< buttons.length ; i++ ) {
We will also change the JS part accordingly.
var buttons = document.getElementsByTagName("button");
link.appendChild(document.createTextNode(buttons[ i].firstChild.firstChild.nodeValue));

The CSS will look like this:

button.link(
/* The first two properties are needed to remove indentation in IE */
overflow: visible;
width: auto;

/* Remove indentation */
margin: 0;
padding: 0;

/* Remove all button design elements */
background: none;
border: none;

/* Normal cursor for links */
cursor: pointer;
}

/* Link is usually underlined */
button.link span(
color : #00f ;
text-decoration: underline;
}

For Firefox, you can also add -moz-user-select: text; so that the button text can be highlighted, but I doubt this is necessary.

The remaining styles will depend on the specific design.

A few notes:

It will not be possible to apply the pseudo-classes active, visited, and for IE6 and hover to the button

Several buttons for one form will not work normally in IE6

You can do without JS. It all depends on how important the naturalness of the link is to you.

UPD
insa , not cross-browser compatible (read comments).