Less Known Input Types in HTML

in today's video i want to take a look at some lesser known input types out there that should you should probably know about so leaving aside the text and the file the hidden the number and the submit and the button input types we're going to take a look at some very interesting ones for example we have the input type color that we can have here and if i refresh the page you're going to notice that the input is just a button that you click and it opens up an actual uh color palette that you can select a color from so let's say we select here this color sure looks nice and if i submit it we're gonna notice that down here we do get in fact on a color specifier with the hashtag and hexadecimal values for colors that's a quick and easy way to select a color if you want to so that you don't have to uh import another library for your simple color panel that's already in the browser now that is to say that the browser does implement a nice color wheel because maybe not all the browsers are implementing this in a nice way and they're going to have different implementations on different browsers another input type i see time and time again overlooked by people that want to implement a simple date input is well the date type so if i have here a date type and if i refresh the page you're going to notice that i have a very simple date picker they can just click on and it's it's usable it it works it you can actually go back in time or let's see 2019 let's go february 13 and if we submit it it's going to work properly it is of course going to return to you a date that is formatted in this way and you can also you cannot change the format but you can also specify the minimum and maximum to them so to do so of course you can just say mean equals let's say 2020 0 1 0 1 and if you do so and refresh the page of course we're gonna get that as the minimum so i cannot no longer go back to the 2019. a very similar one is a date time local so daytime local is um an input type that gives you both date and time and it is named date time local because it does return to you a local date time so on the current time zone that you're in or the time zone of the operating system or the browser so if i try to select it here you'll notice that the daytime picker is much larger than i actually expected but you can select the date so i can go here 2019 18 and let's say at 8 0 0 am and that's gonna submit and i'm going to see it here inside the network tab as being formatted as an iso date time which is very nice now you might notice that the mean attribute doesn't work anymore that's because you also have to specify the time so i'm going to have to specify here t let's say zero zero zero zero and now if i try to refresh this we shouldn't be able to select a date from uh 2019 or earlier and that is the case i can no longer scroll up any long anymore okay but what if you just won the time well if you want just the time instead of the instead of both the date and the time you can just specify here the input type time and that itself also has a minimum and maximum if i remove the minimum for now and uh take a look at how this looks it's very straightforward just has the hour the minutes and either pm or am so you can specify it here and submit it and it's going to be formatted like so in the post request very straightforward now again all of these are uh implemented probably differently on every browser and if you want to select a week you can also do so by using the weak input type and that's going to be just a simple week input time that's going to give you a way to select a week of the year it's nice that it does tell you the week inside the year and then it does select which week you want here and if you're going to select it and submit it in the post request is going to look just like so and the last date time related input type is month so we can change this to month so that we are clear on all of them and of course we can just select them up from this place only say july 2021 and if i submit of course i'm gonna get here in the request 2031-07 so that's how this is sent and again you cannot change the format but you can you can change uh the interval that you're allowed to select into now moving away from the daytime related uh input types there's also the search input time which you should probably use whenever you have a search bar on your website this is more known but i guess i should really talk about it a bit uh the the thing about this one is that it works nicely with mobile versions of browsers so the browsers know how to integrate them uh whenever you're trying to search something another one is the telephone input type if you ever need to type in a telephone number in a form it's nice to use this because on mobile version of browsers it's going to give you a nice keypad for typing in the telephone although it is not validated in any way shape or form you're gonna probably have to give it a pattern here i have the pattern from mdn that they are recommending to use for whatever uh country this is for if i try to refresh it now i shouldn't be able to i am able to just type in letters but i shouldn't be able to submit because of course i need to specify the proper format which is three digits and then three digits and then four digits if i submit this it's going to allow me to submit it and of course it's going to be well uh that as sent as a text no no special formatting no nothing it's just uh it's just a way to tell the the browsers what they are dealing with is it a text is it telephone uh field it's a nice it's a nice addition and the lastly is the url type and the input type url doesn't really validate much of this url it all does is simply check if uh the text you're entering here has the scheme and then has the colon slash slash and then has something else after it so for example if i see here test.com it's not going to work because it expects it expects me to type in either http or https at the beginning and now if it is like this i can submit and it works so here you should actually provide a proper pattern to validate against and of course validate it in the back end now this is nice in some cases because uh this input type like many others do tell the browsers what keyboard should be displayed right sometimes you may have seen that your mobile keyboard whenever you're trying to type something sometimes it has a dot com in the bottom right corner probably and it is because of this input type url otherwise you might not have that keyboard you have to type in dot com for example and lastly there's a date time type for the inputs but this one is actually obsolete and you should not use it anymore the daytime local is the one that you should now use from now on so keep in mind that if you see any example with the input type date time then that's obsolete so you should change it and that's it for today i hope you got something out of this video if you do have any questions leave them down comments below or on our discord server the source code can be found on our website as usual link in the description below take care bye you

Channel: CodeVault

Views: 197

Rating: 5 out of 5

Keywords: codevault, html, input, type, date, datetime-local, time, color, week, month

Id: r0UcnCxPYqU

Length: 8min 3sec (483 seconds)

Published: Tue Jan 19 2021