Тёмный

24: Forms In HTML and CSS | How To Create A Form | Learn HTML and CSS | HTML Tutorial | CSS Tutorial 

Dani Krossing
Подписаться 472 тыс.
Просмотров 259 тыс.
50% 1

Forms In HTML and CSS | How To Create A Form | Learn HTML and CSS | HTML Tutorial | CSS Tutorial. In this HTML tutorial you will learn how to create a form and how to style it. Forms are very important to learn, even though it require that you also know a second programming language that handles the form data.
How to create a contact form: • 58: How to Create A PH...
How to create a login system: • Video
➤ SPECIAL THANKS TO THE FOLLOWING PATRONS!
Name: Scooterman
Channel Link: / @scooterman9230
Description: I'm a guy.
➤ GET ACCESS TO MY LESSON MATERIAL HERE!
First of all, thank you for all the support you have given me!
I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!
I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.
I hope you will find it helpful :)
Material for this lesson: / lesson-material-42361704

Опубликовано:

 

3 фев 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 159   
@Dani_Krossing
@Dani_Krossing Год назад
NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v8jDnBYc0bs.html&ab_channel=DaniKrossing
@Vincent-fs8ry
@Vincent-fs8ry 6 лет назад
The best way to practise css and html is to make a Project and Google how to do things
4 года назад
That's how I've learned, and then I come and watch this amazing series only to find that I was on the right track, all the while learning little tweaks to refine my work.
@informativecontent4778
@informativecontent4778 4 года назад
google is public enemy use duckduckgo
@anujkhare3815
@anujkhare3815 3 года назад
@@informativecontent4778 LOL. MAN YOU'RE FUNNY . I LIKE YOU 3
@real_yoplayer1
@real_yoplayer1 3 года назад
@@informativecontent4778 enemy ????
@real_yoplayer1
@real_yoplayer1 3 года назад
and I also watched this video like this and w3schools.com (Think the URL is right )
@Graferification
@Graferification 6 лет назад
I recommend using labels in forms instead of plain text or just placeholders. Mainly for accessibility reasons, for people using screen readers or people with memory impairments. That should be a good practice. Apart from that, very good tut :) Cheers.
@Moodboard39
@Moodboard39 Год назад
Cool. Placeholder to long
@cyberinfomatic7512
@cyberinfomatic7512 Год назад
Thank you...
@franciscosuarez5891
@franciscosuarez5891 5 лет назад
Great video, Daniel. I have learned really good things to modify the surveys appearance, I'm going to put this in practice. Thank you for work and keep doing awesome lessons.
@tanishakumar8831
@tanishakumar8831 2 года назад
Thanks you taught me better than my computer teacher. It helped me for my exam's last night preparation.
@anna-aleksandraruohonen1727
@anna-aleksandraruohonen1727 4 года назад
Thank you, super useful tutorial! Next I'm going to find out the PHP thingy, wish me luck :D
@nevinkuser9892
@nevinkuser9892 3 года назад
You answered my main question in the first minute of the video. Well done!
@zko5906
@zko5906 4 года назад
Amazing tutorial, easy and fun. No more frustration with forms. Really, it's very easy thanks to this video :)
@angelalasquite
@angelalasquite 3 года назад
I'm learning a lot from you, Dani. What a great tutorial you have!
@adamv8699
@adamv8699 5 лет назад
Your videos are awesome. You're a great teacher. maybe you could do a video on making a login form with all the bells and whistles in it for a project. Question: is it better to make all the form elements inside labels for ease of styling? < input= or button= or etc..?>
@thetowerfantasymusic
@thetowerfantasymusic 3 года назад
You're a lifesaver, thanks !!
@Adam-gp3ij
@Adam-gp3ij 4 года назад
Best tutor ever for web programming
@GoldenToothBrush
@GoldenToothBrush 5 лет назад
Hi and thank you for the great tutorial. I've noticed that when you used the value attribute with radio and typed in the genders the genders came up on the page like a label next to the circles. In other tutorials I've learned about the label tag. I was wondering if there is any reason to ever use the value attribute over the label tag and vice versa or are they always interchangeable? Also i was wondering what the point of the get value is? Could you not just use the post value all the time? What i mean is if you were not sending sensitive info why would it make any difference? Thanks in advance!
@hachij_
@hachij_ 6 лет назад
really nice tutorials. keep it quality up!
@hpottstock
@hpottstock 4 года назад
Great tutorial mate, thanks. The melody of your speech reminds me a bit of Christopher Walken :)
@adreannaaaaa
@adreannaaaaa 5 лет назад
i really love all your explanation, very details for someone who know nothing like me. keep it up! :)
@timothymchardy5098
@timothymchardy5098 3 года назад
8:04 man felt his career slipping away for a sec
@Dani_Krossing
@Dani_Krossing 3 года назад
😂
@shumasumer37
@shumasumer37 6 лет назад
Thanks for you help dude !!! Very nice video
@ruthgibson8289
@ruthgibson8289 2 года назад
looking for an easy explanation for my students. This Video does a nice job!
@emalfiza3386
@emalfiza3386 4 года назад
very easy and spot on. cheers buddy
@user-vr1sd8fp8w
@user-vr1sd8fp8w Год назад
Your teaching skills are super, but there is no other bro. Thank you anyway
@meron5706
@meron5706 4 года назад
"because i guess there is another gender eha" lmfao
@edogawaeduardus6149
@edogawaeduardus6149 3 года назад
@Able blyat
@kinghassy334
@kinghassy334 3 года назад
@Able Don't worry bro I respect your gender
@asrieldreemurr8299
@asrieldreemurr8299 3 года назад
Last I checked there were only two genders. Even lesbian or homosexuals still have a gender. Everything else should be species.
@kinghassy334
@kinghassy334 3 года назад
@@asrieldreemurr8299 gender and sex are two different things, sex is what you are biologically and genetically, gender is how you're socially categorized by your culture
@Moodboard39
@Moodboard39 Год назад
No other gender . People are insane if they think that
@Mlclmtan97
@Mlclmtan97 4 года назад
Much thank you from Malaysia
@newtonoluoch5074
@newtonoluoch5074 2 года назад
Thanks for this, very elaborate.
@robertwalls533
@robertwalls533 3 года назад
Enjoy your videos. I was just wondering to add an email contact form to the website would I need to change my index.html file to php or would I create a new file and name it php. How would I apply that to my contact page of the website. Thanks for the help.
@cfuman
@cfuman Год назад
Very informative, thank you!
@kamalizamclaire57
@kamalizamclaire57 4 года назад
nice one ...... i like thia video
@mihiiiiiiiii
@mihiiiiiiiii 2 года назад
Seriously, I saw many videos to explain me forms....but thiisss iss thheee bessstttttt!!! I swear!❤❤🤍🤍 You explain so well! loved it!
@TrungHoangMinh1234
@TrungHoangMinh1234 5 лет назад
thank you so much for the video
@zeggxr1539
@zeggxr1539 4 года назад
i loved the way how you teach man, here is a question how can i get better when i learned programming in c# html php..
@anulrajeev7891
@anulrajeev7891 4 года назад
What is the difference between using name attribute instead of value in the ? Do they mean the same for ?
@tomisinergy4963
@tomisinergy4963 4 года назад
< It was great HTML tutorial :-)>
@77kcormahs
@77kcormahs 4 года назад
Thanks for the help!
@teenytinytoons
@teenytinytoons 3 года назад
fantastic tutorial.
@electronicheartbreak.
@electronicheartbreak. 6 лет назад
Good video as always👌🏻. Can you make a video about the , etc tags?
@zarirramiz8978
@zarirramiz8978 Год назад
Thank you best teacher
@mikemkgta5988
@mikemkgta5988 4 года назад
this really help thank you
@istiv
@istiv 2 года назад
Great tutorial this is.
@xxm3linaxx
@xxm3linaxx 4 года назад
How do you style the radio buttons? like move them around with the text you showed in this video?
@ademottoman962
@ademottoman962 5 лет назад
can you make a video explaining how to like edit the text decoration if you want it to bee only in contact page not in every page
@carloslopez9939
@carloslopez9939 2 года назад
Thanks a lot bro, great video. SUBSCRIBED! : )
@akewiagbaye
@akewiagbaye 2 года назад
Good teacher
@DDLYkitten
@DDLYkitten 2 года назад
thank you I have a midterm in 4 hours
@strawberrycm5073
@strawberrycm5073 4 года назад
Hi, are you able to do a video on auto pop-up email subscription form ?
@SHtechnology
@SHtechnology 4 года назад
That's great!
@origreenberg7764
@origreenberg7764 5 лет назад
very good video
@informativecontent4778
@informativecontent4778 4 года назад
i just subbed dude thanks
@khanshahin4905
@khanshahin4905 11 месяцев назад
I create a form html page with javascript. After submit form input value save in to database but if I click browser back button I see all the value displaying on the page. In this case what I have to do?
@sederick80
@sederick80 4 года назад
Great Video!! Anything on accessibility in HTML? :)
@KalamataInfo
@KalamataInfo 6 лет назад
I recommend using labels in forms instead of plain text or just placeholders. Mainly for accessibility reasons, for people using screen readers or people with memory impairments.
@Dani_Krossing
@Dani_Krossing 6 лет назад
Hehe funny how I received a comment From Filip, two hours earlier from yours that is completely identical word for word, in this same video :)
@izzykhan2143
@izzykhan2143 4 года назад
The resizing for me will not work and idk why. I am transferring my files into filezilla on a host server so maybe it has something to do with that?
@TheTyronesf
@TheTyronesf 3 года назад
Thank you.
@karan_yt_family
@karan_yt_family 3 года назад
ur ossam broski
@xyuria5300
@xyuria5300 3 года назад
My teacher is making us do this assignment and with 19 questions in a edpuzzle. Pain.
@shervinafzali7587
@shervinafzali7587 6 лет назад
thank you for your incredible tutorials... I just have a question, why did you type a comma in "input, textarea {}"? in previous tutorials you mentioned that when we are calling a subgroup in a stylesheet, we just use a space!
@rspsratings8240
@rspsratings8240 5 лет назад
That's how you style multiple elements at the same time. Saves writing it twice.
@heyjulyabas1681
@heyjulyabas1681 3 года назад
THANK YOU
@TakiTarik
@TakiTarik 3 года назад
Hey i hope you will reply or someone will i have an assignment in college and uhm i created my form i'm building a full website but i keep having issues with my H1,H2 etc div element that i've used before in my whole html and css file they keep messing up the input i have placed in my FORM D: it's frustrating not sure how to fix it
@vihangajuly6316
@vihangajuly6316 3 года назад
thank you,sir
@yanyenajangbuja4418
@yanyenajangbuja4418 2 года назад
exactly at my own pace
@edwindodoh5176
@edwindodoh5176 6 лет назад
Nice one ... I love this video
@rondajones7584
@rondajones7584 3 года назад
I have made a contact form with html and css. How do I make it work where it will send the email to my business email
@mfkrmaggot2755
@mfkrmaggot2755 4 года назад
so how do i view the responses? Great video, btw
@aahanmaheshwari8202
@aahanmaheshwari8202 3 года назад
DANI KROSSING IS OP Edit: I didn't make this comment to get a heart from Dani Krossing. I made this comment because he actually deserves it. You are really awesome, keep up the good work and keep educating us! Thank you for such helpful videos!
@rupensoni1883
@rupensoni1883 3 года назад
liked it
@koenterheegde9328
@koenterheegde9328 5 лет назад
I had the issue that the text in front of the radio types didn't show up. It was caused by the colon after the gender types. How can I have the colon and still see the text in front of it?
@dexterstm
@dexterstm 6 лет назад
Hey Bro if you have the time do you mind doing a video explaining in more details of how and when to use pseudo element? i have been researching for some post but i still couldn't grasp on how to use pseudo elements. Thanks
@Dani_Krossing
@Dani_Krossing 6 лет назад
Great idea for a lesson :) I will add it to my lesson planner
@coffe06
@coffe06 4 года назад
how come you got you password for lined up underneath the other forms you did, and i get it to the right of the others, just lucky?
@sad_boy5589
@sad_boy5589 Год назад
Hi Dani, I watched your video but couldn't find my answer. I have made a fillable form but I need to align the text, how shall I do it. for example Student admission____ Name of the student___ "how to give equal space on the left and right of the page/form.
@Scared_Cat003
@Scared_Cat003 3 года назад
What is the purpose of value in input advance thanks for answering
@justarandomguythatliketotr143
@justarandomguythatliketotr143 5 лет назад
guys i need help how can i nest html forms inside the box, The Input And label i mean
@kianaadili505
@kianaadili505 5 лет назад
tysm i love u
@Odnal8253
@Odnal8253 5 лет назад
It would have been great if you could have actually showed us how to use flexbox on the radio buttons, just to keep the practise going. Unfortunately I was not able to apply flexbox to them successfully. Nonetheless, great video.
@joshuamoskovitz4074
@joshuamoskovitz4074 4 года назад
Same here. It works with bootstrap but I couldn't get the radio button and the text on the same line unless all 3 were on the same line.
@photon2724
@photon2724 5 лет назад
i got confused in the scudo stuff.
@ryangardiner919
@ryangardiner919 5 лет назад
What does the value do?
@averagemanful
@averagemanful 5 лет назад
Option 1 Gender male. Option 2 Gender female. Option 3 "Chuckles" Other. This man gets it lol
@chucklesx3988
@chucklesx3988 5 лет назад
You called me, XD
@danielsloberg8726
@danielsloberg8726 3 года назад
2:37 No. Thank you for explaining that. It is necessary and you should be proud of yourself for having those values my dude. Keep that sh** up.
@user-or7ji5hv8y
@user-or7ji5hv8y 4 года назад
How does one display data possibly coming from a database onto the browser? Did you have a lesson on that as well?
@josephkasongo1876
@josephkasongo1876 5 лет назад
😍😍👏
@nahidestes
@nahidestes 5 лет назад
What is your laptop name?
@pavit9247
@pavit9247 6 лет назад
Hey bro i was learning php from your tutorial series. I got really confused what you made server and used php and other stuff to store password and stuff. What should i do i watched it 2-3 times but it keeps getting off my mind. I watched every other your html,css and JavaScript series but I don't know what should i do with the php.
@edwindodoh5176
@edwindodoh5176 6 лет назад
Just follow up from the beginning.. i too did not understand at first... But after so many errors I gat to understand it very well so the more you make mistake the more you get better
@stefan4800
@stefan4800 6 лет назад
You are using PHP to store information out of your computer, somewhere on the Internet, in the real world. In the real world you won't use things like XAMPP, you know your local server, in reallity you will use some server who knows where and you will store data on some database on Internet, not on your computer. When you use local server you are storing data on your local computer and only you can access it. In reality you want that other people use some data from the database on the Internet, like username or anything alse really, and for that you need to store things out there. PHP runs on the server, on some big server out there and works for your app: storing data, storing requests, usernames, posts and so on. PHP take the requests and store them in the database, like when user sign up, or retrieve informatoin from the database when the user logged in. When you hit log in button you trigger some code, some combination of PHP and MySQL in similar form: "SELECT * FROM users WHERE username = :username(your input from the form) AND password = :password(yout input from the form)" PHP handle this request on the server and work with MySQL (which storing data like in sprite sheet) to check do you exist like a user or not. You can't use Javascript for that because Javascript runs on your browswer (on your local, personal computer and does not see further than that), not on the server and you can use Javascript only for effects when you receive data from the server. PHP, in the other words, serve your clients, serve your application and work in combination with mostly MySQL to store or retrive data from the real databases in the real world, on the Internet, unlike Javascript which runs on your computer, on a local softwares like Chrome, Firefox or Opera and you can use it even without Internet connection. To use PHP you NEED a server, and that's why you install XAMPP which is an improvised server and it's useful only for development, not in the real world.
@pavit9247
@pavit9247 6 лет назад
Thanks man
@pavit9247
@pavit9247 6 лет назад
I will try again today
@Moodboard39
@Moodboard39 Год назад
@@stefan4800 So you practice using a server in your PC ? Using xmapp?
@Sawk-cy7wz
@Sawk-cy7wz 2 года назад
4:03 you can have a type of email
@espectrodormin
@espectrodormin 4 года назад
"Why should you learn it now... Instead of waiting to learn another language first?" And here I am, learning both at the same time lol
@olekristianrannekleiv762
@olekristianrannekleiv762 4 года назад
Well explained but for people who have no experience with forms, this is to much information in one video, I would rather split the video up in 2 or 3 videoes.
@SLL-033.shanks.
@SLL-033.shanks. 3 месяца назад
When creating form, is css and JavaScript is that necessary???
@Dani_Krossing
@Dani_Krossing 3 месяца назад
JavaScript and CSS isn’t required no, unless you plan on using forms for something out of the ordinary. 🙂 Only HTML is “required” when creating forms.
@shaytheswift_4327
@shaytheswift_4327 2 года назад
Great tutorial but my radio buttons dont deselect automatically
@rossmcintyre61
@rossmcintyre61 3 года назад
i skipped forms and nav bars to be honest and im learning bootstrap atm and having to backtrack learn these components first
@arushgupta5784
@arushgupta5784 3 года назад
where is the data saved after submitting????how to save it????????
@andoy_abarquez
@andoy_abarquez 6 лет назад
2nd comment ;)
@calibr0636
@calibr0636 4 года назад
Came back because I forgot about textarea
@_Omni
@_Omni 6 лет назад
8:18 other, lmao
@kmisdone
@kmisdone 11 месяцев назад
2:49 video starts and his updated version for forms is ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qelcFC6B_Nw.html
@wello7266
@wello7266 4 года назад
Oh and you didn’t mention auto write so when you did email you should make type=“email” not sayin your wrong just saying you didn’t metion
@dreamscapeai7
@dreamscapeai7 4 года назад
Video starts at 2:40
@Vincent-fs8ry
@Vincent-fs8ry 6 лет назад
Good video but i already knew all of this!
@Dani_Krossing
@Dani_Krossing 6 лет назад
Yes some of these HTML lessons are going to be updated versions of previous videos. But because there are so many new features in HTML and CSS, there will also be much new information in this course :)
@gmarsenopoulos
@gmarsenopoulos 6 лет назад
Do you have a upload scedule for the updated versions? Because I am new in front end dev and I want to learn and keep track of your tutorials. You are great teacher!
@netbat
@netbat 3 года назад
he starts coding at 2:52
@matthewwellik3126
@matthewwellik3126 6 лет назад
cute
@AhmetBD1
@AhmetBD1 3 года назад
O'pıl indeed
@nicholasdiaz2045
@nicholasdiaz2045 Год назад
Only 2
@dancarter6044
@dancarter6044 2 года назад
What kind of idiot doesn't set a name and value for a submit? If you set a name, you can have more than one submit in a form that can trigger different actions.
@Dani_Krossing
@Dani_Krossing 2 года назад
I'm very confused about this comment. 😅 Are you calling me an idiot or...? A "name" attribute isn't always needed depending on the application, and a value is not needed either when sending the data. 🙂 And no, multiple submits won't trigger different "actions", they would all trigger the same "action" attribute set in the "form" element. 🙂 ... Either I am completely misreading your comment, or you feel extremely strongly about some misinformation that was given to you. 😂 I can't help but giggle a bit over the irony of you calling people "idiot" if they didn't do things your way hehe.
@dancarter6044
@dancarter6044 2 года назад
@@Dani_Krossing No if you name a submit button, you can have multiple ones in the same form and they can trigger different action in PHP after the form values are sent to the server. if(isset(subEdit)) { //profile edited } elseif(isset(subDelete)) { //profile deleted } A submit button's value is its label like "Edit Profile" Better yet to use the Edit Form. Then you can have a label that is different than its value.
@knightstarr4587
@knightstarr4587 5 лет назад
I got lost, to long
Далее
Learn HTML Forms In 25 Minutes
24:56
Просмотров 948 тыс.
Learn HTML forms in 8 minutes 📝
8:39
Просмотров 286 тыс.
Login Form in HTML & CSS
11:07
Просмотров 1,1 млн
HTML Forms and Inputs | HTML5 Tutorial for Beginners
45:19
Learn CSS dropdown menus in 6 minutes! 🔻
6:36
Просмотров 62 тыс.
Learn HTML5 and CSS3 For Beginners - Crash Course
3:54:03
HTML Tutorial - How to Make a Super Simple Website
33:24
HTML Tutorial for Beginners: HTML Crash Course
1:09:34