Codepen of examples: https://codepen.io/FakeSamGregory/pen/jOBdLbJ
Transcript
Hello and welcome to another episode of Webflow and Code where I teach you the underlying code you’re writing in Webflow. Today is gonna be a big one today we are going to be looking at the input type attribute, I don’t know why I said it like that input type attribute which has a massive array of different types of input elements that we can achieve just using the one element.
Yes of course it’s using custom code it’s something we don’t get as a as a component within Webflow so we’re going to be writing a little bit of code but I’m going to be taking you through all the different types and kind of how we can use them different ways we can use them if it gets too long and if it gets too boring then I might split it up into two different sections but let’s see how we get on and enjoy this week’s episode of Weflow and Code
[Music] So, right off the bat I want to just point your attention to the Mozilla documentation for different types of elements and this is primarily where I’m getting my information from to kind of learn what these input elements are capable of and I want to point you to this because just know that the information is very easy to find and I’ll kind of want to take you through the different areas of the documentation that I’m looking at and then I can go through the documentation kind of understand a little bit about it you know you can understand what the markup is I’m just reading a quick description of what it does um and then I’m scrolling down um to see this little table here which actually tells me what the value sort of format is supposed to be and the importance of this is really a distinction that with the input type with browsers that don’t support this actual you know this specific type that can’t render it or whatever.
It actually degrades gracefully into just a normal text input so if you you know if you’re building a website for ie6 or something like that and it doesn’t support the month type month or whatever then the user will still be able to enter a text value for that for that element so this this is quite important to know and this is what you would this is also what you’d receive on the back end if the user clicks on the date clicks on a date.
This is the sort of format you’d expect to receive on the on the back end so that’s kind of the first one I’m looking at second one I’m looking at is events so we looked at conditional forms elements on one of our previous episodes and we were able to respond to different types of events now not all events are registered by all input types so here we can listen to the event change or input and that will actually fire when someone changes the element here and we can listen out for these and then respond to them.
So, it’s worth looking at what events that they’re um that these input elements can respond to and I think generally they always are change and input but just worth noting another thing worth noting is the supported common attributes now we’ve got a lesson on attribute so look out for that one and subscribe if you haven’t already so you can keep up to date with everything that’s going on.
These are also common attributes that are used on this particular element and then the other one I’m looking at is methods here so this could actually be you know if you have some JavaScript you have a button or something like that uh that triggers some JavaScript what you can do to this input type so you can have a button that makes it step down or step up or whatever so this is another one I’m sort of interested in and then I kind of just skim through and just see if there are any kind of call out things and we’ll get into um call out kind of things as we go through all the different types of inputs and and kind of gotchas I guess.
But like I say I just wanted to show you the documentation so you’re not kind of on your own and you can go out and do this research yourself without having to kind of sit through these types of videos or if you get lost you can dip into the documentation and not be overwhelmed by the documentation you kind of know where you’re looking and what sort of things you’re looking out for in order to solve your problems.
So, with all that out the way let’s get into input types okay the changing and input type um as I say a lot of them degrade to text fields and a lot of them are basically text fields they just give you a sort of UI that you can write text to that field so, if we take our date for example just gives us a UI to essentially create a piece of text that writes that so, really we’re looking at these for extra help when it comes to validating so if a user does type this out manually they don’t use the UI or the browser doesn’t give them a UI because that’s another thing to take into account here that not all browsers will render the UI the same and we can fire up a..a warning or an error if they haven’t formatted it correctly.
So, really these are just a way to help with with that kind of validation aspect. So, let’s jump into the different types of input elements right and we’re gonna we’re not gonna spend an awful lot of time in code I think it’s best that we work through the documentation so once again you’re kind of not overwhelmed. If we need to dip into Webflow then we should do so so first up we have input type button okay and this is kind of the markup here we’ve got an input and then we’ve got the actual type of button and this is this is all we’re going to be working within today is the only thing we’re really going to be changing and all this essentially does is give us a value it’s similar to the Webflow native input type submit.
Really we can it’s all formatted exactly the same way but if we read the description here elements of type button are rendered as simple push buttons which can be programmed to control custom functionality anywhere on the web page as required when assigning an event handler function what that basically means is if we’ve got some JavaScript listening for click events on this button then really it’s just a way of letting the browser know that this is a something that will cause something else to happen it’s not really useful in the form of submitting data to a form.
So, it’s we wouldn’t use this to actually collect data from the user it’s just simply there to maybe hide or show something or create an accordion or something like that so it’s worth just noting. Once again scrolling down um clicking of click events common attributes of type it’s a real simple element there’s nothing much really more to say about it right the second one we have which is a very interesting one is of type colours you can actually collect colour information from from a user inside of a form and this again is what the the the markup looks like.
It’s of type colour and it expects a hexadecimal value as the value and that’s what again gets submitted to the back end of the website and this is kind of how it renders so I’m…I’m using uh I’m using edge right now which is very similar to chrome but here you can see the UI and I’m able to select different colours and various things like that.
You don’t have to have a default value here you can actually set that as empty and you can see that it’s defaulted there to black and then when the user comes and selects that way that’s when the value will actually change on here so you don’t have to set default value as with most of these things you don’t have to set default value it’s when the user interacts with it it’s the case.
Once again a very simple element but interesting to know that we have access for the user to select a colour and submit that as part of a form so here we have the date which we went over briefly in the introduction so a date element is quite literally an input type of date and it renders a little UI for the user to actually select a date with a sort of month and a year sort of thing.
Once again you can you can set a default value if you leave that empty the default value would be today or at least when they open this UI the default value would be today. It’s then up to them to select that scrolling down and looking at our uh summary here you can see that the the value needs to be in this value if the user was to type it out and obviously the events are input and change so no surprise there.
And you can see here we have a minimum and a maximum value to the date so this will this will prevent the user from actually selecting any dates obviously before or after those um those dates which is really handy if you kind of need that functionality.
I think for a lot of these date time elements we have to be mindful that this is not a format in which a user would typically write in they would they would write it in a slightly different way you can even see in the UI here it’s going day month year. It’s…it’s strongly recommended and this will become even more clearer in in some of the following elements it it’s probably important to give a user three separate fields for the date the month and the year and then combine those or um submit those as three separate values in in the backend.
Just because it’s too easy for this to get confused and the user might get stuck or if their browser doesn’t render the UI they haven’t got an easy way to type those things out date is a fairly well supported element but as we grow as we get into some of these other ones they’re not as well supported and it’s probably better again just to provide select fields with numbers of the dates and times and years and various things like that.
Leaving us nicely onto the date time local so again input type date time local and you can see here the value is kind of this date with the year starting and then it was the letter T and then the time okay so this is where you start to see it getting a lot more complex a lot more complicated and where the user could potentially trip up so it’s probably not advised to use these types of elements um unless you’re absolutely sure that the user will use the UI which I’m not too sure how you would do that but it’s again probably better.
Again you can see the different types of renderings here this is edge it’s it’s probably better to provide different select values or…or whatever you need or whatever you think is more appropriate to show the user to be able to input those values separately.
I think that goes without saying with input type month but quickly just looking through it of type month you’ve got again those min max values if you want to use them but a a month simply takes the year and the month and then the UI obviously just selects the whole month as opposed to kind of a single date and the same with the time which I think’s a bit more logical because it’s just with a colon but again you might just want to simplify it for your user to be able to provide a time um if..if…if you’re encountering issues or people users are encountering issues when inputting a time.
So, there you go that’s the end of the first part I hope you enjoyed it the stuff at the beginning of this episode was actually really crucial so I’ll probably reference that in the second episode if you like this episode then please give it a thumbs up and if you want to see more including next week’s episode then please make sure you subscribe and hit the bell notification until next time happy no coding [Music]