freeCodeCamp
Learn HTML Forms by Building a Registration Form
Is your feature request related to a problem? Please describe.
The registration form currently accepts submissions with both radio buttons unchecked. The Account-Type must be a required parameter otherwise it beats the purpose of having it in the first place.
Describe the solution you'd like
The simplest solution would be to add a checked attribute to any one of the two radio buttons.
Describe alternatives you've considered
Or leave them both unchecked initially, but force the user to check any one of them when they try to submit the form (which I don't know how to do)
Additional context
Here's the link: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-41
@dhairyapatel1506, Is this implementation in progress by anyone? If not then I would like to work on this.
Thank you, for taking the time to open this.
That sounds like a decent lesson idea.
We can add one lesson after creating the radios explaining the use of adding the required attribute to both of the inputs. Note: you only need to add it to one, but it is more consistent to add it to both
An issue with the help wanted label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.
If you would like to contribute, and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/
If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum
Thankyou for Your kind and helping reply @ShaunSHamilton I'll try to find and contribute
This particular issue is sort of a thorn in the side of accessibility because HTML doesn't offer a great way to solve it. Setting one of the buttons to checked initially is a possible solution but it is probably not the "technically correct" solution as far as accessibility is concerned because it doesn't convey the sense of being required.
This is actually one of the few times where you need to force a role on an element in order to get it to behave correctly with most screen readers. On the fieldset wrapping the radio buttons you would add role="radiogroup" and also aria-required="true" which will force most screen readers to convey that the radio button grouping is required. (And then you would not set checked or required on any of the radio buttons). But in order to do this you would need to remove the 'accept terms and conditions' checkbox from the fieldset. Also, I would probably give the fieldset for the radio buttons a legend, such as "Account Type" and then lose the word "Account" at the end of each radio button.
Reference for this solution: Support for Marking Radio Buttons Required, Invalid
@bbsmooth I did not even consider how this would be interpreted.
(And then you would not set checked or required on any of the radio buttons).
This does not solve the issue though, because, without JavaScript, the form would still be submit-able without having any selected.
because, without JavaScript, the form would still be submit-able without having any selected
Ya, there are some accessibility fixes that basically require JS to implement "properly". But I see your point, we aren't using JS for these forms so my "best" suggestion isn't really applicable here. In that case, I agree that setting one of them to checked is the best approach. I would not add required to any of them though. Instead, I would add a legend and then state that they are required in the legend text (<legend>Account type (required)</legend>). Adding required to each radio button forces the screen reader to announce each button as required which is confusing because only one of them is actually required.
That sounds like a plan.
Action items to resolve this issue:
- Create at least one new lesson after the lessons adding the radios
- Add the
checkedattribute to the first radio input - Add a
legendwithAccount type (required)for text - Remove the word
Accountfor each radio
@bbsmooth and @ShaunSHamilton sorry about the extremely late reply, and thank you both for your valuable contributions to the discussion so far. So if I've understood this correctly, the problem cannot really be solved without javascript so you've considered adding a legend stating that it's required to choose an account type?
@dhairyapatel1506 We decided to:
- Create at least one new lesson after the lessons adding the radios
- Add the checked attribute to the first radio input
- Add a legend with Account type (required) for text
- Remove the word Account for each radio
So, a new lesson explaining the need to make one of the inputs checked by default.
@ShaunSHamilton I personally think the legend isn't required if it doesn't help solve the problem raised by the issue. There is no need to mention that anything is required. Besides, adding a legend to only one of the three fieldsets (and that too in the middle) makes it look odd. I agree with @bbsmooth that adding the checked attribute is not technically correct but it looks like the best solution at the moment.
@dhairyapatel1506 The reason for the legend is it is useful to give a way to know a selection needs to be made/changed. The selection is, in fact, required, but, currently, there is no indication of this.
The checked attribute is in no way incorrect. It is just useful in this case to prevent the case of an non-selection.
@ShaunSHamilton I understand what you're saying, but my point is that the name, email and password parameters are also required and yet we do not mention it to the user. Similarly, there's no need to mention that the account type is required because that would only make the form look odd and besides the issue was never about mentioning that the account type is required to the user, it's just about not letting them submit the form without selecting at least one of the two options.
And for understanding why it's technically incorrect, recall the behavior of multiple choice questions in google forms. None of the options are ever marked by default and yet when the user tries to submit the form without selecting one, it doesn't allow them to. This is the more elegant solution that I've suggested when raising the issue and what I would call technically correct.
The reason we do not mention the name, email, etc. as being required (using text) is because the HTML form validation does it for us.
We need to explicitly say the account type is required, because, those who use assistive tools (e.g. those with limited vision) will not be told by their tool the field is required (because we are not using the required attribute). Adding the text "Required" means at least the assistive technology will read it out loud.
None of the options are ever marked by default and yet when the user tries to submit the form without selecting one, it doesn't allow them to. This is the more elegant solution that I've suggested when raising the issue and what I would call technically correct.
They can do this because they have JS available. We don't have JS available in this course since it is just HTML/CSS. So using the checked attribute to force a choice is the best option available.
In a real world application, I think you would add the checked option in the HTML as we are doing here and then if JS is available you would then remove the checked option and use the method I linked to above.
@ShaunSHamilton Well I guess if you put it that way the legend may be appropriate after all.
@dhairyapatel1506 How to find in which folder we have to edit the HTML file?
In addition to @ShaunSHamilton's four steps above, I think we need a fifth step to pull the terms and conditions checkbox out of the fieldset it is currently in. The account type radio button grouping should be in its own fieldset with a legend, but this legend would not apply to the terms and conditions checkbox. I don't think the terms and conditions checkbox needs to be in a field set at all, it can just stand on its own. But it looks like this project is relying on the default styling for fieldsets so perhaps the terms and conditions checkbox needs to be put in a fieldset of its own? Or if we want to keep the radio buttons and checkbox visually within one container then we might want to put a div around all of them and style the div to mimic the styling of the fieldset?
The main problem of the radio button can be fixed using required property. I also found few more problems with the form, some of those are as follows: -
- The create password field is creating some problem with respect to format.
- The three sections doesn't have any heading to them.
- The fields are not marked whether they are required or not.
Please allow me to work in these issues and fix them quickly, efficiently and accurately.
The main problem of the radio button can be fixed using required property.
This does not work, as per the discussion above.
The three sections doesn't have any heading to them.
Sections do not require headings.
The fields are not marked whether they are required or not.
This is a valid point. If an input field is required it should be visibly marked as required somehow. But this is out of scope for this particular issue.
Maybe a simple thing is to add a form validation using Javascript there in order to pass it checked during the submission of the form.
@dhairyapatel1506 Hey There i would love to work on it as my first Open Source contribution. Also as i mentioned it is my first Contribution ,I also may required guidance sometimes.
So if these are acceptable please assign this task to me
@dhairyapatel1506 Is this issue taken? Happy to work on this and submit a PR.
We typically do not assign issues. Instead, we accept the first pull request that comprehensively solves the issue.
Issues labelled with help wanted or first timers only are open for contributions.
Please make sure you read our guidelines for contributing. We prioritize contributors following the instructions in our guide. Join us in our chat room or the forum if you need help contributing - our community will be happy to assist you.
Please also notice that there is a PR open already, and that it's not a simple change, practice projects require to be kept a single unit, and if the code needs to be changed, it's never a single file, but all of them.
Name : Utkarsha Kumbhar College: Cummins college of engineering for women Department: computer Engineering "I would like to work on this issue as it will be my first issue , please can you assign me?"
If you want to contribute read the context of the issue from the comment as pointed out here https://github.com/freeCodeCamp/freeCodeCamp/issues/47456#issuecomment-1282406884
Good day and happy coding
Problem :
Hello! I noticed that the form is submitting even when i selecting "(select one)" option for "How did you hear about us?" question in the dropdown menu.
Solution :
I plan to add some validation like that (select one) option is disabled to select and who is filling the form have to select rest of any option. Otherwise the form can not be submitted.
Some reasons to fix this :
It helps improve the user experience: By adding validation, you can ensure that users select a value from the dropdown menu before they submit the form. This can help prevent errors and improve the overall user experience.
It helps maintain the quality of the code: By adding validation, you can ensure that the code remains consistent and error-free. This can help prevent bugs and improve the overall quality of the codebase.
It helps demonstrate your skills: By adding validation, you can demonstrate your skills as a front-end web developer, including your understanding of HTML forms and JavaScript.
It helps build your portfolio: By contributing to an open source project, you can build your portfolio and showcase your skills to potential employers or clients.
Feedback :
Can you please provide any guidance or feedback on this plan? I'm aiming to make my changes and submit a Pull Request by the end of the week. Thank you!
Is your feature request related to a problem? Please describe.
The registration form currently accepts submissions with both radio buttons unchecked. The Account-Type must be a required parameter otherwise it beats the purpose of having it in the first place.
Describe the solution you'd like
The simplest solution would be to add a checked attribute to any one of the two radio buttons.
Describe alternatives you've considered
Or leave them both unchecked initially, but force the user to check any one of them when they try to submit the form (which I don't know how to do)
Additional context
Here's the link: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-41
Ihave one proposed to solution to completely solve this issue,so shall i proceed to continue?
