Sunday, September 14, 2014

Web Development 101 - Button tag



Buttons.

As plain as you have read it, they are buttons.

For formality sake, what is the definition of an HTML button?

The button tag represents the clickable buttons in our webpage (though we may also want to take advantage of the <input type="submit" /> or <input type="button" /> tags which will be covered sooner on this series).

Without further ado, this is what a standard button would look like.



which has the following code:

<button>TRY TO CLICK ME</button>

Now, on your text editor, just type the codes above and save it as: button.html

Now, navigate to your saved html file and open it on your browser. You should have a page with a button same looking as the one created above

*Note that nothing happens yet when we clicked that button. As we move onwards, we will be taking advantage of its attributes in order to add life to this boring button. Speaking of attributes, below are some of the attributes of the <button> tag.
  • name
  • id
  • disabled
  • form (HTML5)
  • formaction (HTML5)
  • formenctype (HTML5)
Please get a hold of yourself and pardon for mentioning the HTML5 thing on this part. A button is just the same with other elements which share common attributes: id,class,name. However, to kickoff something new in our readings, I added HTML5 attributes. From the very beginning of this series, we have been working with HTML4 (please do some google :) I'll be covering this part on a different article.) Today, with the existence of HTML5, new attributes and even new tags are added which made our webpages more dynamic and simpler to achieve. You might be curious of what is HTML5 anyway.

* If you have any corrections, or comments or suggestions or violent reactions, please please please feel free to raise it. I'll be very glad to address it the soonest possible. Happy coding!


No comments:

Post a Comment