There’s a special tag for buttons in HTML:
The default look of the
button element is different on different operating systems and in different browsers, but usually it has a border and responds to clicks by changing a background color.
input tag with
type="text" attribute allows users to enter text in a single-line box:
<input type="text" placeholder="Enter your name here...">
Note that the
input element does not have a closing tag.
placeholder is an optional attribute that specifies what text must be shown when the input is empty.
There are other types of input—like
password—that work similarly to
text and provide additional features:
passwordhides user input behind black circles.
<input type="email" placeholder="Enter email..."> <input type="password" placeholder="Enter password...">
To create a multi-line text input field, you need to use the
<textarea placeholder="Enter description..."></textarea>
textarea element has a closing tag.
To add a checkbox control to a prototype, you need the
input tag with the
type="checkbox" attribute and the
<input type="checkbox"> <label>Use font smoothing when available</label>
label is optional, and you can put the text in a
span or a
div instead. But
label comes with a special attribute,
for, that allows to make the text clickable too. Here’s how it works:
- You add the
idattribute to the
inputtag with a value of your choice.
- You add the
forattribute to the
labeltag with the same value.
When the label is clicked, the browser looks for an input with the
id that matches the value in the
for attribute, and if it finds one, it acts like the checkbox was clicked:
The syntax is a little complex, but implementing this feature is usually a necessary step. Most users expect the text to be clickable, because it is clickable in most applications. Also, text has a larger area than a checkbox control, which makes it an easier target.
You can also add the
checked attribute to the input tag if you want the control to be checked by default:
checked attribute doesn’t require a value, so it doesn’t have an equal sign and parentheses.
The implementation of radio buttons is similar to checkbox controls, with the
type attribute set to
<div> <input type="radio" name="options" id="a" checked> <label for="a">Option A<label> </div> <div> <input type="radio" name="options" id="b"> <label for="b">Option B<label> </div> <div> <input type="radio" name="options" id="c"> <label for="c">Option C<label> </div>
Radio buttons require the
name attribute. The radio buttons with the same value in the
name attribute are tied in a group, which allows only one of them to be selected at a time.
One of the radio buttons can be selected by default with the
You can make labels clickable with pairs of the
id and the
for attributes, as described the Checkboxes section above.
To create a dropdown menu, you need the
select element populated with
<select> <option>Free</option> <option>Pro</option> <option>Enterprise</option> </select>
option element has some optional attributes:
selectedmakes the option selected by default.
disableddoesn't allow a user to select an option from the list.
These attributes allow you to create a control that has a placeholder value—one that is shown by default, but cannot be selected by a user:
<select> <option selected disabled>Select an option...</option> <option>Free</option> <option>Pro</option> <option>Enterprise</option> </select>
Don’t forget that you can click Rerun in the bottom right of the embedded CodePen UI to restart the prototype.
Design a form:
- Create a new pen, and use this article as a reference to add form controls to the prototype.
- Wrap controls in
divcontainers to create line breaks.
- Instead of manually typing in tags, like
<textarea></textarea>, enter the name of the tag, like
textareaand press tab on the keyboard. Sometimes this shortcut will add attributes that were not covered in this article. Feel free to either ignore those attributes, or delete them, or find information about them online and try using them.
← Images Intro to CSS →