SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a reason to use the value attribute for the button element?

    The button element creates a button for you. Pretty straightforward.

    Now you'd have to use the type attribute to determine the type of button.

    The values can be submit, reset or button(this basically does nothing, you'd need a script to make it do something onclick).

    Now the name attribute is to give the botton control a name so that it can be paired with a value and sent to the server. When we collect the data at the server we can know which button was pressed.

    The value attribute is a bit confusing. Why i'm asking this is because i don't know if the text in between the <button></button> element is the value?

    Example:

    Code HTML4Strict:
    <form action="voting.php" method="get">
    		<fieldset>
    			<legend>Vote for a horrible future</legend>
    				<button type="submit" name="buttonSubmitVote" value="UMNO">Vote for UMNO</button>
    				<button type="submit" name="buttonSubmitVote" value="MCA">Vote for MCA</button>
    				<button type="submot" name="buttonSubmitVote" value="MIC">Vote for MIC</button>
     
    				<br /><br />
     
    				<button type="reset" name="buttonReset" value="Clear this form ">Clear this form</button>
    		</fieldset>
    	</form>

    Notice that the last button, which is a reset button, i've included a value of "Clear this form" and the text in between <button></button> is "Clear this form". Is it necessary to include the value attribute for this particular "reset" button?

    Please do point out my mistakes or if i'm totally understanding it the wrong way.

    Thank you
    Jaysone

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,607
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You only really need to use the bitton tag where you want to use HTML to style the appearance of the button content (bold text for part of the content etc). Where you just want plain text it is easier to use the input tag with the same three types where the value to display on the button and the value to be passed when the button is pressed are both assigned via the value attribute. With the button tag the value attribute is what gets passed in the name field from the form while the content between the open and close tags is the HTML to define the button appearance. The third way if you want to use an image for the submission is to use an input tag with type="image" but that doesn't allow you to pass a value as the x and y co ordinates of where in the image was clicked are passed instead.
    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 Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The third way if you want to use an image for the submission is to use an input tag with type="image" but that doesn't allow you to pass a value as the x and y co ordinates of where in the image was clicked are passed instead.
    So if i used input type image and if someone clicked on it, the information that is being sent is the X and Y coordinates of where the user clicked on the image?

    What is the button actually doing? Its not submitting, its not resetting, is a button that is an image, so if i wanted the input type of image to do something, do i need to add a script at the onclick attribute?

    Thank you so much for your help
    Jaysone

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,607
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    <input type="image"> is the same as <input type="submit"> but uses an image defined by other attributes of the tag in place of the value text - both provide the submit function but the image passes the coordinates of where was clicked as the values of the field while the submit button passes the value attribute. Similarly the <button type="submit"> will pass the value attribute when it submits the form. The difference with using <button> rather than <input> for your buttons is so that you can apply HTML to the text to appear in the button.

    <input type="submit" value="click here"> is a plain text button

    <button type="submit">click <strong>here</strong></button> produces the same button but the second word will have strong emphasis applied usually by making it bold.

    If you don't specify a name attribute in the field then that field doesn't get passed with the form. If you do specify a name then the value gets passed for type="submit" and the x and y get passed for type="image".
    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="^$">

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you don't specify a name attribute in the field then that field doesn't get passed with the form. If you do specify a name then the value gets passed for type="submit" and the x and y get passed for type="image".
    Now i get it..awesome

    <button type="image" or <input type="image" will submit the information in the form but the values of the button or input controls i mentioned above will not send the values if the name is not set.

    If a name is set, the button will send what is in the value attribute and the image will send X and Y coordinates of where the user clicked on the image.

    Thank you for taking the time to explain this to my slow brain.

    Cheers!
    Jaysone


Tags for this Thread

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
  •