Designers Learn Code: Forms—Button Element

Описание: Designers Learn Code: Forms—Button Element

Although we have discussed how several of the input types create buttons, there is also a button element. We review some of the types of buttons you can create using the input element. In the following code, you will see a demo of an image button, a reset button, and a submit button. We are also showing you the use of the disabled attribute which will turn off a button. The input element is an empty element. This is the first time we are seeing the image element. In order to load a custom image, you use the src attribute to tell the browser where to find the image. We also use the alt attribute to describe the contents of our button for someone using an assistive device. An embedded style displays our image button at an appropriate size. With a reset button, a user can enter a response in our text input field. The reset button will clear it. The submit button becomes greyed out when the button is disabled and is not clickable. Next we look at how the code changes for the button element. If you do not specify the button type, the browser will assume your button is a submit button. Usually it is best practice to always include the type when using the button element. The reason the button element was created was to give developers more flexibility in the design of their buttons. Whatever is in between the button opening tag and the button closing tab becomes part of our button. So this may include an image. It may include longer text than what would be appropriate for the value attribute when using the input element. The button type attribute of “button” option was created to give the developer flexibility on the function of the button as well. And it is meant to be coupled with code, typically javascript, that defines its function. If no function is defined, it has no default behavior and will be clickable but do nothing. The “reset” button type for the button element will also clear values in the input field just like the input element version. In our submit button example, we customized it by adding our button image but also coupled it with text so that the user knows the button is disabled. So you may wonder when it is appropriate to use the button element over the input element. The input element has more cross-browser compatibility. So you may find button is not supported by older browsers. The button element is appropriate when you want to create a custom function or when you may want to create a custom grouping of elements to comprise your button for which the limitations of an input element are too constraining.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.