Рет қаралды 1,689
► Forms allow us to collect information through user inputs. These include fields for entering text and elements we can click. Such as buttons, checkboxes, and dropdown menus that allow us to choose from a series of options.
There are many things that we can do with forms. They are an essential part of any website and one of the most important web concepts to learn. Google search is a form, Logging in to Facebook and Twitter is done with a form. Entering your payment details for an Amazon order is done with a form.
In the last video, we learned what forms are, how we use them, and then we looked at the various text-based and clickable form fields brought to us by the HTML input element.
In this video, we will bring together all of the work in the two previous form videos and build an entire form from scratch.
Part 1: • Form Inputs - Text, Em...
Part 2: • Form Inputs - Checkbox...
► Timestamps:
0:00 Start
1:08 The form we will build (styled & unstyled)
1:40 The forms are presentational only
2:48 Client side validations
3:31 The required attribute
4:04 Creating name & email inputs nested in labels + the required & autofocus keywords
5:48 Grouping inputs & labels within a fieldset & adding a legend
6:35 Using a. span to isolate some text
7:22 Creating the provisional structure of the next two sections
9:16 Building the dropdown menus with Emmet
10:41 Adding the information for the dropdown menus
11:33 Adding dropdown, radio, checkbox, & textarea inputs for the 3rd section
15:20 Associating radio inputs
16:01 Checking the labels and associated inputs are bound
16:21 Adding a submit button
17:05 Testing the form
18:15 Summary
► Get the code:
Styled Form: codepen.io/craigabourne/pen/b...
Unstyled Form: codepen.io/craigabourne/pen/z...
GitHub Repo: github.com/craigabourne/html-...
--------------------
Part 1 code: codepen.io/craigabourne/pen/Q...
Part 2 code: codepen.io/craigabourne/pen/w...
► Links used in the video:
Form Attributes: www.w3schools.com/html/html_f...
The Fieldset Element: developer.mozilla.org/en-US/d...
► The HTML for Absolute Beginners Playlist: • HTML for Absolute Begi...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne