Menu icon Foundation
Using Button to Submit Form

I've coded a button group to either Submit or Reset a form. It seems to work at least on Mac in Safari & Chrome, but I'm concerned that my coding of it might not be quite correct. Have I set this up correctly?

Thought perhaps my approach might not be up to code, but then again, W3Schools seems to approve.

Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.

Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.

Note: If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.

    <ul class="button-group">
    <li><button class="small button" name="Send" type="submit">SEND IN YOUR RESERVATION</a></li>
    <li><button class="small button [success secondary alert]" name="reset" input type="reset">CLEAR FORM</a></li>
  </ul>        

         

buttonformsubmitreset

I've coded a button group to either Submit or Reset a form. It seems to work at least on Mac in Safari & Chrome, but I'm concerned that my coding of it might not be quite correct. Have I set this up correctly?

Thought perhaps my approach might not be up to code, but then again, W3Schools seems to approve.

Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.

Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.

Note: If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.

    <ul class="button-group">
    <li><button class="small button" name="Send" type="submit">SEND IN YOUR RESERVATION</a></li>
    <li><button class="small button [success secondary alert]" name="reset" input type="reset">CLEAR FORM</a></li>
  </ul>        

         
Marc McGee over 5 years ago

After a bit more review, w3Schools HTML validator is claiming that input is not allowed with button. Also needed to change the closing a tag to a closing button tag
```HTML

SEND IN YOUR RESERVATION
CLEAR FORM

Marc McGee over 5 years ago

After a bit more review, w3Schools HTML validator is claiming that input is not allowed with button. Also needed to change the closing a tag to a closing button tag.

  <ul class="button-group">
    <li><button class="small button" name="Send" type="submit">SEND IN YOUR RESERVATION</button></li>
    <li><button class="small button [success secondary alert]" name="reset" type="reset">CLEAR FORM</button></li>
  </ul>

Adam Ransome over 5 years ago

Bit confused with what you've done here. You're giving the button a type of submit/reset outside of a form, which doesn't really make sense. You can place a button tag outside of a form, but then it's more of a semantic tag than a functioning one. It's basically the same as an input tag, but buttons can have images/content inside.

Lyn over 5 years ago

Hi there,

@Adam : Maybe this is a part of the form, which then would be fine.

@Marc : If it is part of a form, then it all seems correct to me.

Regards,

Lyn.

Marc McGee over 5 years ago

It's part of a form, just didn't include all of the code in an effort to keep it simple. Thanks for the confirmation.