GCore

“html a very simple HTML script I'm not doing any complicated stuff today it's very simple very fundamental but very important because I'm doing everything in vs code there is a shortcut you can type which is an exclamation mark and if you just tab it will essentially create this whole HTML shell for you which is fantastic it just makes you you know set your project up super quick when you're just working with a simple HTML document now I'm going to give this a title I'm going to call it oh I need to put my mic because I can't see my keyboard I'm going to call it forms and within the body uh we're just going to type hello because I want to test that it works if you're using vs code and I assume most of you are and you should because it's a great development environment if you just go to the left and go to your extensions you'll have an extension called live server now make sure you install that make sure you have it it should be like the thing you always use now the great thing about that is that if I have an HTML form here right at the bottom we have a button called go live and if I just click that essentially it'll start the server up for me where the content of my HTML page will be present at the top so here we go we already got it started and we can see the results of everything that we type in our code right on the web page now going back into vs code first of all we have to reference a style we're going to be working with Styles I want to keep it all in the same document so we're just going to create a style tag here and that's where we're going to put all our CSS and then also we're going to work a little bit with JavaScript so we're just going to include the script tag right at the bottom so everything is ready you see that my uh my formatting changes and I've got it set to change whenever I save my document it's the prettier extension in in vs code so I highly recommend you guys also get it it makes the styling and the formatting the same which is great when you're working with a big project everything is always like Top Notch anyway back to the forums so the first thing I think that we should do is actually create the form let's go into our body here and we're going to create a form now I'm not going to give the form any action I'm just going to keep it as simple as possible so you guys actually understand and we're going to create a label which is going to be for the field name and then we're going to call this name and then we're going to create another input which will be of type text like so and if I save it you'll see that the closing tags get added and then the last thing I want to add is a button and I'm just going to call this button change name as simple as it can be so if we actually go back to our browser you're going to see that this name field has been created here I can type something and I can change the name and essentially what will happen and I'll open up my console it'll probably start submitting events but we're not going to do that just yet the first thing I want to do is just add some styling position it right in the middle so it'll be easier for us to kind of watch it change rather than right here in the corner and the simplest way to position things in the middle in CSS you reference the whole body and essentially the whole body we wanted to have a whole width and height of a 100 viewport height and viewport width so the width of the screen so height height if I can spell that correctly whoops is a 100 viewport height width is a 100 viewport width and then we're going to play with flex in all my tutorials I always encourage using Flex so we're just going to set the display to flex and then we're going to say align items Center and justify content Center these two commands do is they just position things horizontally and vertically in the center so now if we go back to our Chrome you'll see that it is right here in the middle of the page so just centered everything for that whole body that takes up the whole width and height of the of the screen okay so now this is where the fan actually starts and this is where I'm going to start to explain to you why you want a more elegant way to create these forms now let me just zoom into this browser so you can actually see this input much better now let's go to our code and actually Implement a little bit of JavaScript a little bit of JavaScript that when I click this button this form event will trigger so we will submit this form so I go back to vs code and then I'll go into my script I need to reference two things I need to reference the form that I'll be targeting and the button so let's create a const form and we can say that the document dot query selector which is essentially a selector for any type of element wherever it is just the element name and the ID the class name and so on and so forth in this case I'm just going to Target the the element name and I'm going to say the form because we only have one form on the page so we don't have to be super specific the other thing I'm going to Target is the button and we're going to say document dot query selector also and I'm going just to call it the button we had two elements on the page the form element and the button element within the form and we're targeting those with JavaScript if we for example create an event listener for the form or for the submit uh it might not always work because the HTML won't render yet before the JavaScript fires the event so we might get errors where for example the button is not there because it hasn't rendered the button but the JavaScript has already fired so just to make sure that doesn't happen we're just going to wrap the button in an if statement saying well if the button exists only perform those actions so now what we want to do is create an event listener to Target our button so when we click our button the form actually submits so what we can write is button dot add event listener and this is going to be a function that takes two parameters it takes the action which is on click or just click and then it takes a function which will perform the submission of the form where we just Target the form and we say dot submit and if I can type that right then it would be correct okay and a semicolon here okay sub oh I typed it wrong again submit there we go okay I have just realized that I have spelled document wrong here document wrong okay for visual purposes I can just add a console log here a form has been submitted like so and if I just change here you can see in the console that it's actually printing that it has been submitted but nothing happens now this is where things actually start getting interesting because if we go back to our Visual Studio code and for example this input I'm going to mark it as required which means that if it's not filled out and has to be filled out because I'm marking it as a required input field now if we actually go ahead and try and change the name it still submits the event now this is where the issue comes in the submit function that's provided within any web browser actually completely neglects any of your form validation meaning that if you have required fields and you trigger this event programmatically well unfortunately it will fire the event but it won't take into account the fact that the fields are just empty so here is a way to fix it and it's super simple but it makes such a big impact when it comes to like the consistency of the data that you're sending um so if I go back to visual studio code all we need to change is rather than calling form dot submit when to call form dot request submit now that because I have marked this as required if I try and Trigger this event it will actually take into account the fact that I specified that required attribute within this name field and it's going to ask me for this name before actually firing the event so this is something that you can Implement into your websites into the forms that you create and you trigger them programmatically to make sure that this actually doesn't happen and use the right way of triggering that submit so the request submit function rather than just a submit function on its own so as you can see that's quite interesting it's a very simple tip but it works very well what is this g-core wants to send you important information huh what is it g-core is a global leader in private and public cloud services did you know that their aim is to provide customers with Cloud infrastructure for computing storing protecting and delivering content worldwide with a latency of no more than 30 milliseconds do you know how fast that is with its virtual machines that allow you to deploy and skill projects in just a few clicks to Bare Metal servers that give you unlimited access and control you can definitely rely on the modern Cloud technology that gcore offers gcore has partnered with Intel and graphcore to provide cutting-edge technology and offer incredible products that include CDN DDOS protection DNS storage and streaming services and advanced security all in one platform if you're interested in learning more make sure you click on the link in the description and immerse yourself in the incredible and wonderful world of cloud computing whoa what just happened I feel like I just zoned out what what happened huh am I like am I like going crazy or something or am I missing something no I think I think oh it's fine okay well going back to the video now I want to show you another really cool trick that you can use with your forums and I'll show you how to also style it so it like appears the way it's supposed to be let's assume a scenario that I have this whole form but I don't want to allow people to click on it the input the button trigger events whatever just the form it's supposed to be disabled until someone completes something what we can do is we can add an attribute called inert so if we go on to my form and here I just write in the same way we write required we'll write inert now have a look what this actually does now suddenly I cannot do anything there is no clickability I can't click the button and nothing happens because the whole form the form tag to the closing form tag everything inside is just suddenly not available disabled in a way but you know it's it's just a keyword that does the whole thing to the whole form now the cool thing you can do here is you can actually reference the form in your CSS and reference the attribute by passing it into the square brackets in the CSS called inert and the cool thing that happens here is that we can set the opacity to like 0”