-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add section about forms and submit buttons #320
Conversation
|
||
## Forms | ||
|
||
On modern browsers, `button type="submit"` provides a superset of functionality when compared to `input type=submit`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting! Could you join a resource that list the superset of functionality. I only know that you can then nest other elements inside it. In "Form Design Pattern" it is stated that this variant have the side effect in older version of IE to submit the value of all the buttons to the server, regardless of which one was clicked, so you'll need to know which button was clicked so you can determine the right course of action to take. Maybe this is worth mentioning.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @morgaan - I just offered to write this so we could rid of an issue that has been open for two years. To be honest, I'm not familiar with the implications, I was just summarising a conversation that we had in Slack years ago.
If you're more familiar with this than me, feel free to amend the text that I've submitted!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @josebolos - First of all apologies that I did not mentioned it was an existing issue pending for long time. I thought it was coming out from work you being busy with lately.
I do not know much more TBH, I just remembered these lines from the book and I have been using mostly the input variant over the years, unless I had the need to nest stuffs in there. This is what is maybe meant by superset of functionality.
IMO I would let it open to developers to pick from, depending on their use case.
Reading the "We don't do this" looks like the input variant is bad practice which I doubt it is, at least according to Adam Silver, author of the book.
This may though be worth mentioning that in case of using the button
variant that it does not fall into the edge cases category.
What do you think? We could also bring this topic into the next FE open space to see what is the fellowship opinion on that matter 2 years later.
In any case thank you for offering to write this ☀️. I plan to come up with a draft of the few tips I got from the book at writing forms, and already applied to NatCar project. This one could end up being a guideline chapter into the Playbook about writing forms and or a part in the Elements design system styleguide. It could also include the outcome of the current discussion.
Cheers!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@morgaan sounds great, thanks very much!
I also vaguely remember @davidpauljunior having some thoughts on button vs input, do you have some David? :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
older version of IE
Do we know which older version of IE? If it's old enough that it can't support TLS 1.2 then it won't be clicking any buttons on any of our sites because it won't be able to access them at all: https://github.com/springernature/frontend-playbook/blob/master/practices/graded-browser-support.md#browsers-without-tls-12-support
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Still in IE11 as far as I understand. But it also seems that you should be safe if you provide the button
with name
and value
attributes. In such case we should emphase this in the Playbook if using the button
variant.
|
||
```html | ||
<form> | ||
<input type="submit">Search</input> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We definitely don't do that, since <input>
is a self-closing tag. 😉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, well spotted 🏅
Fixes #200.