The document discusses the <button> tag in HTML. It defines the <button> tag as an inline element used to create clickable buttons. It describes the syntax, types of buttons, attributes of the <button> tag, and provides examples of using the <button> tag and styling buttons with CSS. The document is meant as a reference for a Web Technology Lab class.

1. B U T T O N
SUNNYKUMARSAH
ROLLNUMBER:31401219002
SUBJECT:WEBTECHNOLOGYLAB
SEMESTER:3rd SEM2nd YEAR
SUB-CODE:BCAN381
TechnoIndiaCollegeOfTechnology
5/21/2021
Sunny Kumar Sah
1

2. WebTechnologyLab
<button>
TAG & It’s ATTRIBUTES
B U T T O N
5/21/2021
Sunny Kumar Sah
2

3. CONTENT
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 13
Slide 14
Slide 15
Slide 16
 What is button tag?
 Syntax and Example of button tag
 <input type= “submit”> vs <button type= “submit”>
 Types of button tag
 Example.
 Attributes of button tag.
 Button tag in CSS
 Browser supports.
 Conclusion.
 Reference
5/21/2021
Sunny Kumar Sah
3

4. Whatis<button>Tag?
The<button>tagisaninlineelementusedtocreateaclickablebutton.Itisusefulwhenwe
wanttoallowuserstosubmitinformationorperformasearchonourwebsite.Insidea
<button>elementyoucanputtext(andtagslike<i>,<strong>,<br>,<img>,etc.).Thisisnot
possiblewithabuttoncreatedwiththe<input>element!
Note: Alwaysspecifythetypeattributefora<button>element,totellbrowsers
whattypeofbuttonitis.
Back to contents
5/21/2021
Sunny Kumar Sah
4

5. Syntax and Example
The<button>tagcomesinpairs.Thecontentiswrittenbetweentheopening(<button>)and
closing(</button>)tags.
5/21/2021
Sunny Kumar Sah
5
SOURCE CODE
OUTPUT
Back to contents
Syntax:
<buttontype=“button”>content</button>

6. <input type= “submit”> vs <button type= “submit”>
5/21/2021
Sunny Kumar Sah
6
Both<buttontype=“submit”>and<inputtype=“submit”>displaysasbuttonsandthecausetheformdata
tobesubmittedtotheserver.
Thedifferenceisthat<button>tagcanhavecontent,whereas<input>tagcannot(itisalsoanull
element).Whilethebutton-textofan<input>canbespecified,youcannotaddmark-uptothetextor
insertapicture.So<button>hasawiderarrayofdisplayoptions.
Back to contents

7. Typesof<button>Tag.
Therearethreetypesofbuttons:
• submit—Submitsthecurrentformdata.(Thisisdefault.)
• reset—Resetsdatainthecurrentform.
• button—Justabutton.Itseffectsmustbecontrolledbysomething
else(thatis,withJavaScript).
5/21/2021
Sunny Kumar Sah
7
Back to contents

8. Example
5/21/2021
Sunny Kumar Sah
8
SOURCE CODE
OUTPUT
Back to contents

9. ATTRIBUTES
The<button>tagdoesn’thaverequiredattributes;however,werecommendalwaysusethe
type=”button”attribute,ifthetagusedasanordinarybutton.
Attributes Value Description
autofocus
<button type=“button" autofocus>
Autofocus Specifies that the button should receive focus after loading the page.
disabled
<button disabled>
Disabled Deactivatesthe button. (Used when the button should become active
after performing some action.)
form
<button form=“form_id”>
form-id Specifies one or more forms the button belongs to. If the button has
multiple forms, then their identifiers (form-id) must be separated by
spaces.
formaction
<button type="submit" formaction="URL">
URL Defines the address, where the form data will be sent after clicking on
the button. (Used only for the buttons with the type="submit"
attribute).
5/21/2021
Sunny Kumar Sah
9
Back to contents

10. Attributes Value Description
formenctype
<button type="submit"
formenctype="value">
Defines how the form-data should be encoded when a form
is submitted. (Used only for type="submit").
application/x-www-form- All symbols are encoded before a form is submitted
(default value).
urlencoded Symbols are not encoded.
multipart/form-data Spaces are being replaced by the sign "+", but symbols
aren’t encoded.
text/plain
5/21/2021
Sunny Kumar Sah
10
Back to contents

11. Attribute Value Description
formmethod
<button type="submit"
formmethod="get|post">
Defines the method of the HTTP request, which will be used when a
form is submitted (only for type="submit").
get Passes the form data in the address bar ("name = value"), which are
added to the URL of the page after the question mark and are separated
by an ampersand (&).
(http://example.ru/doc/?name=Ivan&password=vanya)
post The browser communicates with the server and sends the data for
processing.
formnovalidate
<button type="submit"formnovalidate>
formnovalidate Specifies that the form-data should not be validated on submission (only
for type="submit").
formtarget
<button type="submit"
formtarget="_blank|_self|_parent|_t
op|framename">
Specifies that the form-data should not be validated on submission (only
for type="submit").
Blank Opens the response in a new window.
Self Opens the response in the current window.
Parent Opens the response in the parent frame.
top Opens the response in the full width window.
5/21/2021
Sunny Kumar Sah
11
Back to contents

12. Attributes Value Description
Name
<button name="name">
name Define the button name.
type
<button type="button|submit|reset">
Defines the button type.
Button Ordinary button.
Reset Button, that clearsthe form from the input data.
Submit Button for sending form data.
Value
<button type="button|submit|reset">
Text Defines the button value.
The <button> tag also supports the Global Attributes and the Event Attributes.
5/21/2021
Sunny Kumar Sah
12
Back to contents

13. EXAMPLEUSINGCSS
5/21/2021
Sunny Kumar Sah
13
OUTPUT
Back to contents

14. Browser support
5/21/2021
Sunny Kumar Sah
14
Chrome Internet explore Mozilla Firefox Safari Opera
Back to contents

15. Conclusion
5/21/2021
Sunny Kumar Sah
15
1. The <button> tag always works within the <body> tag .
2. We have to always specify the type attribute for a <button> element ,to tell browsers what type of button
it is .
3. The< button> tag also supports the Global Attributes in HTML.
4. The< button> tag also supports the Event Attributes in HTML.
5. By default, HTML buttons are presented in a style resembling the platform the user runs on ,but we can
change button’s appearance with CSS.
Back to contents

16. REFERENCES
 www.w3schools.com
 www.w3docs.com
 www.tutorialspoint.com
 www.javatpoint.com
5/21/2021
Sunny Kumar Sah
16
Back to contents

17. THANK YOU
5/21/2021
Sunny Kumar Sah
17
Back to contents