Essential front-end development

HTML Elements

Buttons

Buttons that represents an action can be created using the HTML <button> tag. We can use buttons to submit forms, signal clickable actions and attach JavaScript triggers.

Common attributes

We usually leave button attributes to their default values, but sometimes it can be useful to disable them or give them a submit or reset type attribute when used in forms.

Attribute	Description	Required
disabled	whether the button should be disabled	no
type	type of the button (button, submit or reset)	no (defaults to regular button in most cases, but will default to submit button in forms)

Code example

<button>
    Download game
</div>

has the potential of producing the button below (given some styling)

Accessibility

Make buttons as large as your design allows and put sufficient space between them.

Navigation should in general be done through anchor elements, but buttons can be used if the target location is on the same page.

Test yourself

Description

Add a submit type disabled button with the text

Register

as the last element in the form.

Tests

1 You should create a button.
2 Your button element should have a closing tag.
3 Your button element should have the type specified in the description.
4 Your button element should have the text specified in the description.
5 Your button element should be disabled.

<form action="/api/users" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" name="fname" value="Liu"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" name="lname" value="Cixin"><br><br>
</form>

<form action="/api/users" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" name="fname" value="Liu"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" name="lname" value="Cixin"><br><br>
</form>

Editor

Preview

Run tests (ALT+Q)

Reset code

PrevNext