Add one if you want the data to be submitted to a different URL then that of the current page.
Your form should also be method="POST". Passwords do not belong in URLs (which are often logged in plain text).
How do I get the page to send the input field values back to the backend server ?
Use a <button> element to represent your submit button and not a <div> element. The <div> element is when you need a block element and HTML lacks an element with the semantics to describe your content. That isn’t the case here, you want to submit a form and that is what submit buttons are for.
Problem :
Disclaimer: I’m a backend programmer and I would like to minimize javascript code in my webpages.
I’m considering using the login form given here as example. In this example we have this
The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.
How do I get the page to send the input field values back to the backend server ?
Note that there is some javascript code visible in the source page that checks the validity of the fields. But there is no hint on how to get send the email and password to the backend and load the logged in page.
Comments
Comment posted by Slava Knyazev
Is there something which prevents you from manipulating the DOM?
Comment posted by The HTML5 placeholder attribute is not a substitute for the label element
“The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.” Why not? These are the basics of HTML Forms and it sounds like you are willingly and flagrantly flouting them. If you want things to work, use them according to
Comment posted by chmike
@Quentin I understand the argument. We could add to it that the hardly readable placeholder value does not respect accessibility rules. But in this case, the icons in front of the text fields give a visual queue on the expected content. It is the same with a seach field if the icon was a magnifying glass. But for a more general form with multiple fields, I definitely agree with the argument.
Comment posted by Quentin
@chmike — If you want to label a form control with an image, then that is fine.
Comment posted by chmike
This is impressive. It worked just by adding the action parameter and method. No need to change the div into button. I have no idea why. It is using the fomantic-ui framework and it has an input validation script. They might have some javascript magic associated to the submit class. Is the button tag just a convention, or is it needed ? How can it work without this button tag ?
Comment posted by chmike
I have another question. In this example, there is only one button. What if I wanted to have two buttons. How could I tell which button was pressed. We can solve this with submit input types by adding the name and value parameters. But this doesn’t work with this div. EDIT: it works when I change the tag to button. I can add a name and value parameters and they are passed with the form values.
