SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The name for a form field identifies the variable on the server that the value will be loaded into when the form is submitted.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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 ...


  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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
    )

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Christa Joe is a keen blogger and enjoys reading and writing
    about the recent technology. She's also a freelance writer and
    write for various software companies' blogs.
    Follow her at her twitter or on her Google+ profile.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nail Yener View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •