My Form Which I made with scratch!

Code Feedback
1

Hey Every One, kinldy pay your attention on my project please.

And please review this , and feel free to tell me my mistake, I’m ready to see what
improvements I can make

Link :point_right: https://codepen.io/_ruchi_kumari/pen/zYVjgQP

Thanks In advance For your time & support :partying_face:

1 Like
2

It looks good but it is very similar to the sample project.

1 Like
3

Nice, I like it!:slight_smile:
There is a slight problem with the radio buttons though- seems like there’s something wrong with the name attribute in the line 33

1 Like
4

Hi @be_happy

  • The option elements need value attributes, or when the form is submitted the selection(s) may not be sent.
  • the textbox is very small
  • the submit is a bit large

I found a few typos in the attribute property:

            <option vlaue="2">Student</option>
            <option vlaue="6">Other</option>
            <option vlaue="6">Other</option>

Found an attribute value without an attribute property:

<input id="definitely" value="definitely" type="radio" name="radio" radio-button"  class= "remove" checked> Definitely

id property values cannot contain white space:

        <label for="not sure"><input type="radio" name="radio-button" value="not sure" class=
        "remove" id="not sure" name="radio"> Not sure</label>

Best wishes on your coding journery

1 Like
5

Thank You all of you From the bottom of my heart :innocent: .

I will change my code and will update the new one.

1 Like
6

Can You Please elaborate Your Point of view.

I really want to work on it, what should I need to improve ?

If possible please suggest me some resources so that I can make accordingly.

Thanks for your suggestion.

7

Hi @be_happy,
I checked the project and it looks great. You would be surprised to see mine, bcz it looks the same as you in terms of design with a slight difference in the background. Just some small tips:

  1. You can remove the outline of the input elements so that when a user clicks on the input field, there isn’t a border shown around it. You can of course add borders if you want.
  2. You can add a space or two before your placeholder texts so that they don’t stick to the left of the input element.

Take a look at these two and that’s it, just my personal view though, you can keep it this way if you want to. The rest has been mentioned by others above.
Overall, you’ve done a great job. I hope to see more of your projects. Good luck!

1 Like
8

Please All of you find my updated Code.

:point_right: https://codepen.io/_ruchi_kumari/pen/zYVjgQP
Now tell me does it still require any updation ?

Your all Opinions are welcomed :partying_face:

9

It looks good. Did you try the things I mentioned?
Also, I think the border radius shld be a little low, at least 10px.
What do you think?
Other than that, everything looks good.

1 Like
10

Yes , I tried to remove the input element border , I removed to border property too.

But I was anable to do that.

But I will definitely less it’s radius too.

Thanks for your assitance :partying_face: .

11

The form looks amazing.

1 Like
12

To remove the outline you just set the outline:none; in the style of that input.
Im glad to help.
Happy coding!

1 Like
13

Final Result.

:point_right: https://codepen.io/_ruchi_kumari/pen/zYVjgQP

Hope You all like this :partying_face:

And special thanks to all of you !!

Happy Coding !!

1 Like
14

Looks beautiful, fellow coder. Just one suggestion: do you see how your form is rather shifted to the right? To center it, change your margin on your form.

On line 27:

margin: 20px 20px 30px 200px;

Try this:

margin: auto;

Let me know what you think.

Nicolas

1 Like
15

Thanks Nicolas I will definitely do that too.

1 Like
16

I’m not talking about the code itself but rather the contents of the form.
new image

Other than that it looks really good, in fact it looks a lot better than mine.

1 Like
17

Thanks for your point of view. I will definitely make another and do practice.