[HTML-Tutorial-20] Advanced HTML Form | Input Types & Form Elements | Web Development for Beginners

Published: 09 February 2021
on channel: Code Range

16,190

427

Create an advanced HTML form by adding some dropdown lists, multiple choice options, date-pickers, search bar, color choice & much more to your basic form.

Learn to use all the different inputs types like: radio, checkbox, password, date, time, datetime-local, month, week, number, tel, search, file, color, range.

Also learn about all the other form elements like:
select, textarea, datalist, option, optgroup, fieldset, legend.

- - - Contents Of The Video - - - -

00:00 - Introduction
01:22 - Input Type password (Password)
02:30 - Input Type tel (Phone Number)
03:55 - Input Type date (Date)
04:40 - Input Type datetime-local (Date & Time)
05:04 - Input Type month, week (Month & Week)
05:10 - Date, Time Input Type solution for unsupporting browsers
05:56 - Input Type search (Search bar)
06:24 - Input Type number (Number)
07:17 - Input Type color (Color)
08:37 - Input Type range (Range Slider)
09:49 - Input Type file (Upload Doc Files, Image Files)
11:06 - Input Type checkbox (Checkboxes)
12:45 - Input Type radio (Radio Buttons)
14:38 - More Input Types
14:49 - Textarea Element (Passage of Text)
16:00 - Select & Option Elements (Dropdowns)
17:09 - Optgroup Element (Grouping in Dropdowns)
17:47 - Datalist Element (Autocomplete Input with Dropdown)
19:15 - Fieldest & Legend Elements (Sectioning in Form)
20:05 - End of HTML & about next tutorial

- - - Interesting Links - - - -

Recommended Resources:

1. Create a Basic Form (video):
• [HTML-Tutorial-19] Basic Form | form,...

2. CSS Color Values:
https://www.w3schools.com/cssref/css_...

3. HTML5 Newer Input Types:
https://developer.mozilla.org/en-US/d...

4. All Input Types:
https://www.w3schools.com/html/html_f...

5. Form Elements:
https://www.w3schools.com/html/html_f...

6. Basic Native Form Controls:
https://developer.mozilla.org/en-US/d...

Code Links:

1. Forms - 2 (Web Page): https://juthikashetye.github.io/Code-...

2. Forms - 2 (Code): https://github.com/juthikashetye/Code...

3. Link to all Demos: https://juthikashetye.github.io/Code-...

On this page of the site you can watch the video online [HTML-Tutorial-20] Advanced HTML Form | Input Types & Form Elements | Web Development for Beginners with a duration of hours minute second in good quality, which was uploaded by the user Code Range 09 February 2021, share the link with friends and acquaintances, this video has already been watched 16,190 times on youtube and it was liked by 427 viewers. Enjoy your viewing!

8,445

485