Home Linux HTML/CSS PHP MySQL JavaScript Coding T-shirts Blog PHP Fiddle

Intro to HTML: Forms

Quick Copy Boxes

An HTML form contains elements that allow for user input.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Intro PHP Playlist:

Intro to PHP

User Input

Input Input, allows the user to fill in information or select options. HTML forms are easily made functional using PHP. In this lesson we will just learn the HTML. You will be able to set up the user's view. Once you get to the PHP 'Post' lesson, in the PHP lessons, you will be able to make the form work.

HTML is used to display stuff, however it is not capible of actually doing things. On the front end, you can use javascript to write logic. On the backend (server side with the database), you can write your logic in PHP. There are other languages that can be used, but these are the languages covered in this tuturial. It is also a popular combination of languages.

Programming logic is the stuff you write that actually makes your application work. You can build a form in HTML. The user will see the form. They can click around. But nothing happens when the user clicks.

Example: Change Font Color

Let's say you have a form with radio buttons. Each radio has a different color option: red, yellow, blue and green. When the user selects the color and presses submit, the font color on the page will change. You will have to write logic to make the radio buttons work. HTML can dispaly the options but it cannot make the font color change based on the user's input.

Input Element

This element is essential to your from. Make sure to include it. The type attribut will depend on the situation. In the turtorials on the indivual input types, I will go over more specifics. This lesson is int3eded to give you a general idea on how to set up a form.

Submit Button

This is where the magic happens. In the PHP tutorials, you will learn how to make the button work. When working with PHP, the form's action attribute will usually equal a PHP file location. This is the location of the code that is needed to make your submit button work. When the user clicks submit, the code in the PHP file will run.

Example: Imagine you fill out an online application. At the end you click the submit button. That will run a server side script. That code will store your information in a database and give you a message that your application was recieved. An alert or email will probably be sent to the person(s) in charge of handling online applications.

Using HTML and PHP (plus a database, such as MySQL) you can create the example above. We will do simular projects throughout these tutorials.

Example: Form Containing Radios.

A short form for the user to select a strawberry or blueberry for the ice cream toppig.

<!DOCTYPE html>
  <!-- Form-->
  <form action = 'main.php'>
   <!-- User's makes selection-->
   <label>Which berry would you like on your ice cream?</label><br>
   <input type='radio' name='berry' value='1' checked> Blueberries<br>
   <input type='radio' name='berry' value='2'> Strawberries<br>
   <input type='Submit' value='Submit'>

<body></body> - Your Form will go in the body of the page.
<form></form> - Form Element
action = 'main.php' - When the user clicks the submit button, the code in main.php will run. This is the logic.
<label></label> - The question to the user is placed in the label tags.
<input type='radio'...> - These are the imput elements that allow the user to make a selection. In this case radio buttons are used. The user will select strawberry or blueberry.
<input type='Submit'... > This is the submit button. On click, the code on 'php.main' will execute.

Color Selector



Intro to LAMP:

What is LAMP Stack?

If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy


How to be a Great Programmer:

Commander Candy Vlog

Now, run the code in the code editor box below. Then play around and make your own changes.