Search within TutorialsPark

HTML Forms Buttons


Buttons allow you to submit forms, they can also be configured for multiple roles.


What Button?.

1.Buttons are used extensively on all forms to submit the form filled on client end to server end.

2.There are Three types of button, the way to switch to each type is to use type attribute.By altering the value of type attribute you can invoke all different modes of button.
See the table below..

Type attribute value for button

Value Usage
Submit The button is used to submit the input.
Reset This value will reset all input fields of the form.
Button Value specifies no specific usage.

Submit Button

What's your email :

1. The attribute Submit enables you to create a submit button, which can be used to submit the form.

2. The button element allows you have a lot more control over the appearance and other elements inside the button.

Note: This is different than input element button.

Example Submit button:

Give it a TRY! »


Reset Button

1. Reset Button is used to reset the input fields to initial state(i.e when the page was loaded).

Note: No other attributes are available for this button.

Example Reset Button.

Give it a TRY! »

Hidden Button.

1. Hidden button allows you to combine text and image together on the button.

2. Use input type="hidden" to create a hidden button.While adding image to button do specifying the width and height of the image.

Hidden Button Example.

Give it a TRY! »




Image Button.

Which University?

1. If you wish to have an image as your submit button instead of a standard submit button use type="image" in input attribute.

2. This feature allows you to make your submit button look attractive.But a lot of different image buttons may increase the load time of your webpage.

3. The inputs inside password are Disquised as astericks or bullets-as a security measure.

Image Button Example.

Give it a TRY! »




Form Fieldset and Label.


Label.

1. A label element is used to create an association between the name and the form control. It provides related context for form elements.

2. The forattribute specifies the label to which the form control belongs to.The id and for attribute should have the same value to be associated.

Label Example.

Give it a TRY! »


Fieldsets.

1. Fieldsets allow you to group different input fields into a Visual Group making the form filling exercise a bit easier.

2. Use the element <fieldset>, and encapsulate within it all the elements you want to group together.

Fieldset Example.

Give it a TRY! »




Legend.

Your name and email

1. The legend element is used to add caption to the fieldset groups.Also,The <legend> should be the first element within the <fieldset>.

Legend Example.

Give it a TRY! »






Related Examples

Related Tags