HTML Tutorial 15 - Creating HTML Forms

In this tutorial, we talk about how to create forms in HTML, where users can input data. We also talk about how the data is sent to an external webpage or script, which can then take and use the data from the HTML form.

Some of the things we mention in this tutorial are how to input text using the "input" tag and the "type" attribute, which creates a text box and how to input a password into a textbox, without having to worry about whether or not someone is looking at the screen! We also talk about "submit" buttons, as well as some other things related to HTML forms!

And, yes, I do know about the spelling error in the tutorial! ;)

Thank you for watching!

TechnicalCafe Blog

TechnicalCafe Twitter

Jamie's Twitter

[webpad]

I must say, you have a great talent in teaching. These seemed very complicated to me from where I am studying html currently. Glad I turned to youtube and found your video. You basically just simplified it and made it very practical to understand.

[Qoddalol]

Simply the best explanation i have found covering this topic!

I feel the need to express my gratitude towards you for sharing this information with me and other HTML/Css beginners!

THANK YOU!

[IgorMilione]

Thanks man! I'm brazilian and I have some difficulty to understanding english, but your video is much better than videos in portuguese.. hahaha

[PyMoondra]

Great job! Too bad it seems you have stopped making these types of videos. Bundle all of your videos, refine them and sell it as a course. One thing I liked about your video was the details. You address each and every point within the form tag, and display their benefits.

[kiransmilingstar]

Clearly explained and clearly understood.. Thank u so much :)

[thecherrythatkakyoinverbal]

Thank you so much Jamie! I have learned so much from you. I'm a newbie here and learning by myself. Honestly, I'm sold. You're amazing!!! I love love love your videos!!!!

[tcironbear]

It is so hard to find someone who could explain how program a web page that can input data. Thank you.

[TechnicalCafe]

Thank you for sharing this link with everyone, as well as for watching, commenting, and subscribing! :)

[TechnicalCafe]

Hello, Kevin Carter! Thank you for watching the TechnicalCafe tutorial videos and my apologies that you weren't able to find information about how to space out text boxes in the tutorials!

One way that you could attempt to space the text boxes would be to create a table that has three columns and one or two rows, depending on what you'd like to display. From there, you could use the "cellpadding" or "cellspacing" attributes in HTML to space things out.

You could also use CSS to style them!

[TechnicalCafe]

Hey, JRCapital69! Thank you for commenting and watching; I appreciate it!

As for naming the fields in an HTML drop-down or selection menu, you can simply put the name or value that you want displayed to the user between the two opening and closing "option" tags.

You can assign them a value, which can be used by PHP and other languages to process the data, by using the "value" attribute in HTML, and assigning a value of your choice. (Though, you may want to use the same value in both places!)

[shawnwytch]

you explained it real good im going to watch more of your videos.

[lazarobodevan]

Thanks for this helpful explanation :) I've been learning web programming at school and I was having some doubts, but not anymore. ^^ Keep up this good work!

[TechnicalCafe]

Did you create a "process.php" page for your webpage? The reason this form is not submitting is because there is no page to take the data.

In this tutorial, the "process.php" page was intended as a placeholder, to show you what you would use if you actually wrote a PHP script to use or handle the data that was entered in the HTML form that we created.

For more information about using PHP to process the data, please feel free to send me a YouTube message or an e-mail!

Thank you for watching!

[TechnicalCafe]

You can make text input show up on the same page by "sending" the data to the page that the form is on using PHP (and maybe even some JavaScript, like the jQuery library or AJAX)!

In the form's attributes, you can omit the "action" attribute or set it to be the URL or location of the page that you're using (in this case, the one that has the form on it that you'd like the input to appear on), similar to how we used "process.php" as the "action".

Best of luck!

[TechnicalCafe]

The "process.php" page that you see in this and other tutorials related to forms on the TechnicalCafe channel is supposed to be where the information from the form gets sent once the user clicks on the "Submit" button.

This can be done using either GET or POST variables, which come into play when processing data using PHP that comes from an HTML form.

A "process.php" page may do things to the data that it takes from the HTML form, such as insert it into a database, manipulate it, etc.

[ronnybanerjee]

Is POST mostly preferred over GET which is written inside method? Is it something like GET should never be used? As using GET leads to display of the username and password in the url....

[stacihumphries]

Thanks for the video! It helped clear some things and I'm not as intimidated by forms as I was.

[kevincarter]

Hi Jamie, Love the HTML tutorials. I am taking a JavaScript class right now and I am creating a form in HTML. I was wondering if you could tell me if there is a way to space the text boxes from left to right. I have watched just about all of you HTML videos and I have not found anything on that yet. For example I put 3 text input for the phone number and I would like to put a space between each one. Thanks for any help you can give. Keep up the good work.

[AbhishekNigam]

Great video for beginners. Just wanna suggest to use indentation!

[TechnicalCafe]

Hey, Luther442! Thank you for watching the TechnicalCafe tutorials!

As for your question regarding how to impose a limit on the amount of text a user can enter in a textbox, you can do this by using the "maxlength" attribute of the "input" tag in HTML. So, if you wanted to have a max length of 10 characters, you could do something like: maxlength="10"

The Tizag website is where I got this information from and also has a bunch of great HTML (and other) tutorials that you may want to check out!