Purpose of Name in Form Element?

What is the purpose of "Name" below...

HTML Code:

---

        <!-- Submit Form -->
        <input type="submit" name="changeAnswers" class="button" value="Change Answers"/>

---

Is it just a "hook" for styling?

Or does it serve some important purpose?

Does it have anything to do with what happens when the Form is submitted?

I'm confused... :-/


Debbie

The name for a form field identifies the variable on the server that the value will be loaded into when the form is submitted.

Quote:

---

Originally Posted by felgall

The name for a form field identifies the variable on the server that the value will be loaded into when the form is submitted.

---

And for a Submit button that means what?! :-/


Debbie

Quote:

---

Originally Posted by DoubleDee

And for a Submit button that means what?

---

Same thing. You may, for example, want to confirm that the form has been submitted, and you check by referencing the name value.

E.g.

PHP Code:

---

if ($_POST["changeAnswers"]) {
   ... process form ...
} 


---

If you have a form with method="post", each name attribute forms part of an array that makes it possible to retrieve the content of each input. The submit button is also part of the array. (I guess by clicking the button the user is entering some information, so to speak—an instruction to send.)

Even if there's no form processing code, you can add this to the page (say below the form):

PHP Code:

---

<pre>
<?php if ($_POST) { print_r($_POST); } ?> 
</pre>

---

If you then fill in the form and submit, you'll see the submit input is also part of the array. E.g.

Code:

---

Array
(
    [name] => Debbie
    [email] => myemailname@gmail.com
    [comments] => This is the message I typed.
    [changeAnswers] => Send
)

---

The Name field identifies the attribute to which the value in textbox will be submitted, after the submission event has happened at client's side and value reaches the server.

I think the respondents so far completely missed your question... See.. you can have multiple submits... for example:

Code:

---

<input type="submit" name="profileSubmit" value="Add me to profile and newsletters" />
<input type="submit" name="profileSubmit" value="Add just my profile" />

---

When you click on the appropriate submit, the value of the one you clicked on will be passed.

Code:

---

<?php
echo 'You clicked on "',$_request['profileSubmit'],'"<br />';
?>

---

Will echo the value of the one you clicked on!

You can also use different names with the same value... though not as useful.

Code:

---

<input type="submit" name="searchSite" value="Search" />
<input type="submit" name="searchWeb" value="Search" />

---

Only the submit you click on will have it's value sent.

Code:

---

<?php
  if (!empty($_request['searchSite'])) {
    // they clicked on searchSite
  } else if (!empty($_request['searchWeb'])) {
  // they clicked on searchWeb
  }
?>

---

using multiple names is often more convenient since you can then make the values anything you want, and only have to check for 'empty'.

Code:

---

<input type="submit" name="searchSite" value="Search Site" />
<input type="submit" name="searchWeb" value="Search Web" />

---

That would also work with the same !empty check as above!

A LOT of allegedly experienced web developers are blissfully unaware of this powerful technique. Not too surprising though given the number of people who can't even be bothered to use LABEL, FOR, FIELDSET, LEGEND, and do idiotic nonsense like wrapping form elements in tables or lists.

Funny since the same applies to radio buttons....

Code:

---

<fieldset>
  <legend>What is your favorite web programming language?</legend>
  <label for="favoritePHP">PHP</label>
  <input type="radio" id="favoritePHP" name="favoriteLanguage" value="php" />
  <br />
  <label for="favoriteASP">ASP</label>
  <input type="radio" id="favoriteASP" name="favoriteLanguage" value="asp" />
  <br />
  <label for="favoriteJAVA">JAVA</label>
  <input type="radio" id="favoriteJAVA" name="favoriteLanguage" value="java" />
  <br />
  <label for="favoriteJS">JAVASCRIPT</label>
  <input type="radio" id="favoriteJS" name="favoriteLanguage" value="js" />
  <br />
  <label for="favoritePerl">PERL</label>
  <input type="radio" id="favoritePerl" name="favoriteLanguage" value="perl" />
  <br />
  <label for="favoritePYTHON">PYTHON</label>
  <input type="radio" id="favoritePYTHON" name="favoriteLanguage" value="python" />
  <br />
  <label for="favoriteOther">OTHER</label>
  <input type="radio" id="favoriteOther" name="favoriteLanguage" value="other" />
</fieldset>

---

type="submit" and type="image" work pretty much the exact same way!

ID is for the FOR attribute to point at and for direct styling/script access. Name is what gets sent to the server as the result index, value being the result. In the case of radio buttons, submits, and images, if you have multiple elements with the same name the one you clicked on/focused last is the one that has it's value sent.

About the only element you'll see people putting NAME on for no good reason is FORM; I suspect this is a holdover from Netscape 4 era scripting -- today that's just stupid/pointless.

Also, if there's only one submit method, then you are right, there's no legitimate reason to slap NAME on it.

DeathShadow,

So in my Q&A Form I have this...

HTML Code:

---

        <!-- Submit Form -->
        <input type="submit" name="changeAnswers" class="button" value="Change Answers"/>
        <input type="reset" name="changeAnswers" class="button" id="reset" value="Cancel" />

---

It seems like "Cancel" works all by itself?!

And everything else seems to be working okay, so far...

Would you make any changes or recommendations?


Debbie

RESET is NOT a SUBMIT! There's no reason to put name on a type="reset" -- reset is done client side, not server side; there is also no real reason to put an ID on it since it's self labelling by value, just like a input.

It's not even a true field since it's value isn't even sent server side... It's why I'll often put TEXT, CHECKBOX or RADIO in a fieldset, but HIDDEN, SUBMIT, RESET and sometimes IMAGE in a separate DIV after the FIELDSET... they aren't data fields. At most type="submit" or type="image" may be a list of choices if you have more than one of them.

Really if that's the only submit, it doesn't need a NAME either. I probably also wouldn't have classes on them -- but again that's because I often do:

Code:

---

<form
        action="favoriteQuestionnaire"
        method="post"
        id="languageQuestion"
>

        <fieldset>
                <legend>
                        What is your favorite web programming language?
                </legend>
                <label for="favoritePHP">PHP</label>
                <input type="radio" id="favoritePHP" name="favoriteLanguage" value="php" />
                <br />
                <label for="favoriteASP">ASP</label>
                <input type="radio" id="favoriteASP" name="favoriteLanguage" value="asp" />
                <br />
                <label for="favoriteJAVA">JAVA</label>
                <input type="radio" id="favoriteJAVA" name="favoriteLanguage" value="java" />
                <br />
                <label for="favoriteJS">JAVASCRIPT</label>
                <input type="radio" id="favoriteJS" name="favoriteLanguage" value="js" />
                <br />
                <label for="favoritePerl">PERL</label>
                <input type="radio" id="favoritePerl" name="favoriteLanguage" value="perl" />
                <br />
                <label for="favoritePYTHON">PYTHON</label>
                <input type="radio" id="favoritePYTHON" name="favoriteLanguage" value="python" />
                <br />
                <label for="favoriteOther">OTHER</label>
                <input type="radio" id="favoriteOther" name="favoriteLanguage" value="other" />
        </fieldset>
       
        <div id="submitsAndHiddens">
                <input type="submit" value="Submit" />
                <input type="reset" value="Reset" />
                <input type="hidden" name="validationHash" value="SomeAutoGeneratedRandomHash" />
        </div>
       
</form>

---

That way I can use the one parent ID for the 'visible' form elements instead of putting a class on each of them.

Semantic markup for a form -- there it is. With all of the proper and appropriate attributes and tags. You start needing extra span, extra DIV, extra names and titles all over the place, you are probably doing something wrong.

I wouldn't use the same name for any form elements. Even if there is no chance for server-side confliction, why not use unique names for each form element? Or, is there cases that multiple form elements should take the same name, that I can't think of?

Quote:

---

Originally Posted by Nail Yener

I wouldn't use the same name for any form elements. Even if there is no chance for server-side confliction, why not use unique names for each form element? Or, is there cases that multiple form elements should take the same name, that I can't think of?

---

When they are choices -- like submits or radio buttons. Look at my example... they all get the same name "favoriteLanguage". Since you can only have one radio button of the same name selected at a time (the entire POINT of radio buttons instead of checkboxes), you read them server side:

$_REQUEST['favoriteLanguage']

... and that variable will include which of the radio buttons is selected. That's part of why FOR points at ID and not NAME... It's also why the Nyetscape 4 method of accessing form elements in javascript by the name is/was broken and failed to be adopted.

Same for submits -- you have multiple submits with the same name, only the value of the one you clicked on gets sent to the server.

Try this code:

Code:

---

<?php
if (isset($_POST['fromForm'])) {
        if (
                !isset($_POST['favoriteLanguage']) ||
                empty($_POST['favoriteLanguage'])
        ) {
                echo '
                        You didn\'t select a favorite langauge<br />';
        } else {
                echo '
                        You selected ',$_POST['favoriteLanguage'],' as your favorite language<br />';
        }
        echo '
                Using the "',$_POST['fromForm'],'" submit<br />
                <br />
        ';
}

echo '<form
        action="test.php"
        method="post"
        id="languageQuestion"
>

        <fieldset>
                <legend>
                        What is your favorite web programming language?
                </legend>
                <label for="favoritePHP">PHP</label>
                <input type="radio" id="favoritePHP" name="favoriteLanguage" value="php" />
                <br />
                <label for="favoriteASP">ASP</label>
                <input type="radio" id="favoriteASP" name="favoriteLanguage" value="asp" />
                <br />
                <label for="favoriteJAVA">JAVA</label>
                <input type="radio" id="favoriteJAVA" name="favoriteLanguage" value="java" />
                <br />
                <label for="favoriteJS">JAVASCRIPT</label>
                <input type="radio" id="favoriteJS" name="favoriteLanguage" value="js" />
                <br />
                <label for="favoritePerl">PERL</label>
                <input type="radio" id="favoritePerl" name="favoriteLanguage" value="perl" />
                <br />
                <label for="favoritePYTHON">PYTHON</label>
                <input type="radio" id="favoritePYTHON" name="favoriteLanguage" value="python" />
                <br />
                <label for="favoriteOther">OTHER</label>
                <input type="radio" id="favoriteOther" name="favoriteLanguage" value="other" />
        </fieldset>
       
        <div id="submitsAndHiddens">
                <input type="submit" name="fromForm" value="Ok" />
                <input type="submit" name="fromForm" value="Ok and Show on Profile" />
                <input type="reset" value="Reset" />
                <input type="hidden" name="validationHash" value="SomeAutoGeneratedRandomHash" />
        </div>
       
</form>';

?>

---

Illustrates exactly why you'd have more than one element with the same name; again it's the entire POINT of radio buttons and why NAME and ID don't do the same thing in forms.