Designers Learn Code: Forms—The Label Element

Designers Learn Code: Forms—The Label Element

Looking at the most commonly used form inputs, we will start with the type attribute which allows a single-line input of text. With forms, we also need to introduce the label element. It attaches information so that the user knows what data is sought from them. The label element is also added for accessibility. A screenreader will read out the label when the user focuses on the input element. In addition, users who have difficulty clicking in a small region will be assisted by the label element because it can toggle checkboxes and radio buttons when the text is clicked. The for attribute in the label element is used to bind the label to the id attribute of the input element. The name attribute for the input element is also used for identification purposes. In this case, it is a way for that input to be identified for javascript actions and for the form to pass its data to the collection method by which the data is gathered. Each input field must have a name attribute for the data to be sent.

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: get.designerslearncode.com/jumpstart

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.