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

Опубликовано: 30 Октябрь 2024
на канале: 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-...