Coding for Beginners: Forms #8— Buttons vs. Inputs

Pubblicato il: 16 agosto 2022
sul canale di: Designers Learn Code

Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...

The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode

------

Although we have discussed how several of the input types create buttons, there is also a button element.

Let's 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 image input. 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.

Our next example, is a reset button. A user can enter a response in our text input field. The reset button will clear it. And finally we see a submit input. Although it is greyed out because the button is disabled and not clickable.

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 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 will also clear values in the input field just like the input reset button.

In our submit button example, you see we have 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.

#HTML #CSS #coding #web #accessibility #buttonelement #button #buttons #inputelement #buttonsvsinputs #whentouseabuttonoraninput #htmlforms #forms #form #input #type #codinglife #webdesign #designerslearncode #thedailycodesnippet #dailycodesnippet #codingforbeginners #htmlelements #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse

In questa pagina del sito puoi guardare il video online Coding for Beginners: Forms #8— Buttons vs. Inputs della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Designers Learn Code 16 agosto 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 13 volte e gli è piaciuto 0 spettatori. Buona visione!

190