Utilising Button in HTML

The button is a very basic HTML element, it plays a significant role in designing websites. Buttons can be anywhere in your webpage but, make sure you use it with a purpose.

Buttons can be created and used in many ways. It is important to note that better styles give a better user experience. So, make sure you give it a nicer look. To best utilise buttons first, you should know how to create it. In HTML there are various methods to create buttons.

Here is the basic button syntax:

HELLO WORLD!

Here we can see there are opening and closing tags of a button and we can write our text of interest inside it. We all know that when we click on any buttons it will create some actions on the website. But In the above case, it does not create any action on the website like you would clicking a link(<a>Hai Coding Ninjas !</a>).

The button element cannot do that. So, we need to include it in something called “FORMS”. The button is a form element, therefore, it is very necessary to include button element inside form element to create clickable buttons. Here you can even create buttons using <input> tag by setting its type attribute to button.

Type	Description
Submit	It creates the button which automatically submits the form or document.
Reset	It creates the button which automatically resets the form control to their initial values.
Button	It creates the button which is used to trigger the client side script when the user clicks the button.
Image	It creates the clickable button that we can use the image as a background of the button.

In html button tag is mainly used to create buttons within the html form. but you can still use <input> tags to create same button.

Example:

<!DOCTYPE html>

<html>

<head>

<title>button</title>

</head>

<body>

<form>

<input type=”button” name=”OK” >Click Here </input>

</form>

</body>

</html>

The above example shows how to create buttons using form element.

From above points we can summarise that:

HTML element creates a clickable button, which can be used anywhere on the web page.
The look and feel of buttons can be changed using CSS.
HTML is easier to style than since it accepts not only text value.
We always need to include button element inside form element to clickable functionality.
Always specify the type attribute for an element, to tell browsers what type of button it is.

Utilisation Of Buttons: To add functionality to any buttons its very necessary to use JavaScript. Javascript is a scripting language which helps our websites to work. Javascript plays a vital role in developing any website. When Anybody wants to create a clickable button the below code shows how to do it.

Example:
<button onclick=”alert(‘Hello World!’)”>Coding

Ninjas😊</button>

When the user clicks on the button that is created now the click event occurs. Click is an event attribute in Javascript. There are many event attributes which makes our lives easy for developing. The onclick JavaScript event occurs when the user clicks on an element. It runs a specified line of code when you click an HTML object that has the onclick attribute. The button tag doesn’t have required attributes, however, I recommend always use the type=” button” attribute, if the tag used as an ordinary button.

Attributes for buttons:

Autofocus: For autofocus, the value field will be autofocus and it specifies that the button should receive focus after loading the page.
Disabled: For disabled, the value field will be disabled and deactivates the button(Used when the button should become active after performing some action).
Form: For Form, the Value field will be form_id and 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.
Form action: For form action, the value field will be URL and defines the address, where the form data will be sent after clicking on the button(used only for the buttons with type=” submit” attribute)
Value: For value, the value field will be text and defines the button value.
Type: For Type, if the value field is the default it defines the button type or if the value field is reset then it defines the button, that clears the form from the input data or if the value field is submitted, for sending form data.
Name: For Name, the value field will be named and defines the button name.
Formtarget: For formtarget, the value field can be blank, default, self, parent and top.for blank the response opens in a new window, for self the response opens in the current window, for parent the response opens in the parent frame, for top the response opens in the full-width window, for default it specifies, where the response will be shown after the form is submitted(only for type=” submit”)
Formnovalidate: For formnovalidate, the value field will be formnovalidate and specifies that the form-data should not be validated on submission(only for type=” submit”)
Formmethod: For formmethod, the value field will be a default, get and post, for default it defines the method of the HTTP request, which will be used when a form is submitted, for post the browser communicates with the server and sends the data for processing, forget it passes the form data in the address bar(name=value)which are added to the URL of the page.

Using CSS Styles

You can apply CSS styles to button tag to change the appearance of the button, its size, colour, text font, and so on.

Example of button with CSS styles:

< !DOCTYPE html>
input text
Ordinary button Ordinary button Red button button with proper styles

Common properties to alter the visual weight/emphasis/size of text in tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalisation.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style

Coloring text in <button> tag

CSS colour property describes the colour of the text content and text decorations.
CSS background-colour property sets the background colour of an element.

Text layout styles for <button> tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <button> tag:

CSS text-shadow property adds a shadow to text.
CSS text-align-last property sets the alignment of the last line of the text.
CSS line-height property specifies the height of a line.
CSS letter-spacing property defines the spaces between letters/characters in a text.
CSS word-spacing property sets the spacing between words.

Conclusions:

Buttons are very important in building a website so it is very important to know about them.
Use material design website to build awesome buttons, apply necessary styles to make it look nicer.

By Bhargavi B M