How to Add a form to your website (HTML and CSS) ITW-EB7

Опубликовано: 30 Апрель 2021
на канале: Zeats

452

In this video we will be adding and formatting a registration and login form / page to the Into The Wild demo website, this includes text, email and password input fields, labels, check boxes and buttons.

This form will be made in 3 videos, this first one will deal with creating all of the HTML for the standard form as well as the HTML code for the help system. The second video will be focusing on the CSS for the help system. With the final one looking at creating customised check boxes by modifying the HTML and the required CSS.

These videos will followed by a mini series of videos on how to validate the form.

Links:

unsplash image original: https://unsplash.com/collections/1058...
Site files: http://tiny.cc/itweb7form
Getting started series:    • Getting started
Into The wild easy build series:    • Into The Wild Website Easy Build Series
forms playlist:    • Forms full fat

Chapters:

0:00 Video Intro
0:46 House Keeping
2:24 Aim overview
3:45 Creating the and linking the PHP and CSS files
4:15 Creating the form element (HTML)
4:48 Creating the label and input pair (HTML)
5:44 Creating the help system (HTML)
6:35 Challenge - Create the rest of the HTML
7:44 The Solution
9:00 Adding the Check boxes and button (HTML)
11:19 Hiding the form help (CSS)
12:10 Styling the label (CSS)
13:00 Fixing the check box label styles (CSS)
13:39 Styling the input fields (CSS)
14:30 Dealing with the check box issue (CSS)
15:22 Styling the link in the checkbox text (CSS)
16:44 Styling the register button (CSS)
17:49 Challenge - The Login form HTML
18:53 The solution
19:21 Styling the login button (CSS)
19:49 Moving the forms side by side (CSS)
21:07 Solution 1 for the divider bar (CSS)
22:32 Solution 2 for the divider bar (HTML and CSS)
23:08 Solution 3 for the divider bar
23:26 Solution 4 for the divider bar using ::after CSS rule
24:54 Solution 1 for the background image
25:42 Solution 2 for the background image
26:49 Solution 3 for background image (HTML and CSS)
30:51 Solution 4 for the background image (CSS ::after rule)
31:44 Video wrap up