Countersign Travel Booking Form Made Easy

Esign travel booking form

[Music] hello everyone welcome to my channel easy tutorials and today in this video you will learn how to make a flight working form that you can use in travel website as you can see on my computer screen it is very beautiful and transparent flight working form the text input date select option number input one drop-down select option and one such were done before starting this video I will request you to please subscribe my channel easy to Royals to watch more videos like this one now let's start to create this flight working form this is my HTML file and I have already linked my HTML to the CSS file now I will copy this line of code here and here we'll add bootstrap file for that I will remove this one and now I'll go to the Google and search for bootstrap CDN open this first URL and from this website just copy this link and paste it here okay after adding this bootstrap link just go to the body section and here we have to create one div and the class name will be booking form box now let's go to the CSS file and here we will add background image after that a light background position Center and background size cover now I'll copy this class name and paste it here in the CSS file and for this one I'll set maximum width is equal to 350 pixel and border then margin now open this website from Google Chrome here you can't see this box because there is no content inside so let's create one more deal in this box and the class name will be radio - BTN and in this div there will be three radio buttons the first one will be round trip the second one way and the third one will be multi-city for the first checkbox here I'll write check is equal to check now you can see the first checkup is selected now just copy this class name in this and here we'll write margin and after that we'll write code for this button margin box-shadow [Music] and now I'll write code here after content will be and height 15 pixel width 15 pixel top minus 2 pixels left minus 1 the background color will be white position:relative display:inline-block and some water also bottle radius you can see this round button here now I'll copy this one here and here I'll write checked after the content will be blank and background color will be black now save this changes now I'll write code for this span color will be white margin right will be 5 pixel and the font size now here we will create one more deal and the class name will be booking form and in this form will create all the fields all the input fields first I'll write label and after that one input field the type will be 'text and here we'll write one class also form control that is bootstrap class the placeholder city or airport simply I will copy and paste it to create the another input field you you you now we will create small input field that is date select option the type will beat it and here we'll write one more class select date you I'll select the date input two times and after that I will create one more field that is number the value will be fun and again or number field and for this one value will be zero you - one drop-down select option here we can select travel class so for that I will write one class name here custom select and here will be two option option value one and option value to business class now replace this website and you can see this all the input field here and all this found are in full width after that I will create one more group and head will create one submit button and I will write one more class name flight the text will be so flights now I'll copy this booking from class name in the CSS file adding will be zero 20 pixel 20 pixel and now I'll write code for this level for this one margin bottom will be 5 pixel margin top and font size and color now for this input field I'll write placeholder and we'll change the placeholder color also now refresh this page and you can see the changes on this page now I'll copy this input GRP the width will be 150 one pixel display:inline-block now you can see this date is aligned in the signal line now I'll copy this class name form control and for this one I'll write font size order radius color background will be transparent Pop's a donor and here I will put important because it is a woodshop class now you can see this input field is transparent now I will copy this class name select date and we'll write this JEP get in a spin button you and then as parents is equal to none margin:0 so now you can see there is no spin button here on this page now again I will copy it and I will write calendar picker indicator and for this one background will be transparent now you can see this indicator background is transparent now I'll copy this class name custom select and for this one I'll write color white and font size border box-shadow none border-radius 0 and background:transparent and all the will put important now refresh this page and you can see this select option is transparent now I'll copy this one here and after that all right option and right color now copy this class name right to design this button for this one I'll write v adding font size butter background:transparent serious you he also will put important now we'll add hover effect on this button when you will however it the background color will become white and text color will be black [Music] we have learned how to make this flight booking form if this video is helpful for you please like and share this video and also comment on this video and do not forget to subscribe my channel ajit tutorials thank you so much for watching