Confused in form element in html

Question

In this form element code in html, many attributes is used and confused me😢.

<input type="radio" name="gender" value="male" /> Male <br />
<input type="radio" name="gender" value="female" /> Female <br />

What i understand, input is a tag which allows to take user data.

Type is a attribute that specifies which type of input is taken.

I only understand these above two things and don't know what is name and value and why this is used?

Please if anyone interested in answer my question than please.

Thanks for your help.🙃

Answer 1

This should help:

https://www.sololearn.com/Discuss/1471552/?ref=app

I will work on c&p-ing my response from the direct messages to you.

Answer 2

There are a couple of ways to think about name and value. The first is that if the user clicks submit and that creates a record, name and value are potential properties (data points) for that record (piece of data). The second is that value can function as a sort of default value (for lack of a better term) if the user doesn't explicitly fill out that item and name can function as a grouping mechanism for inputs that belong together thematically.

In the example you provided, if you were to leave out the name attribute on one or both of the inputs, or have them be different (e. g. name="gender" for one and name="sex" for the other), then the radio would not work together. You can try this in the Code Playground.

You probably couldn't test out the "value" very well in the Code Playground because it's usually something you'd try out if you had access to the server (back end).

But yes, it can be confusing because the specific behavior of "name" differs depending on what kind of element you're applying it to.