Submit button in HTML forms - html

I'm trying to create a HTML form, and in the end I'm adding a submit button:
<submit submitLabel="Save"/>
Is there an attribute that can be configured so that when pressing the button not only saves the data in the form, but it redirects to another HTML form? Perhaps to create a workflow between HTML forms?

clicking a submit button inside a form issuing a POST/GET request to the page you defined in the <form action="_____"
you can put your second form in the other page (the page you defined in the action attribute)
or even better - you can use AJAX, and avoid reloading the page

There are some ways to do it, but it depends also with what language you work. HTML alone doesn't cut it. You need a server side language as well, such as ASP or PHP
When I use php, i simply create a form and make sure the action is marked to the next page. There i can put the next form in, but I can process also the information I just picked up.
See example below
<form method="post" action="the place of the next form plus where processing happens.php">
put here your fields
<button name="btn_moveon" type="submit" >Go further to next page</button>
</form>
Hope this helps.

You can do this through code or the ACTION attribute of the form tag.

No, there isn't such an element. You must do this on server side, with whatever programming language the server runs (eg. PHP, ASP, etc.).

Related

Are two or more submit buttons in single form valid html?

A very basic example:
<form action="somephp.php" method="post">
... some stuff
<input type="submit" name="button1" value="value1" />
<input type="submit" name="button2" value="value2" />
<!-- or maybe even a third or fourth one ... hell knows -->
</form>
While I am well aware that this is possible, I have difficulties in finding documentation or specification, whether this is actually valid or allowed. What is common is one submit and maybe a reset button and that is it. I do not have to deal with this aspect on a daily basis, but now and then I do.
https://html.spec.whatwg.org/multipage/forms.html#forms
https://www.w3.org/TR/html51/sec-forms.html#element-statedef-button-type-submit-button
There is a lot about forms, but not whether it is OK to use several buttons. It is indicated through the way a plural is avoided in terms of the submit button, that several for a single form is not what the standard has in mind.
Therefore, it would be really appreciated whether this aspect is something one should worry about and whether it could pose some problems. Links to points of references would be best. Thanks.
from w3.org "submit buttons: When activated, a submit button submits a form. A form may contain more than one submit button."
see link for full text.
One way to see if it's valid is to use a validator https://validator.w3.org
Looks like it's valid HTML5 http://i.imgur.com/fPm9qiq.png
I think it really doesn't matter if a form has a single Submit button or multiple Submit buttons with a post action. When the form method is Post, it simply posts the whole form data back to server.
When it comes to technology like ASP.Net webforms, having multiple Submit buttons makes a difference, as each button can be linked to a different method that has to be executed in on the server-side but if you are using some platform where you just get the decide the form data and it's all upto you to decide how to process it based on the data state then having two submit buttons in a form is obviously redundant.

Angular.js submit form old way

I'm migrating an old html page from jQuery to Angular, and it contains some old-school forms with <input type="submit">. When I enriched my pages with the ng-app directive, the old forms stopped working (I mean when you press the submit buttons then nothing happens).
I searched for this problem and scanned the Angular docs too, but it seems that nobody is submitting forms anymore.
Any suggestions on how to bring those forms to life again without much keystrokes would be appreciated.
Currently the form has following markup:
<form name="form_upload" method="post" action="" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="send" value="Upload">
</form>
All jQuery code I purged and starting fresh with Angular.
UPD:
I guess i now found cause, it's empty action attribute, it seems empty action is not welcomed by standarts, but very convenient to use allowing you to submit form to the current page URL, is there Angular way to do it ?
Going off of the docs: http://docs.angularjs.org/api/ng.directive:form
Angular's philosophy is to minimize data and page reloads, so they don't like "old school forms", but you can get around it by using an action attribute in the form.
Angular is designed with single page applications in mind and avoiding full page reloads as that is going to take longer to do. By using the ngSubmit directive, you can define a function to send over the form data to the server and get a response back much quicker than a full page reload. Bytes instead of Kilobytes.
Use a non-empty action attribute to make Angular submit the form
Fill action attribute with current location (using angular)
In your controller:
$scope.location = $window.location.href
In your HTML:
<form action="{{location}}">
See the plunkr demo.
I've done this. I'm pretty sure I was using jquery to submit the form, but you could probably do it with plain old javascript.
One of the comments on the angular form page suggests this:
<input onclick="javascript:$(this).parent().submit();" type="submit" value="">
http://docs.angularjs.org/api/ng.directive:form

How do i submit a form by email at the click of a button?

I have a script written to send an email of a completed form when I click a button but it doesn't work, here's the code:
<button type= "button" onclick= form action="mailto:Myemail#mail.co.uk">Submit</button>
where have I gone wrong? I'm aware that I don't have Outlook Express so if form action does not work without it, is there an alternative?
where have I gone wrong?
You are trying to use mailto: as a form action. It doesn't work.
You are trying to specify your action on a <button> instead of on a <form>
You are using a type="button" (which is for JavaScript binding) instead of type="submit"
is there an alternative?
Submit to a server side program, written in the language of your choice (that is supported by your server), and have it send the email. Third party hosted options are available.
If you want to open the email client on button click use this:
<input type="button" value="Submit" onClick="parent.location='Myemail#mail.co.uk';">
You do not need form action for that.
Another option is to write some kind of server side code that sends the email directly without having to open up the email client. You can write the code in variety of languages like PHP, ASP.NET etc.

Clickable Div vs Button vs href?

I'm trying to learn the best way to create buttons via HTML/CSS.
I was using clickable div's before, but looks like this was not the best idea ever.
What about button's? Or a href's
Which way is the best to go with today (html5 css3)?
It depends on the behavior you are looking for. If its purpose is to link to another page then use an <a>. If it is for submitting a form or doing some sort of post or get I would use a button.
There is a web based project management product called Basecamp. When they first launched they were using <a> tags as delete buttons next to each individual task. Users who visited their internal pages while using the google web optimizer plugin for chrome were seeing all of their tasks marked as deleted. Google page optimizer looks for links in the page and triggers a click to pre-load future pages.
Let form follow function and you should be good to go :0)
One reason to favor buttons is that buttons are naturally better for accessibility, while using links, spans or other tags fails on that count. To get proper accessibility with those other elements, you have to use ARIA roles to fix them.
That's not a hack per se, since that's part of what ARIA roles are for. But it's an extra thing to learn about and make sure that you get right.
the best way to create buttons in html is to use
or
because when you buttons and inputs of type submit are used by default by the browser when you try to submit a form
for example :
<form action="somepage.php" method="POST">
<input type="text" name="name1">
<textarea></textarea>
<input type="submit" value="submit the form with a input of type submit">
</form>
only when the user click the submit button the form data are submited
BUT , when we use a or divs to play the role of buttons you need to call javascript and ask for help
FINNALY THE GOOD PRACTICE IS TO USE BUTTONS AND INPUT OF TYPE SUBMIT TO PLAY THE ROLE OF BUTTON EVERYTHING ELSE IS A CUSTOMIZATION THAT CAN INCREASE THE TIME TO LOAD THE PAGE

HTMl text area

If we type something in the text area and press submit button, the values should be displayed on the same page under that. How to do that?
And make stay permanently on the page
You need javascript.
<form onsubmit="document.getElementById('output').innerHTML = document.getElementById('tarea1').value;return false">
<textarea id="tarea1"></textarea>
<input type="submit" />
</form>
<div id="output"></div>
You need some server side code, asp.net or PHP
Test for Post/Get parameters
Echo text in response
If you need to learn about forms and server side basics w3schools.com is the best place to start
In order to store something permanently, you need to have a server running your webpage. You can't just create an HTML file that can get changed on the fly and have those changes become permanent. You'll need to learn a server language (PHP for example) and have a server (like Apache) that can display your page.
Is this what you're intending? to make an actual site, not just a webpage?
Add a piece of JavaScript and attach it to onClick of the submit button. In the JavaScript, copy the value of the text area into the new place (assign the text to innerHTML) and also call submit() on the form.